EmDash — Cloudflare で動く WordPress 代替の CMS

EMD EmDashCloudflareWorkersCloudflareD1CloudflareR2

⚠️ 導入・運営の手順は公式ドキュメント（2026-06-13 時点・beta）に基づく。EmDash はまだ開発途上で仕様が変わりやすいため、実際に試すときは最新の公式ドキュメント（docs.emdashcms.com）で確認すること。

「ブログを作るなら WordPress」という人は多い。その WordPress を Cloudflare の上で置き換える、というアプローチが EmDash。Cloudflare 自身が出したオープンソースの CMS で、「WordPress の精神的後継」を掲げている。

このサイトのハンズオン（AST / ASB）では Astro でブログを 自分で作る 道を扱ってきた。EmDash はその対極で、CMS に運用を任せる 選択肢。ここでは EmDash の紹介と、導入・運営のおおまかな流れをまとめる。

EmDash のブログテンプレート（Blog）で作ったサイト（触ってみる）

▶ 完成版を触ってみる: emdash-sample.vibecodingnotes.com — EmDash のブログテンプレートで作った公開サイトの例。実際の表示を確かめられる。

先に結論（2026-06-13 時点のスタンス）: EmDash はまだ beta（開発者プレビュー） で、バグやトラブルもある。本格的な運用に使うのはまだ早い。「Cloudflare で WordPress の代わりになる有力候補が出てきた」と知っておき、試すなら評価目的で、という段階。本番のブログは当面 AST/ASB のような安定した方法を勧める。

1. EmDash とは

Cloudflare が 2026年4月 に発表したオープンソース CMS（MIT ライセンス、GitHub emdash-cms/emdash）
TypeScript ＋ Astro ベース。本番は Cloudflare ネイティブ（Workers＝実行、D1＝データベース、R2＝メディア、KV＝セッション）で動くサーバーレス構成。DB やストレージは SQLite / Postgres / S3互換などに差し替えも可能
管理画面つき: ビジュアルなスキーマビルダー、メディアライブラリ（ドラッグ&ドロップ）、メニュー、タクソノミ、ウィジェットなど、WordPress 的な運用に必要なものが一通り揃う
AIネイティブ: 内蔵の MCP サーバ・AI支援用の Skill ファイル・CLI を備え、Claude Code のような AI エージェントから記事の作成・管理ができる
プラグインをサンドボックス実行: 各プラグインを Worker isolate 内で隔離し、マニフェストで宣言した権限しか使えない

2. WordPress と何が違うか

	WordPress	EmDash
実行基盤	PHP + MySQL のサーバー	Cloudflare のエッジ（Workers + D1 + R2）
プラグイン	強力だが脆弱性の温床になりがち	Worker isolate でサンドボックス化、権限を宣言制に
AI連携	後付け	最初から MCP / Skill / CLI を内蔵
構成	テーマ・プラグインのエコシステムが巨大	OSS だがエコシステムはこれから

「PHP を立てずに、Cloudflare の世界で完結する WordPress 的運用」 が EmDash の立ち位置。とくに AI（Claude Code）から記事を書き・管理できる のは、このシリーズ（Claude Code × Cloudflare）と相性がよい。

WordPress からの移行もできる。既存の WordPress サイトを、投稿・ページ・カスタム投稿タイプに加えて メディア（画像）・カテゴリ/タグ・著者・コメントごと EmDash に取り込める（管理画面の インポート → WordPress、または WXR ファイル・WordPress.com から）。メディアは元サイトから自動でダウンロードされ R2 のメディアライブラリに入る（要 R2 有効化。移行が終わるまで旧サイトは残しておく）。

3. できることの概要

運用の入り口は3つ（詳しくは「7. 運営の流れ」で）。

Web 管理画面から: ブラウザの管理画面（/_emdash/admin）で、記事を書き、コンテンツの型（スキーマ）やメディアを管理する。WordPress の管理画面に近い使い心地
Claude Code（CLI）から: 同梱の CLI を Claude Code が呼び出し、自然文の依頼で記事の作成・下書き・公開・画像アップまで行う。AI から運営するなら現時点はこれが手軽
MCP から（参考）: 内蔵の MCP サーバに、Claude.ai など任意の AI クライアントを繋いで操作する方法。まだ発展途上

