在前后端分离架构日益普及的今天，静态网站生成器（Static Site Generators, SSG）凭借其卓越的性能、极高的安全性以及低廉的部署成本，成为了技术文档、个人博客乃至企业官网的首选方案。从早期的 Jekyll 到高性能的 Hugo，再到基于现代前端生态的 VitePress，虽然它们的技术栈各异，但核心目标一致：将结构化的内容（Markdown）与表现层（模板）在构建时编译为纯静态的 HTML 文件。

本文将深入浅出地剖析这三款主流工具的核心工作机制，揭示“无需后端”的网站是如何被自动化组织与输出的。

一、核心工作流：SSG 的通用逻辑

无论底层语言是 Ruby、Go 还是 JavaScript/TypeScript，所有静态网站生成器都遵循一个相似的“构建流水线”：

内容加载（Loading）：读取配置文件（如 _config.yml, hugo.toml, config.ts）和源文件（Markdown、图片、资产）。
解析与转换（Parsing & Transformation）：
- 将 Markdown 解析为抽象语法树（AST）。
- 执行自定义插件或短代码（Shortcodes）处理。
- 将 AST 转换为 HTML 片段。
模板渲染（Templating）：将生成的 HTML 片段注入到布局模板（Layouts）中，填充变量（如标题、日期、作者），形成完整的 HTML 页面。
路由与输出（Routing & Emitting）：根据文件路径或 Front Matter 中的配置确定 URL 路由，将最终结果写入输出目录（通常是 dist 或 public）。
资源优化（Optimization）：压缩 CSS/JS、优化图片、生成 Service Worker 等（现代 SSG 尤为重视此步）。

接下来，我们分别看看 Jekyll、Hugo 和 VitePress 是如何具体实现这一流程的。

Jekyll 是 GitHub Pages 的默认引擎，也是现代 SSG 的鼻祖。它由 Ruby 编写，核心理念是“约定优于配置”。

Jekyll 的工作流高度依赖 Ruby 的对象模型。其核心类 Site 充当了总指挥，协调 Page、Post、Document 等对象。

Markdown 解析：Jekyll 本身不解析 Markdown，而是通过转换器（Converter）插件调用外部库（默认是 kramdown）。它将 .md 文件读取为字符串，提取 Front Matter（YAML 头信息），然后将剩余内容传递给解析器生成 HTML。
模板引擎 Liquid：Jekyll 使用 Liquid 作为模板语言。Liquid 是一种安全的、沙箱化的模板引擎，它在渲染阶段遍历 _layouts 目录下的模板文件。
- 逻辑示例：当渲染一篇博客时，Jekyll 会查找 Front Matter 中指定的 layout: post，加载 _layouts/post.html，并将该页面的内容注入到 {{ content }} 变量中，再将该结果注入到 _layouts/default.html 的 {{ content }} 中（嵌套继承）。
集合（Collections）：除了默认的 _posts，Jekyll 允许用户定义自定义集合。构建时，它会遍历所有集合，为每个文档生成对应的输出路径。

解释型执行：由于 Ruby 是解释型语言，且 Jekyll 大量依赖插件系统，其构建速度在处理数千页站点时相对较慢。
插件钩子（Hooks）：Jekyll 提供了丰富的生命周期钩子（如 pre_render, post_write），允许开发者在构建的任何阶段插入 Ruby 代码修改数据，这赋予了它极高的灵活性，但也增加了调试复杂度。

Hugo 由 Go 语言编写，以其惊人的构建速度著称（每秒可渲染数千页）。它的设计哲学是“快”和“单二进制文件部署”。

Hugo 的性能优势源于 Go 的并发特性和其内部精心设计的管道（Pipeline）。

并行处理：Hugo 在读取文件和解析内容时，充分利用了 Go 的 Goroutine。它可以同时解析成百上千个 Markdown 文件，而不会像 Jekyll 那样按顺序阻塞。
内置解析器：与 Jekyll 不同，Hugo 内置了 Markdown 解析器（默认是 Goldmark，符合 CommonMark 标准）。这意味着它减少了外部依赖调用，直接在内存中完成从 Markdown 到 AST 再到 HTML 的转换。
模板引擎 Go Templates：Hugo 使用 Go 的原生模板语法。虽然学习曲线稍陡，但其执行效率极高。Hugo 的模板支持强大的内建函数（如 range, where, sort），可以直接在模板中进行复杂的数据过滤和排序，无需编写额外脚本。
数据流管道：Hugo 将构建过程视为一个数据流。内容被加载后，经过一系列的处理步骤（Front Matter 解析 -> 元数据提取 -> 内容渲染），最终流入渲染器。

VitePress 是 VuePress 的继任者，基于 Vite 和 Vue 3 构建。它代表了 SSG 的第三代形态：不仅生成静态 HTML，还融合了现代前端开发体验（HMR、按需加载）。

VitePress 的工作机制与前两者有本质区别，它深度利用了浏览器的原生能力（ES Modules）和 Vite 的构建特性。

Markdown 即 Vue 组件：在 VitePress 中，每个 .md 文件在构建时都被视为一个 Vue 单文件组件（SFC）。
- 解析过程：Markdown 内容被解析为 HTML，而其中的 Vue 语法（如