CMS 技术方案调研

技术方案总览

要实现在线编辑，通常有三种主要的架构思路：

1. Git-based CMS (推荐)：编辑界面直接操作 Git 仓库。
2. Headless CMS (传统云端)：内容存储在第三方云平台，通过 API 调用。
3. 自建数据库 + 管理后台：完全自主控制存储和编辑逻辑。

---

文章存储技术选型深度分析

1. Git-based CMS (最契合当前项目)

这类方案通过在浏览器中提供一个 UI，用户编辑后，由该工具代表用户向 GitHub 发起 Commit。

• 代表工具：TinaCMS (推荐)、Keystatic、Decap CMS (原 Netlify CMS)。
• 存储位置：仍然是项目中的 .md 或 .mdx 文件。
• 工作流：
  • 用户登录后台 (/admin)。
  • 使用富文本或 Markdown 编辑器修改内容。
  • 点击保存，工具通过 GitHub API 直接将修改提交到仓库。
  • GitHub Actions 监听到推送，触发自动构建部署。
• 优点：
  • 零迁移成本：无需改变现有的文件结构，继续享受 Git 的版本控制。
  • 数据所有权：内容依然在你的代码仓库里，不依赖外部数据库。
  • 静态优势：依然保持 SSG（静态站点生成）的高性能。
• 缺点：
  • 构建延迟：保存后需要几分钟等待 GitHub Actions 完成构建才能看到线上变化。

2. Headless CMS (云端存储)

将文章内容从代码仓库中剥离，存放到专门的内容管理平台上。

• 代表工具：Contentful, Strapi, Sanity, Ghost。
• 存储位置：服务商提供的云端数据库。
• 工作流：
  • 在 CMS 平台编辑内容。
  • Astro 在构建时（或 SSR 模式下请求时）通过 API 获取数据并渲染。
• 优点：
  • 编辑体验极佳：专业的编辑器，支持多人协作、版本管理、多媒体库。
  • 灵活性高：可以轻松集成到多个前端（如 Web、App）。
• 缺点：
  • 配置复杂：需要重写 Astro 的内容获取逻辑（从 getCollection 改为 API Fetch）。
  • 成本/限制：免费额度有限，且数据不在自己手中。

3. 数据库驱动 (全栈方案)

将文章存储在关系型或文档型数据库中。

• 代表工具：Supabase (PostgreSQL + Auth), MongoDB Atlas。
• 存储位置：云数据库。
• 工作流：
  • 使用 Astro 的 SSR (Server Side Rendering) 模式。
  • 自己编写 API 路由处理增删改查。
  • 前端集成一个编辑器组件（如 Editor.js, Tiptap）。
• 优点：
  • 即时生效：保存即更新，无需等待构建。
  • 完全控制：可以自定义任何复杂的功能（如评论系统、用户系统）。
• 缺点：
  • 开发量巨大：需要处理认证、API 安全、数据库模式设计。
  • 性能挑战：失去了纯静态页面的极致速度（除非加缓存层）。

---

对比总结建议

特性	Git-based (TinaCMS)	Headless CMS (Sanity)	数据库 (Supabase)
存储介质	本地 Markdown 文件	第三方云端	关系型数据库
开发难度	低 (插件化)	中	高
上线速度	慢 (依赖 CI/CD)	快	极快 (即时)
维护成本	极低	中	高
适用场景	个人博客、技术文档	企业官网、多端内容发布	社交、交互频繁的应用

项目的改造方案

最终方案：TinaCMS

理由：

1. 无缝集成：你现在的项目已经是标准的 Astro Markdown 结构，TinaCMS 可以直接读取 src/content/blog 下的文件。
2. 视觉化预览：TinaCMS 支持在 Astro 中实现“所见即所得”的实时预览编辑。
3. 保留现状：你不需要学习如何操作数据库，也不需要迁移已有的文章。

改造步骤概览：

1. 安装 tinacms 依赖。
2. 配置 tina/config.ts 定义文章的字段（标题、日期、正文等）。
3. 在 Astro 中添加一个特定的管理路由（通常是自动生成的 /admin/index.html）。
4. 将项目部署到 Vercel 或 Netlify（它们对这种工作流支持极好）。