在过去的几年里，开源静态网站生成器的数量增长迅速，StaticGen 上几乎找得到每一种语言实现的版本。静态网站相比动态网站具备无需依赖应用服务器，性能优越，部署简单等特点。特别适合生成静态文档，个人博客，饱受开发者的青睐。相比学会使用，掌握工作原理也尤为重要。
一个静态网站生成器的工作流程通常有以下几个步骤：
- 读取源文件（e.g. 约定 markdown 格式）
- 资源预处理
- 模板引擎渲染
- 生成目标文件
第一步 读取源文件
从使用者的角度，我们希望以 markdown 的形式进行写作，相比纯文本更容易控制格式，并且可以灵活地自定义配置（源目录路径、目标目录路径、页面标题等等），覆盖工具的默认配置，这一步很简单。
以 Node.js 为例：
// 读取 markdown 内容
readFile(source, (err, data) => {
console.log(data);
})
// 读取配置内容
console.log(require(config))
第二步 资源预处理
也是静态网站生成器的核心工作部分。首先解析 markdown 内容，分离头部元数据（通常采用 YAML 格式，用于单页信息配置）与主体内容。
形似：
---
title: Hello World
---
Awesome static site generator
解析成：
const result = {
'path/to/hello-world.md': {
title: 'Hello World',
content: new Buffer('Awesome static site generator.')
}
}
通常的做法是扫描文件，匹配分隔符---，分割内容，对头部用相应格式的引擎解析（e.g. YAML 格式用 yaml-parser，JSON 格式用 JSON.parse），对主体内容，需要把 markdown 内容转换成带有标签的 HTML 片段，用于排版与应用样式，推荐比较流行的解析器 marked 。
经过转换后：
const markedResult = {
'path/to/hello-world.md': {
title: 'Hello World',
content: new Buffer('Awesome static site generator.'),
html: '<p>Awesome static site generator.</p>'
}
}
对其它一些静态资源（e.g. css, js, png），可以引入一系列工具链，CSS 预处理器，编译器，打包器，流程构建工具，将全部资源相整合。由此，可以提供一套主题配置，甚至可以开放主题插件，丰富内容。所有的设计出发点都基于更好的内容写作，而不必折腾繁琐重复性的页面开发工作。
第三步 模板引擎渲染
在上一步，我们得到了 markdown 解析后的 HTML 片段，接下来要做得就是将 HTML 片段嵌入预先定义的模板，复用页面中公共部分（e.g. 导航栏、侧边栏、底部），还可以嵌入变量（默认配置及自定义配置）和静态资源。
以模板引擎 EJS 为例：
<html>
<head><%= title %></head>
<body>
<% include partials/navbar %>
<%- html %>
</body>
</html>
// EJS 渲染
const ejsResult = ejs.render(str, {
...markedResult['path/to/hello-world.md']
});
我们甚至可以抛弃以往模板引擎渲染这种比较传统的方式，改用 MV* 框架（e.g. React, Vue, Angular），并结合服务端渲染技术，热替换技术及其它工具链，打造一个更现代化的静态网站生成器。
第四步 生成目标文件
经过前三步的解析，处理，编译，转换，我们得到了最终的资源文件，最后一步只需清理目标目录，并输出所有资源到目标目录，结束工作。
// 生成目标文件
writeFile(destination, ejsResult, err => {
if (err) return console.error(err)
}))
你可能还需要
- 一个本地服务器 通过启动一个 Node.js Server 实时预览界面，监听本地文件改动，结合 live-reload 触发页面自动刷新，或者利用 Webpack 热替换功能。
- 一个文件数据库 持久化存储部分数据（e.g. 博客发表时间，文件哈希值，文件修改时间），重新编译可以跳过未改动的文件。
- 一个日志系统 记录编译过程和编译结果，增强 debug 可行性，按 log 层级格式化输出不同信息到控制台。
- 一个自动化部署方案 整合 Git 和 WebHook，一键发布到 GitHub Pages 或者自己的网站上。
小结
本文从宏观角度解释了静态网站生成器的工作流程（输入 => 预处理 => 渲染 => 输出）。当然这个过程还涉及命令行的解析，合法性校验，错误捕获，解析器原理，编译器原理，模板引擎原理，插件设计等等。See you next time ~
网友评论