这个网站本身就是一个例子：没有框架、没有构建步骤、没有数据库，只有 HTML、CSS、JavaScript 和一堆静态文件。本文记录我选择这个方案的理由，以及从目录结构到部署上线的完整步骤。
为什么选纯静态
对个人技术分享站来说，纯静态方案有三个明显优势：
- 备案友好。内容只读，没有注册、评论、上传等交互，审核与运维都简单。
- 部署简单。任意静态托管或一台 Nginx 就能跑，不依赖 Node 服务常驻。
- 维护成本低。改一个文件、推一次代码就完成发布。
代价也很明确：没有自动索引、评论等动态能力，文章列表和订阅源需要手动维护。对个人站来说，这个代价可以接受。
目录结构
目录按「页面」与「资源」分开，文章统一放进 posts/，用图号命名方便归档：
tech-blog/
├── index.html # 首页
├── archive.html # 文章归档
├── about.html # 关于
├── posts/ # 单篇文章
│ ├── drg-001-build-this-site.html
│ ├── drg-002-css-grid-container-queries.html
│ └── ...
├── assets/
│ ├── css/style.css
│ ├── js/main.js
│ └── fonts/
├── favicon.svg
├── feed.xml # Atom 订阅
└── sitemap.xml规则只有两条：每个页面是一个独立 HTML 文件；公共的头尾手动保持一致。文章多了以后，再考虑引入模板工具也不迟。
本地预览
不需要安装任何依赖，用 Python 或 Node 自带的能力起一个静态服务即可：
# Python 3
python3 -m http.server 8080
# 或 Node（需要 npx）
npx serve .打开 http://localhost:8080 即可预览。没有热更新，但这不是缺点：文件就是最终产物，改完刷新所见即所得。
部署选项
| 方案 | 适合 | 注意 |
|---|---|---|
| 云服务器 + Nginx | 已备案域名、国内访问 | 需自配 HTTPS 与证书续期 |
| 对象存储静态托管 | 免运维、按量付费 | 需绑定已备案域名 |
| GitHub Pages / Vercel | 学习与演示 | 国内直连不稳定，正式备案站慎选 |
结论：国内备案站优先选「云服务器 + Nginx」或「国内对象存储」。
备案要点
- 域名先完成实名认证，再提交 ICP 备案；服务器选择支持备案的国内云厂商。
- 备案期间网站应能正常访问且内容真实，不要放注册、评论等未获批的交互功能。
- 页脚必须展示备案号并链接到 beian.miit.gov.cn；公安备案通过后，同样展示公安备案号并链接到 beian.mps.gov.cn。
- 备案号以工信部系统查询结果为准，格式类似「京ICP备XXXXXXXX号-1」。
备案政策以工信部与当地通信管理局的现行要求为准。提交前请以审核时的要求为准，本文不构成备案承诺。
上线检查清单
- 所有内部链接可访问，404 页生效
- HTTPS 已配置并强制跳转
- 页脚备案号真实且链接正确
- feed.xml 与 sitemap.xml 内容和文章一致
- 手机与桌面宽度下均无横向滚动
- 浅色与深色主题下正文对比度正常