在前端开发过程中，常常需要使用到静态网站生成器来快速地生成静态网站，而 generator-wpst-static 就是一款非常优秀的静态网站生成器。本文将为你详细介绍它的使用方法。
安装
generator-wpst-static 是一个 npm 包，所以首先需要在本地安装 Node.js 和 npm。安装完成后，在命令行界面输入以下命令：
$ npm install -g yo generator-wpst-static
使用
安装完成后，在命令行界面输入以下命令：
$ yo wpst-static
这时会出现一个交互式的命令行界面，你可以输入一些基本信息，如你的网站名称、作者等。输入完成后按回车键，generator-wpst-static 会自动为你生成一个新的静态网站项目。
目录结构
生成的静态网站项目的目录结构如下：
-- -------------------- ---- ------- - --- ------------ --- --- - --- ------ - --- ------- - --- --------- - --- -- - --- ---- --- ------------- --- ------------ --- ---------- --- ------------ --- ---------
其中，node_modules 目录是用于存放依赖包的目录，src 目录是我们存放网站源代码的地方。
- src/assets：放置一些静态资源，如图片、字体等。
- src/content：放置网站内容的地方，如文章、页面等。
- src/templates：放置模板文件的地方。
- src/js：放置 JavaScript 文件的地方。
- src/scss：放置 CSS 文件的地方。
- .editorconfig：编辑器配置文件。
- .eleventy.js：Eleventy 配置文件。
- .gitignore：Git 忽略文件。
- package.json：项目依赖配置文件。
- README.md：项目说明文档。
开始编写网站
开始编写网站前，需要先了解一些 generator-wpst-static 的基本概念：
- Nunjucks：一种模板语言，用于生成 HTML 文件。
- Eleventy：一个静态网站生成器，可以将 Nunjucks 文件生成静态 HTML 文件。
编写页面
首先，我们需要在 src/content 目录下新建一个页面文件。以 index.njk 为例，文件内容如下：
--- title: '首页' layout: 'layouts/default.njk' --- <main> <h1>欢迎来到 homepage</h1> </main>
代码中，我们定义了一个名为 homepage 的页面，并指定了该页面的布局。页面的具体内容写在 <main> 元素中。
编写布局文件
布局文件用于定义页面的外观和结构，以 default.njk 文件为例，文件内容如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
----- ---------------- -------------------- --
--------- ----- ----- ---- ----- ---- -------- ----------
-------
------
-- ----- ---- ---- -------- --
------- ------------------------------
-------
-------代码中，我们定义了一个基本的 HTML 结构。{% block title %}{{ title }}{% endblock %} 和 {% block body %}{% endblock %} 是模板中的占位符，具体的页面内容将在这里填充。
编译网站
编译网站之前需要先启动开发服务器。在命令行界面输入以下命令：
$ npm run dev
这时你可以在浏览器中访问 http://localhost:8080 来查看网站。
在命令行界面输入以下命令即可编译网站：
$ npm run build
这时网站的静态文件将会在 _site 目录下生成。
结语
generator-wpst-static 是一种快速生成静态网站的方式，通过本文的介绍，你应该已经对它的使用方法有了更深入的了解。在使用过程中，如果遇到了问题，可以查看官方文档或者提问社区。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568d281e8991b448e491a