随着前端发展的趋势，静态网站生成器成为越来越流行的工具。而使用 npm 包管理工具，可以方便地安装和维护这些工具。本文将介绍如何使用 npm 包 generator-makestatic 构建静态网站。
简介
generator-makestatic 是一个生成器，基于 Yeoman 框架开发，用于快速构建静态网站和博客。它使用 Handlebars 模板、Markdown 和 LESS 等技术，可以快速搭建一个现代化的静态网站。此外，它还提供了许多有用的功能，比如自动生成文章目录、代码高亮、RSS 订阅等。
安装
首先，你需要先安装 Node.js 和 npm。如果你还没有安装，请到官网下载并安装。
接着，在控制台中输入以下命令来安装 generator-makestatic：
npm install -g yo generator-makestatic
需要注意的是，-g 参数表示全局安装，在安装完成后，你可以通过任何目录来使用 generator-makestatic。
创建项目
在控制台中进入你要创建项目的目录，然后输入以下命令：
yo makestatic
这个命令会提示你输入一些基本信息，包括网站名称、作者、描述等。输入完毕后，generator-makestatic 会在当前目录创建一个新的项目，并在其中生成一些基本文件和文件夹。
开发
在项目目录中，有一个 src 文件夹，里面存放了项目的所有源代码。
模板
模板使用 Handlebars 语言，它是一种超越 HTML 的模板语言。在 src/templates 目录下，可以看到一些已经创建好的模板文件，比如 layout.hbs、index.hbs、post.hbs 等。
样式
样式使用 LESS 预处理器，可以很方便地书写样式。在 src/less 目录下，可以看到一个 main.less 文件，你可以在此文件中写入你的样式。
内容
内容使用 Markdown 语言，可以在 src/content 目录下创建你的文章和页面。
生成
在命令行中输入以下命令：
makestatic --serve
这个命令会将项目编译成静态页面，并启动一个本地服务器，以便你可以预览和测试你的网站。在浏览器中打开 http://localhost:3000/，你就可以看到你的网站了。如果你想停止服务器，可以在命令行中按 Ctrl+C。
部署
当你完成网站的开发后，想要部署到线上服务器上，可以使用以下命令：
makestatic --build
这个命令会将项目编译成静态页面，并将其输出到 build 目录中，你可以将这个目录上传到你的服务器上。
示例代码
以下是一个简单的网站示例。
src/templates/layout.hbs
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ------ ---------------- ------------------------- ------ ---------------- -------------------- ------- ------ --------- -------------------- ------- ------- ---------- ---------------------- ---------- --------------------------------- -------- -------- ---------- ------- ----- ------ -------- --------- ----------- -------- -------------- ---------- -------- -------------------------- ------- -------
src/templates/index.hbs
-- -------------------- ---- ------- --------- -------------- -------- ------- ----------- ----------- ---------------------- ------------------- ------------ ------------ ----------------- ------------- ----------- -------- ------------ ------ ----------------------- -------------- --------- ------------ ------------ ---------- -----------
src/templates/post.hbs
-- -------------------- ---- ------- --------- ------------- ---------- ---------- --------------------- ------------------ ----------- ----------- ---------------- ------------ ----------- -----------
src/content/home.md
-- -------------------- ---- ------- --- ------ -- ---- --- - ------- -- -- ---- ---- -- --- ---- ---- -- -- ----- ---- --- --- ---- --- -- ------ ------ -- ------ ----- ------- ------- - -------------------------- ---------
src/content/about.md
--- title: About Me --- # About Me I am a web developer based in New York. I specialize in front-end technologies such as HTML, CSS, and JavaScript.
src/content/posts/first-post.md
--- title: My First Post date: 2019-06-01 tags: [news, announcement] --- # My First Post Hello, world! This is my first post on my new blog. I'm excited to start sharing my thoughts and ideas with you.
src/content/posts/second-post.md
--- title: My Second Post date: 2019-06-02 tags: [tutorial] --- # My Second Post Welcome back! In this post, I'm going to show you how to build a simple website using generator-makestatic.
结语
通过本文，你已经了解了如何使用 generator-makestatic 快速构建静态网站，并学习了一些基本的概念和技术。希望可以帮助你在开发过程中少走一些弯路，提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c481e8991b448e8dca