静态站生成器对比：Hugo、Jekyll、Astro、11ty
手写 HTML 太累，上框架又太重。静态站生成器处在中间，但对个人笔记站来说，还有第四个选项：不用生成器。
一、四个主流选项
| 生成器 | 语言 | 构建速度 | 特点 |
|---|---|---|---|
| Hugo | Go | 极快（千篇秒级） | 单二进制，零依赖 |
| Jekyll | Ruby | 慢 | GitHub Pages 原生支持，最老牌 |
| Astro | JS/TS | 中 | 岛屿架构，默认零 JS |
| 11ty | JS | 快 | 灵活，模板引擎任选 |
还有 VitePress（文档站首选）、Gatsby（重）、Hexo（Node 老牌，中文生态好）。
二、Hugo：速度的标杆
# 安装（单文件，无依赖）
sudo apt install -y hugo
hugo new site baize
cd baize
hugo new posts/first.md
hugo server -D # 本地预览
hugo # 生成到 public/优点：
- 构建极快：一千篇文章也就一两秒；
- 一个二进制文件，不需要 npm install；
- 内置分类、标签、RSS、sitemap、多语言；
- 主题生态丰富。
缺点：
- Go template 语法比较绕；
- 主题定制需要理解它的模板覆盖机制。
time hugo # 100 篇：0.3s 左右三、Jekyll：GitHub Pages 原生
gem install jekyll bundler
jekyll new baize
cd baize && bundle exec jekyll serve最大优势：推到 GitHub Pages 什么都不用配，直接就能构建。
缺点明显：
- Ruby 环境配置麻烦（版本、bundle）；
- 构建慢（几百篇要几十秒到几分钟）；
- 插件在 GitHub Pages 上受限（只能用白名单）。
四、Astro：现代前端体验
npm create astro@latest
cd baize && npm run dev
npm run build特点：
- 默认零客户端 JS（这点很棒）；
- 可以用 React/Vue/Svelte 组件；
.astro模板语法接近 HTML + JSX；- Content Collections 管理 Markdown，类型安全。
缺点：需要 Node 环境和 node_modules（依赖管理的心智负担）。
五、11ty：灵活简单
npm install -g @11ty/eleventy
eleventy --serve- 配置极简，甚至可以零配置；
- 模板引擎任选（Liquid、Nunjucks、Markdown）；
- 输出的就是纯粹 HTML；
- 构建快。
适合从 Jekyll 迁移，或者想要「简单但比手写强」的场景。
六、对比表
| 维度 | Hugo | Jekyll | Astro | 11ty |
|---|---|---|---|---|
| 安装难度 | 低 | 中（Ruby） | 中（Node） | 中（Node） |
| 构建速度 | 极快 | 慢 | 中 | 快 |
| 学习成本 | 中 | 低 | 中 | 低 |
| 主题生态 | 丰富 | 丰富 | 增长中 | 一般 |
| GitHub Pages | 需 Actions | 原生 | 需 Actions | 需 Actions |
| 适合 | 内容多、追求快 | 想在 GH Pages 躺平 | 要组件化 | 想简单灵活 |
七、怎么选
| 你的情况 | 建议 |
|---|---|
| 文章会几百篇以上 | Hugo |
| 就想推到 GitHub Pages 不折腾 | Jekyll 或 Hugo + Actions |
| 想用 React/Vue 组件 | Astro |
| 看重简单可控 | 11ty |
| 写文档而不是博客 | VitePress |
| 文章很少、想要完全可控 | 不用生成器 |
八、不用生成器也是一种选择
本站就是手写 HTML + CSS + JS，文章数据放在 JS 数组里：
baize-network/
├── index.html 3.7KB
├── assets/
│ ├── css/style.css 27KB
│ └── js/
│ ├── markdown.js 12KB # 自写解析 + 高亮
│ ├── posts.js 500KB # 100 篇文章数据
│ └── app.js 27KB # 路由 + 渲染
├── feed.xml
├── sitemap.xml
└── robots.txt这么做的前提和代价：
| 项 | 说明 |
|---|---|
| ✅ 零构建 | 改完刷新就能看，不需要 build |
| ✅ 可离线 | 双击 index.html 就能读 |
| ✅ 完全可控 | 想改哪改哪，不用跟框架搏斗 |
| ❌ SEO 弱 | 内容由 JS 渲染，爬虫抓取差 |
| ❌ 首屏依赖 JS | 禁用了 JS 就白屏 |
| ❌ 体积集中 | 文章多时 posts.js 会很大（本站 500KB） |
| ❌ 没有生态 | 搜索、分页、i18n 都要自己写 |
适用判断：
- 个人笔记、不追求搜索流量 → 可以不用生成器；
- 希望被搜索引擎收录 → 必须用生成器（预渲染 HTML）；
- 或者折中：写完用脚本生成一份静态 HTML 副本给爬虫（预渲染）。
九、如果要迁移到生成器
本站的数据结构迁移到 Hugo 很容易，因为每篇已经是独立字段：
# 用脚本把 posts.js 转成 Hugo 的 Markdown + front matter
node -e "
global.window = {};
require('./assets/js/posts.js');
const fs = require('fs');
window.POSTS.forEach(p => {
const fm = `---
title: "${p.title}"
date: ${p.date}
categories: ["${p.category}"]
tags: [${p.tags.map(t=>`"${t}"`).join(',')}]
summary: "${p.summary}"
---
`;
fs.writeFileSync(`content/posts/${p.id}.md`, fm + p.content);
});
"这也是「数据格式保持简单」的好处：将来换方案不困难。
十、我的建议
第一次建站，别纠结太久。我的推荐顺序：
1. 内容少、想最快上线 → 直接手写（像本站这样）
2. 想认真写下去、要 SEO → Hugo（构建快，一劳永逸）
3. 想躺平在 GitHub Pages → Jekyll
4. 想用现代前端 → Astro工具不重要，写下去才重要。 任何一个都能做出好站点。
生成器的本质是「把 Markdown 变成 HTML」。理解这一点，手写和用工具只是同一件事的两种实现方式。