如何用原生三件套搭一个静态博客

这个博客只用了 HTML、CSS、JavaScript 三样东西，没有打包工具， 也没有任何依赖。这个看起来"简陋"的决定，其实是刻意的：内容才是重点。

目录结构

博客/
├── index.html              首页：文章列表
├── about.html              「关于」页
├── css/
│   └── style.css           全站样式（含深色模式）
├── js/
│   └── main.js             全站脚本（年份 / 主题 / 菜单）
├── posts/
│   ├── hello-world.html    文章详情页模板
│   └── build-a-static-site.html
└── assets/
    └── images/             图片资源

新增一篇文章

1. 把 posts/hello-world.html 复制一份，改个文件名；
2. 修改标题、meta 描述、日期和正文；
3. 打开 index.html，在 post-list 里按时间顺序插入一张卡片。

回头我会把文章的标题、日期、摘要单独抽成一个 posts.json， 让首页用 JavaScript 自动渲染列表 —— 那样新增文章就只需要改一个文件。

本地预览

不需要服务器，直接双击 index.html 就能看。想要更贴近线上，可以起一个本地服务器：

python3 -m http.server 8000
# 然后浏览器打开 http://localhost:8000

部署

纯静态站点可以直接放到 GitHub Pages、Vercel、Netlify 或者任意支持静态文件的服务器上， 整个目录打包上传即可。