4. 現状と注意

まだ beta（2026-06-13 時点で v0.18 系の開発者プレビュー）。仕様・UI・CLI は変わりやすい
エコシステムが小さい: WordPress のような豊富なテーマ・プラグインはまだ無い
バグやトラブルも報告されており、本格運用は時期尚早。今は「触って評価する」段階と捉えるのが現実的
このサイトとしては、本番ブログ用には EmDash を強くは勧めず、今後の成熟を見守るスタンス

5. 無料でできる範囲

Cloudflare の 無料プランでも EmDash は動かせる。ただし大きな制約が1つある——プラグイン。

5-1. 無料でできること

EmDash の中核機能は Cloudflare の無料枠で動く。

記事の作成・公開、Web 管理画面、メディア管理、スキーマ（コンテンツの型）、メニュー、タクソノミなど、CMS の基本はひととおり無料
使う Cloudflare サービスは Workers（実行）・D1（データベース）・R2（メディア）。いずれも個人ブログ規模なら無料枠で足りる

サイトの見た目（テーマ）も無料の範囲。EmDash のテーマ＝最初に選んだテンプレート（中身は普通の Astro プロジェクト）で、レイアウトやページを Astro として自由にカスタマイズできる。ただし WordPress のような「管理画面でテーマをワンクリック着せ替え」「巨大なテーマストア」はまだ無く、別のテーマにしたいときは別テンプレートで作り直す形になる。

5-2. 有料が必要なこと（プラグインのサンドボックス）

EmDash の プラグインは1つずつ Dynamic Worker という隔離環境（サンドボックス）で動く。これが EmDash のセキュリティの肝で、プラグインはマニフェストで宣言した権限しか使えない（＝WordPress でプラグインが脆弱性の温床になりがちな問題への回答）。

ところが、この Dynamic Workers は有料アカウント（Workers Paid、月 $5〜）限定。つまり：

プラグインを使いたいなら有料
無料で使うなら、wrangler.jsonc の worker_loaders ブロックを無効化（コメントアウト）して プラグイン機能をオフにする。中核機能はそのまま無料で使える（ただし管理画面でプラグイン由来のウィジェット、たとえばダッシュボードの Webhooks が「Plugin error」と表示される。ブログ運用そのものには影響しない）

有料にしてプラグインを有効にすると、管理画面の「マーケットプレイス」から1クリックで導入できる（インストール時に「このプラグインが何にアクセスできるか」の権限同意ダイアログが出る）。用意されているのはフォーム・SEO・埋め込み・Webhook 通知・監査ログ・AIモデレーション・WordPress 移行など、WordPress のプラグイン的なもの一通り。無料のままなら、これらは使わずコア機能だけで運用する割り切りになる。

ハマりどころ: EmDash の「Deploy to Cloudflare」ワンクリックデプロイは、無料アカウントだと最後の wrangler deploy で 「Dynamic Workers requires paid plan」（エラー 10195） が出て失敗する（事前の警告なし）。無料で進めるなら、先に worker_loaders を無効化してから手動でデプロイするのが確実。

5-3. R2 の有効化に関する注意

メディア保存に使う R2 は無料枠があるものの、有効化の際に支払い方法（クレジットカード）の登録を求められることがある（Cloudflare の公式表記は「no credit card required」だが、実際にはカード登録を促される報告がある）。登録しても無料枠内なら課金されないが、カード登録に抵抗がある場合は念頭に置いておく。

6. 導入（インストール）の流れ

ここからは実際に作る。プロジェクトを生成したら、すぐ Cloudflare に公開して本番で使い始める。WordPress と同じで、記事はローカルではなく本番の管理画面で下書き→公開していくので、ローカルで動かすのは任意（後述）。生成だけターミナルで、あとはほぼ Claude Code に任せられる。

6-1. プロジェクトを作る（ターミナル）

EmDash のプロジェクト作成は対話形式なので、Mac の ターミナルで行う。~/Desktop/claude に移動してスターターを実行する。

cd ~/Desktop/claude
npm create emdash@latest

