静态网站生成器是现代 Web 开发中不可或缺的工具之一。其中，static-site 是一个轻量级的 Node.js 模块，它提供了快速生成基于 Markdown、Pug 和 SCSS 的静态网站的能力。本文将详细介绍如何使用 static-site。
安装
在开始之前，你需要先安装 Node.js 和 npm。接着，可以使用以下命令来安装 static-site：
--- ------- -----------
配置
安装完成后，在项目根目录下创建一个 config.json 文件，用于配置生成静态网站的选项。这个文件应该长成这样：
-
------ ------
------- -------
---------- ----
-------- --- ------ ------
-------------- -- ------ ------ ---- --------- ----- --------------
-------- -
-
-------- -------
------- ----
----------- -----------
----------- -----------
-
-
-我们来逐一解释一下各个选项的作用：
src：源文件目录。dest：生成文件目录。baseUrl：网站根路径。title：网站标题。description：网站描述。pages：页面列表。
关于 pages 属性值的说明：
title：页面标题。path：页面路径。template：模板文件名。markdown：Markdown 文件名。
模板
接下来，我们需要创建模板文件。在项目的 src 目录下创建一个名为 layout.pug 的文件，作为网站的布局文件。然后，再创建一个名为 home.pug 的文件，作为首页的模板文件。这个文件应该包含以下内容：
------- ----------
----- -------
--- -----
--- -----------
---- ---- -- -----
-----
-------------- ----------
--------------- ------------Markdown
接着，在项目的 src 目录下创建一个名为 README.md 的 Markdown 文件，用于渲染到首页。这个文件可以包含一些简单的 Markdown 格式文本，如下所示：
- ------------ ------ ------
SCSS
最后，我们需要创建一个名为 style.scss 的 SCSS 文件，用于添加样式。这个文件应该长成这样：
---- -
------------ -----------
-
----- -
-------------- -----
----------- -
----------- --
-
------------- -
---------- ------
------------ ----
-
-构建
现在，所有的配置都已经完成了，我们可以使用 static-site 生成静态网站了。在终端中执行以下命令即可：
----------- -----
这会把源文件编译为 HTML、CSS 和 JavaScript 文件，并将它们放在 dist 目录下。如果你想在本地预览生成的网站，可以使用以下命令：
----------- -----
总结
通过本文，我们学习了如何使用 static-site 生成静态网站。静态网站生成器是一个强大的工具，它可以让你快速创建简单而美观的静态网站。如果你正在寻找一种轻量级的解决方案，那么 static-site 绝对值得一试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/44735