项目地址

项目介绍

一个简单的内容管理系统，可以将多个网站的博客内容集中管理，支持 API 接口读取，支持部署在 Cloudflare 。

为什么要做这个？我之前打算用 React Router 做一个 SSR 的网站，想部署在 Cloudflare Worker 上，但是因为 Edge 环境的诸多限制，导致开发一个支持 markdown 写作的博客功能很困难，比如因为 Edge 环境不支持 fs 等库，导致无法动态读取博客列表。一个替代的方案是部署一个开源的 CMS 系统来管理内容，通过 API 读取，但是开源 CMS 系统都太重了，学习成本很高，维护成本也高。所以就想自己做一个简单的 CMS 系统，仅支持有限的功能。

该 CMS 有两个模块：CLI 前端和后端服务，支持以下功能：

支持用 mdx 在本地写作，支持元数据及内容格式校验，支持通过 CLI 上传
支持通过 CLI 上传本地图片到 Cloudflare R2
支持博客文章创建、列表查询、详情查询接口
支持博客多语言
支持多个网站及每个网站单独鉴权
支持博客列表分页

经过测试，项目部署成功后可正常使用。

如何使用

在本地创建 content 目录，目录下每个子目录是一个网站，每个网站下的子目录是多语言

如上图所示，first-blog.mdx 是一篇博客内容，可参照样本进行编写：

---
title: 测试博客
excerpt: 这是一篇测试博客
date: "2025-09-16"
status: published
slug: test-blog
---

这是一篇测试博客，使用 mdx 格式编写。

## 普通正文

这是测试内容

## 图片

![claude code](../_imgs/first-blog-anthropic-claude-code.webp)

写完之后，运行 pnpm run blogUpload test/zh-CN/first-blog.mdx 命令进行上传，如果有本地图片，会提醒先上传图片。

上传之后，在网站代码中就可以通过 API 进行请求了

// test 为网站名称
const response = await fetch(`${CMS_API_URL}/sites/test/articles`, {
    headers: {
      Authorization: `Bearer ${CMP_API_KEY}`,
      "Content-Type": "application/json",
    },
});

// test-blog 为博客 slug
const response = await fetch(
    `${CMS_API_URL}/sites/test/articles/zh-CN/test-blog`,
    {
      headers: {
        Authorization: `Bearer ${CMP_API_KEY}`,
        "Content-Type": "application/json",
      },
    }
  );

从此告别复杂的文档系统配置和 CMS 服务，十分清爽。

因为一般的全栈框架会支持部分页面 SSG 生成，可以把博客内容生成静态页面，这样 Simple CMS 服务不会接受大量请求，不用担心性能问题，也不用考虑费用问题。

AI 编程感受

这个项目是我第一个完全放手让 AI 来写代码的项目，一开始方法不对重写了一遍，后面实践 Spec-Driven Developement 之后，发现越来越得心应手。这个版本我是通过 7 个 spec 来实现的，除了前两个 spec 我操心比较多，后面几个 spec 基本上都是一遍就做得差不多了，都是小修小改。前两个 spec 操心较多是因为我给 AI 留的线索比较少 (Claude.md)，也没有给 AI 足够的约束。

现在回过头来看，如果让我重新做这样的系统，并给予充分的 Token ，可能 2-3 天就可以做到当前这种程度。这还是在我没有并行多个 Claude Code 的情况下，可以看出 AI 的恐怖效率（在油管上看到 Anthropic 内部有人同时并行四个 Claude Code 写代码）。

目前我只尝试让 AI 写服务端和 CLI 代码，还没有尝试用 AI 来写前端，Claude Code 也还有许多特性没有尝试，比如并行多个 Claude Code ，Hook ，Subagents 等，后续打算再多做几个这样的系列，并分享出来。