零依赖静态站：三个文件撑起一个博客

博客最常见的失败方式不是没人看，是半年后你自己跑不起来它了。Node 版本变了、主题作者弃坑了、插件冲突了，于是你不想再打开它。

所以这套方案的前提只有一个：任何浏览器都能直接打开，不需要安装任何东西。

目录结构

blog/
├── index.html          # 首页：hero + 搜索 + 文章列表
├── archive.html        # 归档：按年份平铺
├── about.html          # 关于
├── posts/
│   ├── android-ai-image-studio.html
│   ├── hello-world.html
│   ├── text-recognition-clicker.html
│   └── build-with-zero-deps.html
└── assets/
    ├── style.css       # 全部样式，明暗双主题
    └── main.js         # 主题切换 + 进度条 + 回到顶部 + 搜索

没有 package.json，没有 node_modules，没有构建产物。改完保存，刷新就生效。

三处关键实现

1. 主题色用 CSS 变量

所有颜色只在 :root 定义一次，深色模式只覆盖变量，不重写规则：

:root {
  --paper: #faf7f0;
  --ink:   #1d1b18;
  --accent:#a8442c;
}
html[data-theme="dark"] {
  --paper: #131312;
  --ink:   #ece7dc;
  --accent:#e39275;
}

切换时只改 <html data-theme> 一个属性，全站瞬间换肤。

2. 排版宽度控制在 70 个字符以内

正文容器 max-width: 780px，中文一行约 35–40 字。超过这个宽度，眼睛回行会丢位置。这不是审美问题，是生理问题。

3. 字体分两套

标题用衬线（宋体系），有分量、有停顿感；
正文用系统无衬线，小字号下更清楚；
代码用等宽，数字用 font-variant-numeric: tabular-nums 对齐。

部署：三条路，都免费

方式	操作	适合
Cloudflare Pages	连 Git 仓库，构建命令留空，输出目录填 `/`	要自定义域名 + 全球加速
GitHub Pages	推到仓库，Settings → Pages 选分支根目录	最省事，够用
Vercel	导入仓库，框架选 Other	以后想加服务端函数

三个都支持绑定自己的域名并自动签发 HTTPS 证书。买域名的钱一年几十块，是这件事里唯一的花费。

加一篇新文章的流程

复制 posts/hello-world.html，改名，比如 posts/my-note.html。
改 <title>、<h1>、<time>、正文。
在 index.html 里复制一张 .card，改链接和摘要。
在 archive.html 里加一行。

熟练之后一篇 3 分钟。嫌烦的话，写个十几行的脚本自动生成卡片，但先别急——等你写到第 20 篇再说。

工具的价值在于让你忘记它。一个需要维护的博客，最终会变成一份需要维护的负担。