简介
systatic 是一个基于 Node.js 的静态站点生成器，能够将 Markdown 文件转换为 HTML，同时支持模板渲染、自定义路由等功能。它是一个轻量、易用的工具，适用于个人博客、技术文档等场景。
安装
使用 npm 可以轻松安装：
npm i -g systatic
基本使用
创建项目
在命令行中执行以下命令，创建一个基于 systatic 的项目：
systatic init mysite cd mysite
执行完 init 命令后，系统会自动生成目录结构和配置文件：
mysite/ ├── public // 存放静态文件 ├── src // 存放 Markdown 文件 │ ├── doc │ ├── home │ └── weekly ├── templates // 存放模板文件 └── systatic.yml // 配置文件
编写 Markdown 文件
在 src 目录下创建 Markdown 文件，比如我创建了一个文章 hello-world.md：
# Hello World 这是我的第一篇文章，欢迎大家阅读！
渲染 Markdown 文件
执行以下命令，将 Markdown 文件转换为 HTML：
systatic build
执行完 build 命令后，系统会自动生成静态 HTML 文件：
mysite/ ├── public │ └── hello-world.html ├── src │ ├── hello-world.md ...
可以看到，系统自动将 Markdown 文件转换为了 HTML 文件并存放在 public 目录中。
预览站点
执行以下命令，可以在本地启动一个 HTTP 服务器并预览站点：
systatic serve
在浏览器中打开 http://localhost:8080，就可以看到当前站点的首页了。
模板
systatic 支持使用模板渲染 Markdown 文件。用户可以在 templates 目录下编写模板文件，然后在 systatic.yml 中配置。
创建模板文件
在 templates 目录下创建一个文件 default.html，作为默认模板：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
-----------
-------
-------配置模板
在 systatic.yml 配置文件中，添加如下配置：
template: engine: nunjucks path: templates default: default.html
其中，engine 表示模板引擎，此处是使用 nunjucks；path 表示模板文件存放的目录；default 表示默认模板文件名。
使用模板
在 Markdown 文件中，可以使用 YAML Front Matter 来定义一些元数据，比如文章的标题：
--- title: Hello World --- # Hello World 这是我的第一篇文章，欢迎大家阅读！
然后，我们可以在模板中使用这些元数据：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
-----------
-------
-------这样，生成的 HTML 文件就会自动使用模板了。
自定义路由
systatic 支持自定义路由，即根据 URL 路径来生成 HTML 文件。比如我们可以将 /doc 路径下的 Markdown 文件编译为 HTML 文件，然后在浏览器中访问 /doc/hello-world.html 来查看文章。
配置路由
在 systatic.yml 配置文件中，添加如下配置：
router: doc: src/doc weekly: src/weekly
其中，router 表示自定义路由配置，doc 和 weekly 是两个路径名，对应的值是对应的 Markdown 文件存放目录。
编写 Markdown 文件
在 src/doc 目录下创建一个 Markdown 文件 hello-world.md：
--- title: Hello World --- # Hello World 欢迎查看我的文档。
生成 HTML 文件
执行命令 systatic build，就可以在 public 目录下看到生成的 HTML 文件 hello-world.html。
预览站点
执行命令 systatic serve，然后在浏览器中访问 http://localhost:8080/doc/hello-world.html 就可以查看文章了。
总结
systatic 是一个功能强大、易用的静态站点生成器。通过学习本文，读者可以掌握基本的使用方法，并了解到如何使用模板、自定义路由等高级功能。systatic 的文档也非常详尽，读者可以前往官网查看更多信息。
示例代码
本文使用的示例代码已经放在 Github 上，请前往 https://github.com/sunshineoflife/systatic-tutorial 下载或查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75591