从 microCMS 迁移至 EmDash + Cloudflare

EmDash 是什么

Cloudflare 发布的被定位为 WordPress 精神继承者的 CMS。
利用 Cloudflare 的各种资源（D1/R2/Workers）+ Astro，采用现代架构的全栈 CMS，正是 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仓库关联，可以实现push时自动部署（Cloudflare控制面板 → Workers → 设置 → 构建 → 关联Git仓库）。

5. microCMS文章迁移

创建迁移脚本，从microCMS API获取所有文章 → 通过EmDash CLI的content create导入。

要点

• microCMS的富文本编辑器（HTML）→ 转换为Markdown后导入
• 图片先作为外部URL引用进行迁移，之后上传到R2后替换参考路径
• 使用npx emdash content create而不是npx emdash seed（seed不创建修订版本，导致文章无法显示）

亲身体验一下

这是一款既具备 headless CMS「从设置到实现的便利性」，又拥有全栈 CMS「端到端控制的便利性」的两全其美型 CMS。
特别是基于 Astro，可以充分利用现有的技术积累，这一点很不错。给人的印象是很适合小到中等规模的博客。
但由于 Astro 的 Cloudflare 适配器对 Cache API 还不支持，每次请求都需要从 D1 生成页面，速度比较慢，这一点比较遗憾。看来需要要么等待官方支持，要么自己实现缓存方案。

鉴于目前仍处于测试版阶段，

• 草稿预览默认不工作（详见下文）
• WYSIWYG 编辑器中的居中、靠右对齐不生效
• 编辑 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」按钮确认草稿文章了。

总结

这次我按照基本方式作为全栈架构实现，但由于 EmDash 也支持通过 fetch 获取文章并进行 SSG 构建的「headless CMS」式用法，所以今后也想尝试这种方式。

目前仍是刚发布的测试版。期待今后的发展！