什么是静态站点生成器？一文讲清楚

🧱 静态站点生成器详解

💡 什么是静态站点生成器？

静态站点生成器（Static Site Generator, SSG） 是一种现代网站构建工具。

它的工作原理是：
把 内容源文件 + 模板 + 数据 在构建时组合起来，最终生成 HTML、CSS、JS、JSON 等静态资源文件。
这些文件可以直接在浏览器中打开，也可以部署到服务器上访问。

常见的部署平台包括：

• GitHub Pages
• Netlify
• Vercel
• 自建 CDN 或服务器

---

🎯 使用场景是什么？

你想把你写的 Markdown 文件（比如 .md 文件）变成网页能直接打开的 HTML 文件，对吧？

这时候你就需要一个叫 静态站点生成器 的工具。

它就像一个“自动转换器”：

• 你给它一堆 Markdown 文件
• 它帮你批量转成 HTML 页面
• 还能自动加上导航栏、菜单、样式等网站元素
• 最后输出一个完整的网站

举个例子：

你写了这几篇 Markdown 文章：

入门.md
进阶.md
常见问题.md

运行一下工具，它就生成：

入门.html
进阶.html
常见问题.html

然后你把这些 HTML 文件上传到 GitHub Pages 或 Netlify 上，别人就可以通过网址访问你的网页了！

整个过程你不需要写 HTML、不需要懂 JavaScript，只要会写 Markdown 就行。

---

🔍 它的核心能力是什么？

很多人以为静态站点生成器只是“Markdown 转 HTML”的工具，其实这只是它功能的一小部分。

它的真正价值在于：它是一个内容处理引擎，可以灵活地将多种格式的内容，转换为多种类型的输出结果。

---

📦 常见的输入格式（Input）

格式	描述	是否适合写作	是否结构化
✅ Markdown (.md)	最常见，适合写文章、文档	✅ 非常适合	⚠️ 结构有限
✅ HTML (.html)	直接写 HTML 页面	❌ 不适合长文写作	✅ 强结构
✅ YAML (.yaml)	配置文件、元数据	⚠️ 不适合正文	✅ 强结构
✅ JSON (.json)	存储数据，如产品列表	⚠️ 不适合正文	✅ 强结构
✅ TOML (.toml)	Hugo 使用较多的配置格式	⚠️ 不适合正文	✅ 强结构
✅ JS / TS (.js/.ts)	动态生成页面或数据	⚠️ 复杂但灵活	✅ 强结构
✅ CSV (.csv)	表格类数据导入	⚠️ 不适合正文	✅ 强结构
✅ AsciiDoc (.adoc)	技术文档格式（Red Hat 使用）	✅ 适合技术写作	✅ 支持结构
✅ reStructuredText (.rst)	Python 社区使用（Sphinx）	✅ 适合技术文档	✅ 支持结构

---

📤 常见的输出格式（Output）

输出类型	描述	应用场景
✅ HTML 文件	默认输出，浏览器可直接打开	所有网站
✅ RSS/Atom Feed	博客订阅源	内容分发
✅ JSON 文件	用于 API 或搜索索引	支持前端搜索功能
✅ XML 文件	用于 sitemap.xml 或 SEO	提交给搜索引擎
✅ PDF / ePub / MOBI	电子书导出	文档下载、离线阅读
✅ CDN 友好资源（CSS/JS/图片）	自动优化压缩	性能优化
✅ 静态 API 接口（如 _posts.json）	前端调用本地数据	构建无后端应用

---

🔁 输入 → 输出 的几种常见组合（举例）

1. Markdown + YAML Front Matter → HTML 页面

---
title: 快速入门
date: 2025-04-05
---

# 快速入门指南

这是正文内容...

➡️ 自动生成：

<h1>快速入门指南</h1>
<p>这是正文内容...</p>

✅ 工具：VitePress、Hugo、Eleventy、Jekyll

---

2. YAML / JSON 数据 → HTML 列表页

比如 products.json：

[
  {"name": "手机", "price": 3999},
  {"name": "平板", "price": 2999}
]

➡️ 自动生成商品列表页面：

<ul>
  <li>手机 - ￥3999</li>
  <li>平板 - ￥2999</li>
</ul>

✅ 工具：Eleventy、Gatsby、Hugo

---

3. Markdown → RSS Feed

自动从 Markdown 博文中提取标题、摘要、链接等信息，生成标准 RSS 订阅源。

✅ 工具：Eleventy、Gatsby、Jekyll

---

4. Markdown → JSON（供前端搜索使用）

构建时生成一个包含所有文章标题、路径、内容片段的 JSON 文件，供前端实现本地搜索。

✅ 工具：Eleventy、VuePress、Docusaurus

---

5. Markdown + LaTeX → PDF 电子书

使用 Pandoc、MkDocs + Material 主题或其他插件，将 Markdown 文档编译为 PDF 或 ePub。

✅ 工具：MkDocs with PDF Export, Docusaurus + Plugins, Pandoc

---

6. Markdown → JSON API（模拟后端接口）

构建时生成一个 _api/posts.json，前端通过 fetch 获取文章数据，不依赖真实后端。

✅ 工具：Eleventy、Next.js（静态导出）

---

7. CSV 表格 → HTML 表格页

将 CSV 数据导入并渲染成网页表格。

✅ 工具：Eleventy、Gatsby、Custom Scripts

---

8. reStructuredText → HTML（Python 文档）

用于构建 Sphinx 文档系统，支持 .rst 文件转 HTML。

✅ 工具：Sphinx

---

📊 对比表总结

输入格式	输出格式	典型用途	示例工具
Markdown	HTML	博客、文档	VitePress、Hugo
YAML/JSON	HTML	导航栏、菜单、产品列表	Eleventy、Gatsby
Markdown	RSS/XML	博客订阅	Jekyll、Eleventy
Markdown	PDF/ePub	电子书	MkDocs、Pandoc
CSV	HTML Table	表格展示	Eleventy、Custom Script
Markdown	JSON	前端搜索数据	Gatsby、Eleventy
reStructuredText	HTML	Python 文档	Sphinx

---

🧩 总结一句话：

静态站点生成器不仅可以将 Markdown 转成 HTML，还可以将 YAML、JSON、CSV、reStructuredText、AsciiDoc 等格式转换为 HTML、RSS、PDF、JSON API、XML 等各种格式。它是现代内容工程中的“多面手”。