静态网站生成器是如何工作的

静态网站生成器是如何工作的

在过去的几年里,开源静态网站生成器的数量增长迅速,StaticGen 上几乎找得到每一种语言实现的版本。静态网站相比动态网站具备无需依赖应用服务器,性能优越,部署简单等特点。特别适合生成静态文档,个人博客,饱受开发者的青睐。相比学会使用,掌握工作原理也尤为重要。

一个静态网站生成器的工作流程通常有以下几个步骤:

  1. 读取源文件(e.g. 约定 markdown 格式)
  2. 资源预处理
  3. 模板引擎渲染
  4. 生成目标文件

第一步 读取源文件

从使用者的角度,我们希望以 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 ~

编辑于 2017-07-11

文章被以下专栏收录