原先这个站跑在 WordPress 上。它没什么毛病——直到你意识到,一个只写文章的个人博客,需要 PHP、MySQL、一整套插件生态,以及每周一次的漏洞通告。于是就有了这次迁移。
为什么是静态
静态站点生成器把「服务器」这一层整个拿掉了。构建产物是一堆 HTML,丢到 CDN 上就完事:
- 没有 PHP,没有数据库,没有后台登录入口
- 运行时内存占用为零,因为根本没有常驻进程
- 攻击面只剩 CDN 本身
代价是动态能力要外挂:评论用 Giscus 接 GitHub Discussions,搜索用 Pagefind 在构建期生成索引。
换句话说,我用「构建时的一次性计算」换掉了「运行时的永久负担」。 对个人博客这种更新频率,这笔买卖划算得离谱。
像素风不是加个字体就完事
第一版我天真地只换了字体,结果整站糊成一片。像素字体有一条硬性约束:字号必须落在设计尺寸的整数倍上。
缝合像素字体 12px 的设计尺寸就是 12px,那么可用字号只有 12、24、36、48。你写个 13px 或者 18px,浏览器会重采样,字形边缘立刻变成灰色毛边。
/* 这一条不做,前面所有努力都白费 */
body {
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;
font-variant-ligatures: none;
}
还有三条铁律,破一条就出戏:
- 零圆角 ——
border-radius永远是 0 - 零模糊 —— 阴影只能硬偏移,
blur必须是 0 - 零渐变 —— 颜色一律纯色
中文像素字体怎么选
这是最麻烦的一环。英文像素字体满地都是,中文的却不多,因为汉字字库太大——完整的 CJK 像素字体动辄几 MB,直接自托管会让首屏爆炸。
| 方案 | 字符覆盖 | 体积 | 许可 |
|---|---|---|---|
| 缝合像素字体 Fusion Pixel | 泛拉丁 + 泛中日韩 | 12px 等宽切片共 1.2MB | MIT AND OFL-1.1 |
| Zpix 最像素 | 英文 + 简繁中 + 日文 | 完整字体约 2MB+ | 未标注 |
| ZLabs-Pixel-12px | 简体中文 | 较小 | MIT |
答案是按 unicode-range 切片。缝合像素字体的 12px 等宽版被切成 79 个 woff2,浏览器只会下载当前页面实际用到的那几片——通常 3 到 6 片,加起来 100KB 出头。
值得吗
如果你的博客只是写文章,静态方案在安全性和成本上是降维打击。像素风则是纯粹的审美选择——它不适合所有人,但如果你喜欢,就没有替代品。
下一步打算把评论接上,再把 RSS 的输出格式调一调。