零依赖静态博客：这个站是怎么搭起来的

这个博客没有用 WordPress，也没有用 Hexo、Hugo、Next.js。它就是一个文件夹，里面放着手写的 HTML。你现在看到的这一页，就是一个普通文本文件。

目录结构

my-blog/
├── index.html          首页：简介 + 文章列表
├── about.html          关于页
├── 404.html            找不到页面时显示
├── posts/
│   ├── hello-world.html
│   ├── static-blog.html
│   └── reading-2026.html
└── assets/
    ├── style.css       全站样式（一个文件）
    ├── app.js          深浅色切换 + 阅读进度条
    └── favicon.svg     标签页小图标

没有 package.json，没有 node_modules，没有编译产物。双击 index.html 就能在本地看。

为什么不用框架

理由按重要性排序：

不会烂。框架三年一换，HTML 和 CSS 三十年没换过。一个纯静态站放五年，打开还是这个样子；一个 Next.js 项目放五年，npm install 可能已经跑不起来了。
发布成本为零。上传文件就是发布，不需要在服务器上装运行时、跑构建。
托管免费。因为全是静态文件，Cloudflare Pages、GitHub Pages 都能白嫖，还带全球 CDN 和自动 HTTPS。

代价是：文章多了以后，首页列表要手动维护。一百篇以内，这点手工活完全可以接受；真到了一百篇以上，再考虑引入一个静态站点生成器也不迟。

样式是怎么组织的

所有颜色都抽成了 CSS 变量，改上面十几行就能换掉整站配色，不用在几百条规则里翻找：

:root {
  --bg: #fbf9f5;
  --text: #1d1b18;
  --accent: #b0532c;
}

[data-theme="dark"] {
  --bg: #161513;
  --text: #e9e4da;
  --accent: #e08d61;
}

深色模式有两套触发方式：用户点右上角的按钮会写进 localStorage；没点过的话就跟随系统的 prefers-color-scheme。为了避免深色模式下加载时闪一下白屏，那段读取主题的脚本被放在 <link rel="stylesheet"> 之前。

发布到公网

以 Cloudflare Pages 为例，全程免费：

把 my-blog 文件夹推到一个 GitHub 仓库。
Cloudflare 控制台 → Workers & Pages → Create → Pages → 连接这个仓库。
Build command 留空，Build output directory 填 /。
点 Save and Deploy，一分钟后就有一个 xxx.pages.dev 的网址。

之后每次 git push，Cloudflare 会自动重新部署。想换成自己的域名，在 Pages 项目里加 Custom domain，再按提示改一下 DNS 就完成了。

先让它上线，再让它变好。一个丑但在线的站，比一个漂亮但躺在本地硬盘里的站有价值。