從 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 不會建立修訂版本，因此文章不會顯示）。

實際使用後的感想

這是一款兼具優點的 CMS：既有類似 Headless CMS 的「從設定到實作都很輕鬆」，也有類似 Full-stack CMS 的「從頭到尾都能掌控」的便利性。
最重要的是它以 Astro 為基礎，因此可以直接沿用既有的經驗與知識，我覺得這一點很好。感覺很適合小到中型的部落格。
不過，由於 Astro 的 Cloudflare adapter 尚未支援 Cache API，每次請求都要從 D1 產生頁面，速度偏慢，這一點令人在意。看來需要等待官方支援，或自行實作快取機制。

畢竟仍是 Beta 版，

• 草稿預覽預設無法運作（詳見後述）
• WYSIWYG 編輯器中的置中、靠右對齊設定無法正確反映。
• 編輯 Menus 項目時，相對路徑會出現錯誤。
• 無法對自訂欄位進行排序。
• 無法邀請使用者。

另外也有幾點值得留意（截至 v0.1.0）。

看來要用在實際專案上還需要一段時間。

關於草稿預覽

編輯畫面上提供了「Preview draft」按鈕，但無法預覽處於 draft 狀態的文章。

EmDash 提供了預覽機制，但預設並未啟用，因此需要進行以下設定。

1. 在環境變數 PREVIEW_SECRET 中設定任意的密鑰（可使用 npx emdash auth secret 產生）
2. 在文章頁面中使用 verifyPreviewToken 來取得 draft 內容

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」按鈕確認草稿文章。

總結

這次依照標準做法以全端（fullstack）方式實作，但看起來也能透過 fetch 取得文章並進行 SSG 建置，像是「無頭 CMS」的用法，之後也打算試試看。

這是剛推出的測試版，非常期待後續的發展！