1. SSG到底是什么？
定义与核心要素
静态站点生成（SSG）是一类在构建阶段将内容与模板结合并输出为静态 HTML 的技术方案，核心在于将页面预渲染到磁盘上再通过 CDN 分发给最终用户。无需服务器端动态渲染，从而实现极致的加载速度和更低的运维成本。
在 SSG 的工作流中，内容源、模板、以及构建管线是三大要素。内容源可以是 Markdown、JSON、YAML，模板负责页面结构与样式，构建管线把两者整合并输出最终的静态页面。首次构建可能较耗时，但随后通常通过增量构建实现快速更新。
常见的实现形态包括 Markdown 转 HTML、模板驱动渲染、以及 数据驱动的页面生成。这些形态使得开发者可以在保持内容编辑便利的同时，获得稳定的静态输出。
// 简单的 Markdown 转 HTML 示例（Node.js+markdown-it）
const MarkdownIt = require('markdown-it');
const md = new MarkdownIt();
const markdown = '# 你好，SSG';
const html = md.render(markdown);
console.log(html);
// 使用模板引擎渲染 HTML（Nunjucks 示例）
const nunjucks = require('nunjucks');
nunjucks.configure('templates', { autoescape: true });
const data = { title: '示例页面', content: '这是通过模板生成的静态页面。' };
const output = nunjucks.render('page.njk', data);
console.log(output);
与其他渲染方式的对比
与服务器端渲染（SSR）相比，SSG 的产物是静态文件，更利于通过就近的缓存与 CDN 分发。客户端渲染（CSR）在交互性强的场景下也会参与，但核心渲染仍在构建阶段完成，因此总体性能更具确定性。
在实际选择时，静态生成适合内容更新频率相对可控的站点，如博客、文档、营销站点等；而需要实时个性化或强交互的场景，可以通过混合架构实现客户端或服务端的动态能力。
2. 静态站点生成的原理
构建流程
SSG 的核心原理是把内容源与模板在构建阶段合并，输出可由浏览器直接加载的静态 HTML 及资源。构建阶段渲染是一次性工作，上线后页面是完整的静态文件，用户请求时不再触发服务器端渲染。
典型的构建流程包括：获取内容源（如 Markdown、Headless CMS、REST/GraphQL API），应用模板以组织布局和样式，输出静态文件，最后将产物部署到 CDN 进行全球分发。
// Eleventy 构建管线示例（简化版）
module.exports = function(config) {config.addCollection("posts", c => c.getFilteredByGlob("posts/**/*.md"));return {dir: { input: ".", output: "_site" }};
};
数据源与模板的分离
在优秀的 SSG 工作流中，内容源的格式与模板渲染逻辑解耦，从而实现内容的独立编辑与样式的可控演进。模板语言与前端框架的结合，使得同一套模板可以渲染不同内容结构的页面。
这种分离也支持多语言、多站点的统一治理，内容团队可以专注于撰写与校验，而前端团队专注于导航、布局与体验优化。
3. 应用场景
内容驱动型站点
博客、技术文档、产品文档、公开资料等场景，内容更新频度较高且结构稳定，非常适合采用 SSG 的预渲染模式。通过静态输出，页面可以快速响应、并且便于缓存策略的制定。
利用 Markdown 转 HTML 的工作流，可以实现高效的作者体验；结合 搜索引擎优化（SEO）友好的输出，在搜索结果中的可见性显著提升。
企业级与开发者门户
营销站点、资源下载页、文档门户等场景，需要统一模板和一致导航，SSG 提供稳定的结构化输出，便于跨团队协作与风格统一。
对于多区域/多语言站点，本地化构建与版本化部署可以更高效实现，结合全球分布的 CDN，可以实现低延迟的全球访问。
4. 最佳实践
性能与规模化
在规模化站点中，增量构建、缓存策略、图片优化与资源压缩（HTML/CSS/JS）是核心。通过精简资源、并行构建和资源合并，上线时间和资源占用都会显著降低。
同时应保持内容源与表现层的清晰分离，让内容编辑和前端设计可以独立进展，避免冲突，提升协作效率。
// package.json 构建与部署示例（示意）
{"scripts": {"build": "eleventy","start": "serve _site -l 5000","deploy": "aws s3 sync _site s3://my-bucket --delete"}
}
开发与运维工作流
在本地完成端到端的构建回路，并结合持续集成/持续部署（CI/CD），自动化测试与预览环境能快速发现回退问题。将构建产物与部署脚本绑定，确保每次上线可追溯。
对于需要动态能力的站点，可采用 客户端渲染与服务端代理混合，如异步加载数据、集成搜索服务、实现评论系统等，以保持静态输出的性能优势，同时满足交互需求。