プロジェクト名（ここでは my-emdash-site）、デプロイ先（Cloudflare Workers）、テンプレート（Blog）、パッケージマネージャ（npm）などを聞かれて答えると、プロジェクト一式の生成と依存関係のインストールまで自動で済み、~/Desktop/claude/my-emdash-site ができる。ローカル用の暗号鍵 EMDASH_ENCRYPTION_KEY が .dev.vars に書き出される（.gitignore 済み）。

このとき、Cloudflare 向けの設定ファイル wrangler.jsonc も自動生成される（D1 の DB、R2 の MEDIA、そしてプラグイン用の worker_loaders バインディングが入った状態）。さらに .mcp.json や CLAUDE.md もプロジェクト内に置かれる。

6-2. Cloudflare に公開する

生成できたら、Claude デスクトップアプリ → Code → New session で、作業ディレクトリに ~/Desktop/claude/my-emdash-site を指定して開く。

my-emdash-site の中に .mcp.json・CLAUDE.md が生成され、EmDash 公式ドキュメントの MCP が有効になり、Claude Code が EmDash を理解した状態で手伝ってくれる。

以降、ファイル編集やデプロイは Claude Code に任せ、ブラウザ操作が要る箇所だけ自分で行う。

まず Wrangler のログイン状態を確認する。Wranglerハンズオンなど他の Cloudflare ハンズオンを済ませていれば、すでにログイン済みのはず。

npx wrangler whoami

アカウント名やメールアドレスが表示されればOK。表示されない場合だけログインする。これは Claude Code ではなく ターミナルで実行するコマンド（ブラウザ認証が開く）。

npx wrangler login

無料アカウントで進めるなら、自動生成された wrangler.jsonc から worker_loaders ブロックを外す（プラグインの正体がこれ＝有料の Dynamic Workers。残したままだとデプロイが「Dynamic Workers requires paid plan / エラー10195」で失敗する）。Claude Code に頼める。

wrangler.jsonc の worker_loaders ブロックを削除（またはコメントアウト）してください。
無料アカウントでデプロイしたいので、プラグイン機能はオフにします。

また、メディア保存に使う R2 は、事前にダッシュボードで有効化しておく必要がある（有効化前にデプロイすると「bucket … does not exist」で失敗する）。Cloudflare ダッシュボード（dash.cloudflare.com）の Storage & databases → R2 Object Storage → Overview で Add R2 subscription ボタンを押して有効化する（Due today は $0、無料枠を超えたときだけ課金。支払い方法が未登録ならカードの登録を求められる。R2 の無料枠は大きく、毎月 10GB のストレージまで無料なので、小規模ブログなら実質無料。→「5. 無料でできる範囲」）。R2 を使わずカード登録も避けたい場合は、wrangler.jsonc の R2 バインディングを外す（その場合メディアアップロードは使えない）。

R2 の有効化画面。無料枠つき・Due today $0。「Add R2 subscription to my account」で有効化

有効化完了（$0/month）。このあとデプロイすれば R2 バケットが自動作成される

あとはデプロイ。これも Claude Code に頼める。

npm run deploy でこのプロジェクトを Cloudflare にデプロイしてください。

（deploy スクリプトの中身は astro build && wrangler deploy。）D1 のデータベースと R2 のバケットは、初回デプロイ時に自動で作られる（R2 だけは上記のとおり、先にアカウントで有効化さえしておけばOK）。マイグレーションと初期データは初回アクセス時に入る。

最後に、公開URLの /_emdash/admin（https://<自分のサイト>.workers.dev/_emdash/admin）をブラウザで開いてセットアップする。ここからはこのデプロイ先（本番サイト）での操作。管理画面の UI は日本語で、ウィザードは3ステップ：

サイト — サイトタイトル・キャッチフレーズを入力。サンプルコンテンツを含める（新しいサイトに推奨） にチェックしておくと、見本の記事入りで始められる
アカウント — メールアドレス・名前を入力
Sign In — パスキーを作成（デバイスの生体認証・セキュリティキー・PIN）

作成したパスキーでサインインすると管理ダッシュボードに入れる。これで運用開始。

