技術

EmDashでブログをCloudflare Workers上に構築した

読了 約4分

ブログを作るにあたって、Cloudflare が出したオープンソース CMS「EmDash」を使ってみた。Workers + D1 + R2 のフルスタック構成で、このブログ自体がその成果物になっている。構築手順とハマったところを雑に残しておく。

EmDash とは

Astro ベースのフルスタック TypeScript CMS。公式リポジトリが "the spiritual successor to WordPress"(WordPress の精神的後継)を名乗っていて、コンテンツを HTML ではなく Portable Text(構造化 JSON)で持つのが特徴。管理画面が最初から付いていて、認証はパスワードではなくパスキー(Touch ID など)。データベースは本番が Cloudflare D1、メディアは R2、実行環境は Workers という Cloudflare フルスタック構成で動く。

構築手順

1. スキャフォールド

npm create emdash@latest . -- --template cloudflare:blog --yes

テンプレートを指定すればほぼ対話なしで生成できる。wrangler.jsonc も込みで出てくるので、D1 と R2 のバインディングは最初から書かれている。

{
  "d1_databases": [{ "binding": "DB", "database_name": "emdash-blog-db" }],
  "r2_buckets": [{ "binding": "MEDIA", "bucket_name": "emdash-blog-media" }]
}

2. ローカル開発

npx emdash dev

マイグレーションと型生成込みで dev サーバーが立つ。http://localhost:4321 でサイト、/_emdash/admin で管理画面。

3. デプロイ

npx astro build && npx wrangler deploy

ここが一番感動したところで、wrangler が D1・R2・KV を自動プロビジョニングしてくれる。事前に wrangler d1 create などを叩く必要がない。DB マイグレーションもデプロイ後の初回リクエストで自動実行される。

4. シークレットと初期設定

npx emdash secrets generate
npx wrangler secret put EMDASH_ENCRYPTION_KEY

あとは本番の /_emdash/admin を開くとセットアップウィザードが起動して、サイト名の入力とパスキーの登録をすれば完成。

ハマったところ

  • Node のバージョン。v22.14 だと node:module の registerHooks が無くて dev サーバーが起動しない。エラーメッセージが不親切で原因究明に時間がかかった。v22.15 以上に上げる必要がある
  • プラグインのサンドボックス機能は有料プラン必須。EmDash のプラグインは Worker Loaders(Dynamic Workers)で隔離実行される設計で、これが Workers の有料プラン($5/月)でしか使えない。無料で運用するなら wrangler.jsonc の worker_loaders をコメントアウトして、astro.config.mjs の sandboxed と marketplace 設定を外せばデプロイできる
  • CLI のシード先。npx emdash seed はルートの data.db(SQLite)に書き込むが、Cloudflare 構成の dev サーバーは miniflare がシミュレートする D1(.wrangler/state 以下)を見ている。ローカルにデータが入らないときはここを疑うといい

使ってみて

管理画面・全文検索・RSS・OGP まで最初から揃っていて、テーマは CSS のデザイントークンを上書きするだけで一通り変えられる。コンテンツが構造化データなので、AI エージェントに記事やデザインをいじらせる用途とも相性がいい。実際このブログのデザイン実装はほぼ Claude に任せた。

無料枠で動く個人ブログとしてはかなり快適なので、Cloudflare にロックインされる覚悟があるならおすすめ。

AI エージェントとの連携がいい

EmDash は CLI と REST API がよくできていて、AI エージェントに記事を書かせる体験がいい。CLI が Portable Text とマークダウンを自動で相互変換してくれるので、エージェントはマークダウンで本文を書いて

npx emdash content create posts --file post.json --draft --url https://<自分のサイト>

を叩くだけで CMS に下書きが入る。認証も npx emdash login のデバイスフロー(パスキー)を一度通せばトークンが保存されるので、以後はエージェントに任せられる。実際、この記事自体も Claude が CLI 経由で下書き登録したものだ。

Claude Code を使っているなら、ブログの URL・投稿手順・カテゴリ・文体などをまとめたスキルを ~/.claude/skills/ にグローバル登録しておくと便利。どのディレクトリで作業していても「これ記事にしといて」と言うだけで、体裁の揃った下書きが CMS に入るところまで自動でやってくれる。公式ドキュメントも MCP サーバー(docs.emdashcms.com/mcp)として公開されているので、API 仕様の確認までエージェントで完結する。

参考リンク