将 microCMS 迁移至 EmDash + Cloudflare 的尝试

什么是 EmDash

这是 Cloudflare 发布的 CMS，定位为 WordPress 精神上的继任者。
它是一款全栈 CMS，采用 Cloudflare 的各类资源（D1/R2/Workers）与 Astro 的现代架构，堪称典型的 Cloudflare 生态 CMS！
我们抱着试试看的心态，将原本用 microCMS 实现的博客，以实验方式迁移到了 EmDash 上。

迁移后的站点请见此处 → 悠然博客
由于这是一个实验站点，目前保持默认主题。之后会逐步应用设计。

搭建流程

1. 创建项目

运行 npm create emdash@latest。命令会以交互方式询问多项设置，按需选择即可。

2. 创建 Cloudflare 资源

就这样搭建数据库和存储，部署也很简单。

npx wrangler login
npx wrangler d1 create my-site
npx wrangler r2 bucket create my-site-media
npm run build && npm run deploy

3. 本地开发

执行 npx emdash dev 即可启动本地环境。
访问管理后台 http://localhost:4321/_emdash/admin 进行初始设置。

4. 部署与初始设置

执行 npx wrangler deploy 即可将项目部署到 Workers，并通过 https://[name].workers.dev 对外公开。
由于本地与远程的数据库相互独立，远程管理后台同样需要进行首次设置（创建管理员账户）。

关联 GitHub 仓库后，推送代码即可自动部署（Cloudflare 控制台 → Workers → 设置 → 构建 → 关联 Git 仓库）。

5. 从 microCMS 迁移文章

编写迁移脚本，通过 microCMS API 获取全部文章，再使用 EmDash CLI 的 content create 命令导入。

要点

• 将 microCMS 的富文本编辑器内容（HTML）转换为 Markdown 后导入
• 图片先以外部 URL 引用的方式迁移，之后再上传到 R2 并替换引用地址。
• 请使用 npx emdash content create，而不是 npx emdash seed（seed 不会创建修订版本，因此文章无法显示）。

实际使用后的感受

这是一款兼具优点的 CMS：既有无头 CMS 那样“从搭建到实现都很轻松”的便利，又有全栈 CMS 那样“可以端到端统一控制”的优势。
最重要的是它基于 Astro，因此可以直接沿用现有的技术积累。感觉它比较适合中小型博客。
不过，由于 Astro 的 Cloudflare 适配器尚不支持 Cache API，每次请求都会从 D1 重新生成页面，因此速度较慢，这一点令人在意。需要等待官方支持，或者自行实现缓存。

由于目前仍是 Beta 版本，

• 草稿预览默认无法正常使用（详见后文）
• 所见即所得编辑器中，居中对齐和右对齐设置不生效
• 编辑 Menus 项目时，相对路径会报错
• 无法对自定义字段进行排序
• 无法邀请用户

等，还有一些值得留意的地方（截至 v0.1.0）。

看来要在实际项目中导入，还需要不少时间。

关于草稿预览

编辑界面中提供了“Preview draft”按钮，但无法预览处于草稿状态的文章。

EmDash 提供了预览功能，但默认未启用，因此需要进行以下设置。

1. 在环境变量 PREVIEW_SECRET 中设置任意密钥（可通过 npx emdash auth secret 生成）
2. 在文章页面中使用 verifyPreviewToken 来获取草稿。

import { getEmDashEntry, verifyPreviewToken } from "emdash";

const preview = await verifyPreviewToken({
  url: Astro.url,
  secret: import.meta.env.PREVIEW_SECRET,
});

const { entry, isPreview } = await getEmDashEntry("posts", slug, { preview });

完成后，即可通过管理界面中的“Preview draft”按钮查看草稿文章。

总结

这次我按照常规方式以全栈方式实现，但看起来也可以通过 fetch 获取文章并进行 SSG 构建，即作为“无头 CMS”来使用，所以打算之后也尝试一下。

这还是刚刚发布的测试版，我非常期待它今后的发展！