① サイト：サイトタイトル・キャッチフレーズ・「サンプルコンテンツを含める」

② アカウント：メールアドレス・名前

③ Sign In：パスキーを作成（生体認証・セキュリティキー・PIN）

作成したパスキーでサインイン（メールリンクでのサインインや言語切り替えもここから）

サインインすると管理ダッシュボード（日本語UI）。サンプル記事も入っている

暗号鍵について: .dev.vars の EMDASH_ENCRYPTION_KEY はローカル専用だが、この手順（デプロイ → セットアップ → パスキー）は本番に鍵を登録しなくても問題なく完走できた。プラグインなど一部機能で必要になる場合は npx wrangler secret put EMDASH_ENCRYPTION_KEY でシークレット登録できる（詳細は公式のCloudflare デプロイ手順）。

ブラウザ操作が必要なのは「Wrangler のログイン」と「セットアップウィザード（管理者作成・パスキー登録）」くらい。プロジェクト生成以外のファイル編集・デプロイは Claude Code に任せられる。

6-3.（任意）ローカルで動かすには

テンプレートやスキーマを手元でいじりたい開発者向けの寄り道。ブログを書くだけなら不要——記事は本番の管理画面で下書き→公開していけばよい（次章）。

手元で動かすなら、Claude Code に開発サーバーの起動を頼む。

このフォルダで開発サーバーを起動してください。

（中身は npm run dev。）ブラウザで http://localhost:4321 を開けばローカルで確認できる（管理画面は /_emdash/admin。ローカルは認証不要で、CLI もトークン無しで通る）。

7. 運営の流れ

ここからは本番サイトで運営する（WordPress と同じく、本番の管理画面で下書き→確認→公開していく）。入り口は複数ある。Web 管理画面、Claude Code（CLI）、そして MCP。AI から運営するなら、現時点では CLI（7-2）が手軽でおすすめ（ローカル画像もそのまま上げられる）。MCP（7-3）は発展途上。

7-1. Web 管理画面で記事を書く

/_emdash/admin を開き、サイドバーの Posts から新規作成。Title（タイトル）・Content（本文）をリッチテキストエディタで書き、必要なら Featured Image（アイキャッチ）やカテゴリ・タグを設定する。編集内容は自動保存され（「保存済み」表示）、右の公開パネルで ステータス（公開済み／非公開）やスラッグを切り替えられる。公開済みにすればサイトに即反映され、ライブビュー で実際の表示を確認できる。

記事の編集画面。左にエディタ、右に公開・スラッグ・ステータス・所有者・カテゴリなど

公開した記事（サイト側の表示）。本文・アイキャッチ画像・カテゴリ/タグが反映される

記事以外にも、ビジュアルなスキーマビルダーでコンテンツの型（カスタム投稿タイプ）を定義したり、メディアライブラリに画像をドラッグ&ドロップしたり、メニューやタクソノミを管理したりできる。WordPress の管理画面に近い感覚。

7-2. Claude Code（CLI）で記事を書いて公開する

このプロジェクトのフォルダで Claude Code を開くと、同梱の emdash-cli スキル（.claude/skills）が効くので、Claude Code は EmDash の CLI を理解した状態になる。あとは 自然文で頼むだけで、Claude Code が CLI を呼び出して記事を作成・下書き保存・公開まで やってくれる。

準備：本番サイトに一度だけログインしておく。 ポイントは2つ。

① ターミナル（Claude Code の外）で一度だけログインする。

npx emdash login --url https://my-emdash-site.〇〇.workers.dev

ブラウザで表示される URL（…/_emdash/admin/device）を開き、表示されたコードを入力して承認する。認証情報は ~/.config/emdash/auth.json（ホーム配下・作業ディレクトリに依存しない）に保存され、期限が来ても自動更新されるので、一度やれば以降のセッションでも有効。

なぜターミナルかというと、本ハンズオンは Claude デスクトップアプリ（Code）での Claude Code を前提にしているから。emdash login はブラウザに出るコードを入力する対話的な認証で、ターミナル版の Claude Code CLI ならエージェント経由でも完了できる（emdash-cli スキルが「まず login」と書いているのはこのため）。ただし デスクトップアプリの Claude Code ではこのやり取りをうまく扱えず、止まってしまう。なので login は ターミナル（Claude Code の外） で実行する。

