简介
静态网站生成器（static site generator）是一种能够将动态内容转化成静态网站的工具，它们通常使用模板引擎和 Markdown 在本地生成静态 HTML 文件。这些文件可以很容易地托管在 GitHub 等服务上，并具有超高的性能和可用性。
在这里，我们将介绍一个名为 static-generate 的 NPM 包，它是一个用于静态生成网站的 CLI 工具。使用该工具，你可以快速地创建一个新的项目，并解决许多与静态网站生成器相关的常见问题。
安装
要安装 static-generate，你需要先安装 Node.js 和 NPM。在安装完成之后，运行以下命令：
$ npm install -g static-generate
命令
create
create 命令可以为你创建一个新的静态网站项目。你可以通过以下命令创建一个新的名称为 my-blog 的项目：
$ static-generate create my-blog
使用这个命令，static-generate 会在当前目录下创建一个新的 my-blog 目录，该目录中包含一个预置的模板，该模板有助于你快速创建一篇新的博客文章。
build
build 命令负责将你的静态网站项目构建为一个可部署的、可运行的项目。你可以通过以下命令简单地构建项目：
$ static-generate build
使用这个命令，static-generate 会递归地遍历你的项目并将其编译成 HTML、CSS 和 JavaScript 等静态文件。这些文件会被写入到 output 目录中，你可以将其部署到你的服务器或者静态网站托管服务上。
项目结构
当你通过 create 命令创建一个新的项目时，static-generate 将会创建如下的项目结构：
-- -------------------- ---- -------
--------
--- --------
- --- --------
- --- ----------
- --- --------
--- --------
- --- ------------
- --- ---------
--- -------
- --- ----
- - --- --------
- --- ---
- --- -------
--- ----
--- -----------
--- ----------在这个目录结构中，你可以看到如下几个目录和文件：
content/：存放所有网站的内容文件，例如文本、图片等。layouts/：存放所有模板文件，模板可以帮助你快速渲染内容文件的内容。static/：存放所有 CSS、JavaScript 和图像等静态文件。.sg/：static-generate 的工作目录，包含配置文件和插件脚本等。
示例代码
下面示例使用 static-generate 构建了一个简单的博客网站，你可以参考这里：
-- -------------------- ---- ------- - -- - --- ------- -- --------------- - -------- - --------------- ------ ------- - --- ------- -- - -- ------- - ---- - --------------- -----
这里是一个简单的示例内容文件位于 content/index.md：
-- -------------------- ---- ------- --- ------ -- ---- ----- ---------- --- - --------- ----------- -- ---- -- ----- ------- ----- -- ------ ------ --------- -------- -- - --- ------ ------ ---------- --- -- --- --
接下来，我们为该内容文件创建一个对应的模板文件位于 layouts/default.html：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------ ----------
----- ---------------- ----------------------------
-------
------
--------
-----
----
------ ----------------------
-----
------
---------
------
-- -------- --
-------
--------
--------- -- ------------- -- -- ---- --------- ------
---------
------- ----------------------------------
-------
-------最后，运行 build 命令构建项目：
$ static-generate build
构建完成后，你可以在 output 目录中找到已经构建完成的静态网站。
总结
在这篇文章中，我们介绍了 static-generate 工具的使用方法。据我们所知，它是建立和编译静态网站的最有效和最流行的工具之一，因此我们希望我们的指南能够帮助你获得成功。同时，请记住，静态网站生成器需要深入了解 HTML、CSS 和 JavaScript，因此我们建议你花点时间学习这些技术。祝你好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556b381e8991b448d37d3