從 microCMS 遷移至 EmDash + Cloudflare

EmDash 是什麼

Cloudflare 推出的 CMS，被定位為 WordPress 的精神繼承者。
結合 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 部署至 Cloudflare 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」按鈕確認下稿文章。

總結

這次按照基本作法作為全棧實現，但也可以像「headless CMS」那樣用 fetch 取得文章進行 SSG 構建，之後也想試試那種方式。

才推出不久的測試版。對其今後的發展令人期待！