② Claude Code に「login しない」と分からせておく。 emdash-cli スキルが「まず login」と促すため、放っておくと毎回 login を試みて①の罠にはまる。プロジェクトの AGENTS.md（CLAUDE.md はこれへのシンボリックリンク）に一行ルールを足しておけば、以後そのプロジェクトの Claude Code は再 login しない。これも Claude Code に頼める。

AGENTS.md の末尾に次の一行を追記してください：
emdash login は実行しない（認証は ~/.config/emdash/auth.json に保存済み。確認は emdash whoami まで）。

対話的な login を一切したくない／CI で回したいときは、API トークン方式。/_emdash/admin の設定 → APIトークン → トークンを作成 で発行し（記事＋画像なら コンテンツ読み取り／書き込み・メディア読み取り／書き込み の4スコープ）、EMDASH_TOKEN（永続させるなら ~/.zshrc に export）か --token で渡す。

準備ができたら、あとは自然文で頼むだけ。 以降のコマンドは本番サイト（ログイン先）に向く。

「Cloudflareで作るブログ」というタイトルで短い記事を書いて、下書きとして保存してください。

Claude Code は裏で npx emdash content create posts --draft … のような CLI を実行する（create は既定で即公開、--draft を付けると下書き。本文は Markdown で渡すと EmDash 側で Portable Text に変換される）。下書きは本番サイトの管理画面やライブビューで確認でき、よければ「公開して」と頼めば公開される。

ローカル画像をトップ画像に使う、といった依頼もまとめてできる。

「美味しいコーヒー」というタイトルで短い記事を書いて、下書きとして保存してください。
~/Downloads/coffee.jpg をトップ画像（Featured Image）に使うので、いっしょにアップしてください。

Claude Code は ① npx emdash media upload ~/Downloads/coffee.jpg で画像を上げて（メディアIDが返る）、② それを featured_image フィールドに指定して npx emdash content create posts --draft … で下書き作成、という2段階を実行する。画像をローカルパスのまま渡せるのが CLI の強み（フィールド名や値の形は Claude Code が同梱スキルと生成された型から把握する）。

「下書きで上げて」と言えば --draft、「公開して」なら content publish を Claude Code が使い分ける。CLI が操作するのは「いま認証している先」で、本番にログインしてあれば本番に書かれる（ローカルの開発サーバーを動かしているなら、そちらは認証不要でそのまま操作できる）。

Claude Code に CLI で作らせた下書き「美味しいコーヒー」を本番サイトの管理画面で確認したところ。タイトル・本文・トップ画像（アップした coffee.jpg）・スラッグ・カテゴリまで入り、ステータスは「下書き」

作った下書きを直したいときも、Claude Code に頼むだけ。 タイトルで指して「こう直して」と言えば、CLI で対象を見つけて更新してくれる（裏では content get で今の内容とリビジョンを取り、content update で書き換える）。

下書きの「美味しいコーヒー」の本文に、淹れ方のコツをもう一段落足してください。下書きのままにしておいてください。

注意：content update は既定で「公開」してしまう。 下書きのままにしたいときは「下書きのまま」と伝える（Claude Code が --draft を付ける）。「直して公開して」と言えば、更新と公開を一度にやってくれる。

7-3. MCP で運営する（参考）

EmDash は記事操作用の MCP サーバも内蔵している（/_emdash/api/mcp）。デプロイ済みサイトに、Claude.ai や ChatGPT など MCP を話せる任意の AI クライアント をコネクタとして繋ぎ、記事の作成・公開などを AI から操作できる——という方向性。手元にプロジェクトや CLI が無くても使えるのが利点。

ただし 画像などのバイナリは MCP では直接アップロードできない うえ、まだ発展途上。なので 現時点では §7-2 の CLI を勧める。「そういうやり方もある」くらいに捉えておき、MCP が成熟してきたら本記事でも詳しく扱う予定。

参考リンク

2026-06-13 (last updated: 2026-06-16) タツヲ (yto)

☕️ Vibecoding Notes を応援