写作与部署：这个博客是怎么跑起来的

一、目录结构

整个站点只有这几类文件，没有隐藏的构建产物：

blog/
├── index.html            首页（文章列表 + 筛选 + 搜索）
├── archive.html          归档页（按年份时间线）
├── about.html            关于页
├── guide.html            本页
├── 404.html              404 页面
├── favicon.svg           站点图标
├── robots.txt            搜索引擎抓取声明
├── CNAME                 自定义域名（部署时用）
├── posts/                每篇文章一个 HTML 文件
├── assets/
│   ├── css/style.css     全部样式（设计令牌 + 组件）
│   ├── js/app.js         全部交互逻辑
│   └── data/posts.js     文章索引（唯一的内容清单）
└── tools/build-index.mjs 扫描 posts/ 自动生成索引

二、本地预览

方式 A：直接双击（最省事）

双击 index.html 就能看。列表、筛选、搜索、深色模式全部可用，因为索引是从 posts.js 同步加载的。

方式 B：起一个本地服务器（推荐）

路径干净，行为更接近线上环境。在 blog 目录下执行任意一条：

# Python 3
python -m http.server 4321

# Node.js
npx serve -l 4321

# PHP
php -S localhost:4321

然后浏览器打开 http://localhost:4321。

三、新增一篇文章

三步，五分钟：

1. 复制 posts/ 里任意一个文件，改名成新的 slug（例如 my-new-post.html）。
2. 替换里面的标题、日期、分类、正文。正文直接写在 <article class="post-body"> 里，用常规的 h2/h3/p/ul/pre/table 标签；目录和阅读进度会自动生成。
3. 在 assets/data/posts.js 里加一条记录：

{
  slug: 'my-new-post',            // 必须和文件名一致（不含 .html）
  title: '文章标题',
  date: '2026-09-17',             // YYYY-MM-DD
  category: 'tech',               // tech | industry | reading | pixel
  tags: ['标签一', '标签二'],
  excerpt: '一两句话的摘要，会显示在首页卡片上。',
  minutes: 8,                     // 预估阅读分钟
  featured: false                 // true 会让卡片高亮（置顶感）
}

四、正文里能直接用的小组件

样式都写好了，复制即用。

提示块

<div class="note">普通提示</div>
<div class="note tip">建议 / 经验</div>
<div class="note warn">注意事项</div>

表格

<table>
  <thead><tr><th>列一</th><th>列二</th></tr></thead>
  <tbody><tr><td>值</td><td>值</td></tr></tbody>
</table>

代码块（自带复制按钮）

<pre><code>你的代码</code></pre>

五、部署到 Cloudflare Pages

目标是 https://lslongabc.dpdns.org 能直接访问。整条链路免费。

补上最后那条 CNAME

Cloudflare 控制台 → 选中 lslongabc.dpdns.org → DNS → 添加记录：

保存后 1～5 分钟证书签发完成，https://lslongabc.dpdns.org 即可访问。

方式 A：wrangler 直接上传（最快，不需要 GitHub）

三条命令上线。适合只想尽快把域名跑通的情况，本机需要有 Node.js。

cd blog

# 1) 登录 Cloudflare，会弹出浏览器授权
npx wrangler login

# 2) 首次部署，同时创建名为 blog 的 Pages 项目
npx wrangler pages deploy . --project-name=blog

执行完会输出一个 https://blog.pages.dev 之类的临时域名，先打开确认页面正常。

以后每次更新只需重复第二条：

npx wrangler pages deploy . --project-name=blog

方式 B：GitHub 自动部署（push 即上线）

适合长期写、想留版本历史的情况。配置一次，之后每次 git push 自动发布。

第 1 步：代码推到 GitHub

cd blog
git init
git add .
git commit -m "init blog"
git branch -M main
git remote add origin https://github.com/<你的用户名>/<仓库名>.git
git push -u origin main

第 2 步：Cloudflare Pages 建项目

• 登录 Cloudflare 控制台 → Workers & Pages → Create → Pages → Connect to Git。
• 选中刚才的仓库。
• 构建配置：Framework preset 选 None，Build command 留空，Build output directory 填 /（因为站点根目录就是仓库根目录）。
• 保存并部署，几十秒后会得到一个 xxx.pages.dev 的临时域名，先访问确认没问题。

第 3 步（已完成）：域名托管到 Cloudflare

这一步本次已经做完，写在这里仅供参考。万一哪天 NS 被改回去导致失效，按下面重做：

• Cloudflare 控制台 → 添加站点 → 输入 lslongabc.dpdns.org → 选 Free 计划。
• Cloudflare 会分配两个专属 NS 地址。
• 回到 dpdns.org（DigitalPlat）管理面板，把这两个 NS 填到该域名的 Name Server 设置里，保存。
• 等 3～10 分钟，Cloudflare 里域名状态变为活动即成功。

第 4 步：绑定自定义域名

• 回到 Pages 项目 → Custom domains → Set up a custom domain。
• 输入 lslongabc.dpdns.org，按提示确认。
• 因为域名已托管在同一个 Cloudflare 账号下，CNAME 记录会自动创建，证书也会自动签发。
• 等 1～5 分钟，https 访问即生效。

六、日常更新流程

写完一篇文章后，先重建索引，再发布：

node tools/build-index.mjs

然后按你选的方式发布。

方式 A（wrangler）：

npx wrangler pages deploy . --project-name=blog

方式 B（GitHub）：

git add .
git commit -m "post: 新文章标题"
git push

方式 B 下 Cloudflare Pages 会自动检测到 push 并重新部署，通常 30 秒内生效，不需要手动上传任何文件。

七、还可以加什么