Topics

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 で公開されます。
ローカルとリモートはDBが独立しているため、リモートの管理画面でも初回セットアップ（管理者アカウント作成）が必要です。

GitHubリポジトリと連携すれば、pushで自動デプロイも可能です（Cloudflareダッシュボード → Workers → 設定 → ビルド → Gitリポジトリと連携）。

5. microCMSからの記事移行

移行スクリプトを作成し、microCMS APIから全記事を取得 → EmDash CLIの content create で投入しました。

ポイント

• microCMSのリッチエディタ（HTML）→ Markdown に変換して投入
• 画像はまず外部URL参照のまま移行し、後からR2にアップロードして参照先を差し替えた
• npx emdash seed ではなく npx emdash content create を使う（seedはリビジョンを作らないため記事が表示されない）

実際使ってみて

ヘッドレスCMSのような「セットアップから実装までの手軽さ」と、フルスタックCMSの「一気通貫で制御できる利便性」を併せ持つ、いいとこ取りなCMSですね。
なによりAstroベースなので既存のノウハウをそのまま活かせるというのがいいですね。小〜中規模ブログに良さそうな印象でした。

ただ、まだベータ版ということもあり、

• 下書きプレビューがデフォルトでは動かない（後述）
• 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」ボタンから下書き記事が確認できるようになります。

まとめ

今回は基本通りフルスタックとして実装しましたが、fetchで記事を受け取ってSSGビルドするような「ヘッドレスCMS」的な使い方もできそうなので、そちらも今度試してみようと思います。

まだ出たばかりのベータ版。これからの進化が非常に楽しみです！