为什么我把博客改成了纯手写静态页
发布 修订 分类 engineering
当前浏览器未执行 JavaScript，下面是本篇的 Markdown 原文，内容一字未改。
上一个版本的站点装了两套主题、四个统计脚本和一堆「性能优化插件」。移动端首屏 3.8 秒才能看到第一行字。我把它全部删掉了。
<!-- more -->
## 先量化，再动手
重写之前我记录了一周的访问数据：
| 指标 | 重写前 | 重写后 |
| --- | --- | --- |
| 首屏 HTML | 214 KB | 18 KB |
| 阻塞请求 | 9 个 | 1 个（CSS） |
| 第三方域名 | 6 个 | 0 个 |
| 移动端可交互 | 3.8 s | 0.6 s |
| 断网可用 | 否 | 是 |
真正吓到我的不是体积，而是**第三方域名的数量**——每一个都是潜在的失败点和隐私泄露点。
## 只留下三件套
最终结构简单到可以画在一张便签上：
```text
index.html 页面骨架，内容由 JS 渲染
assets/css/app.css?v=ef616b19 设计令牌 + 全部样式，单文件
assets/js/app.js?v=ef616b19 数据加载、渲染、搜索、主题
assets/js/md.js?v=ef616b19 Markdown 渲染器（含纯前端检索）
data/*.json 唯一内容真源
```
渲染逻辑只有一条链路：`fetch data/posts.json` → 渲染卡片 → 需要详情时读 `?slug=` 参数。因此任何一台静态服务器都能跑，`file://` 双击打开也能跑（数据同时内嵌在页面里做兜底）。
## 手写换来的三件事
1. **界面完全可控**。阅读进度环、目录高亮、模糊搜索的排序权重，都是几十行代码，不再受插件版本牵制。
2. **改样式不会连锁爆炸**。整套配色收敛成 40 个 CSS 变量，深色模式只是覆写变量，不需要第二份样式表。
3. **部署变成复制文件**。没有 `npm install`，没有构建缓存，推上去就是最终产物。
> [!TIP]
> 如果你也在考虑重写，先删再加：把所有插件关掉跑一周，看哪些是「没人发现但你以为很重要」的，那些就不用装回来了。
## 我放弃的东西
- **实时评论**：改成邮件与友链，交流变慢但更认真。
- **访客统计**：只保留服务器日志，页面里不埋任何脚本。
- **花哨的动画库**：CSS 自己写了 6 个关键帧动画，够用。
## 性能之外的收益
改完之后我最喜欢的其实是**离线可用**。飞机上、断网的地铁里，这个站点依然完整地站在那里，包括搜索。
> 复杂度是一种贷款：你借的时候很爽，还的时候连本带利。
下一步想做的，是把文章数据从 JSON 拆成带 front matter 的 `.md` 文件，让写作过程彻底脱离 JSON 转义。
