index

受二叉树树启发,用 Pages CMS + Astro Chiri + Cloudflare Pages 搭建极简博客

· 13min

二叉树树 干净、克制的设计打动之后,我决定也搭建一个属于自己的极简博客。
最终选型落在了 Astro Chiri + Pages CMS + Cloudflare Pages,它们共同构成了一条「内容管理 → 静态生成 → 全球加速」的完整链路,而且完全零成本。

整个流程的核心其实只有两步:先在 GitHub 上生成博客仓库,再用 Pages CMS 连接它进行可视化管理。下面我会把每一步都拆开,跟着做就能复现。

第一步:在 GitHub 上创建 Astro + Chiri 仓库

不需要本地安装任何东西,直接通过 GitHub 模板一键生成。

  1. 打开 Astro Chiri 的 GitHub 仓库
  2. 点击绿色的 「Use this template」 按钮,选择 「Create a new repository」
  3. 填写你的仓库名称(例如 my-blog),建议勾选 「Include all branches」(这样能保留主题可能的更新分支)
  4. 点击「Create repository」——几秒钟后,一个完整的 Astro + Chiri 博客仓库就准备好了

此时你已经在 GitHub 上拥有了一份可以直接编辑的博客源代码,接下来的所有配置都可以直接在网页端或本地完成。

第二步:连接 Pages CMS,获得可视化编辑后台

Pages CMS 是一个直接操作 Git 仓库文件的 Headless CMS,不需要自建数据库。
我们要做的,就是告诉它如何识别博客文章。

2.1 在仓库中添加配置文件

在刚才创建的 GitHub 仓库中,点击「Add file」→「Create new file」,文件名输入 pages-cms.yaml,内容如下:

media:
  input: public/uploads
  output: /uploads
collections:
  - name: posts
    label: 博客文章
    folder: src/content/posts
    create: true
    fields:
      - { name: title, label: 标题, type: string, required: true }
      - { name: pubDate, label: 发布日期, type: date, required: true }
      - { name: body, label: 正文, type: rich-text, required: true }

提交后,Pages CMS 就能识别你的文章目录和字段了。

2.2 在 Pages CMS 中选择仓库

  1. 访问 pagescms.org 并用 GitHub 登录
  2. 授权后,你会看到自己的仓库列表,选择刚刚创建的 my-blog(或你取的名字)
  3. Pages CMS 会自动读取 pages-cms.yaml,然后直接进入可视化的文章列表

现在,你可以在浏览器里创建、编辑文章,所有改动都会自动生成一个 Git commit——即“保存即提交”。
而这个后台的本质,仍然只是在对 src/content/posts/ 下的 MDX 文件进行操作,没有任何黑箱。

第三步:本地个性化(可选)

如果想修改站点标题、描述等,可以把仓库克隆到本地:

git clone git@github.com:你的用户名/my-blog.git
cd my-blog
pnpm install

编辑 src/config.ts

site: {
  website: 'https://你的域名.pages.dev',  // 后续 Cloudflare 分配
  title: '你的博客名',
  author: '你的名字',
  description: '又一个极简博客',
  language: 'zh-CN'
}

改完后推送回 GitHub,Pages CMS 中的内容会自动保持一致。

第四步:使用嵌入指令丰富内容

Chiri 主题内置了一套非常实用的嵌入指令,无需引入额外组件就能在文章里插入卡片化的外部内容。这些指令在 MDX 中直接使用,让文章瞬间活起来。

下面是全部可用的嵌入指令及示例:

通用链接卡片

Spotify 音乐

YouTube 视频

B 站视频

GitHub 仓库卡片

the3ashastro-chiri

--

-- -- --

X(Twitter)帖子

NeoDB 条目(书籍 / 电影 / 游戏 / 音乐)

提示:这些指令中的链接地址请替换为你自己的内容,NeoDB 目前主要为中文社区服务,其他平台链接在构建时会被自动抓取元数据并生成美观的卡片。

第五步:部署到 Cloudflare Pages

  1. 登录 Cloudflare Pages,点击「连接到 Git」
  2. 选择你的 GitHub 仓库 my-blog
  3. 设置构建参数:
    • 构建命令pnpm build
    • 输出目录dist
  4. 点击「保存并部署」

几分钟后,你的博客就会获得一个 *.pages.dev 免费域名。之后每次推送代码(包括 Pages CMS 的自动提交),Cloudflare 都会自动重新部署,真正“写完即上线”。

你也可以在 Cloudflare Pages 的「自定义域」中绑定自己的域名,享受全球 CDN 和自动 SSL。

写在最后

从被 二叉树树 击中审美,到搭好整个博客,全程大部分操作都在浏览器里完成。
GitHub 负责版本控制,Pages CMS 负责内容管理,Cloudflare 负责分发,Astro + Chiri 负责优雅的呈现——每个环节都足够轻量,也足够可靠。

这套方案可能不是功能最丰富的,但一定是对个人创作者最友好、最从容的组合之一。
如果你也喜欢安静地写字,不妨从点击那个「Use this template」开始。

the3ashastro-chiri

--

-- -- --