Notebook and pen on a desk
6 min read

Cloudflare製CMS「EmDash」でブログを立ち上げてみました

草津温泉で宿泊施設向けのIoTサービスを開発している midoemon です。2026年年初にIoTeaBreak株式会社という法人を立ち上げたところです。

日々のハマったポイントや学んだことを、誰かの役に立てばと思い、ブログを始めることにしました。
最初の記事が「ブログの立ち上げ自体の記録」というのも、なんだかメタですが、EmDash はリリースされたばかりで日本語の情報がほとんどないので、導入記として残しておきます。

なぜ EmDash を選んだのか

Cloudflare との出会い

もともと 2000年代はオンプレミスのインフラエンジニアをやっていて、2010年代は AWS への移行プロジェクトなどに関わっていました。「サーバーを自分で面倒見る」世界から「クラウドに任せる」世界への変化をリアルタイムで体験してきた世代です。

Cloudflare を意識するようになったのは昨年、某イベントサイトを Cloudflare Workers + Astro で運用したことがきっかけでした。アクセスがそこそこあるサイトでしたが、ビビりながらも無料枠で問題なく乗り切れ、オンプレ時代に負荷分散の設計で苦労していた身としては、「CDN のエッジでそのまま動く」というアーキテクチャに感動したのを覚えています。

WordPress との距離感

お手伝いでちょこっとWordPressサイトの運用も現役でしていますが、2026年に自分のブログを WordPress で立てるのは今更感。noteも考えましたが情報商材や乱造AI記事ばかりが目について治安が悪くなって来たのでこれも今更かな〜と。

EmDash の登場

そんなタイミングで、2026年4月1日に Cloudflare が EmDash を発表しました。

EmDash は Cloudflare が「WordPress の精神的後継者」と位置づけている、TypeScript 製のオープンソース CMS です。Astro ベースで、Cloudflare Workers 上で動作し、プラグインはサンドボックスで隔離されます。

自分が既に使っている技術スタック（Astro + Cloudflare）の延長線上にあったことと、ゼロからの立ち上げで失うものもないので、人柱として早期に試して記録を残すことにしました。

実際の導入手順

Cloudflare の準備

EmDash を Workers 上で動かすには以下が必要です。

  • Workers Paid プラン（$5/月）— Dynamic Workers の利用に必要
  • R2 サブスクリプション（$0 + 従量課金）— 画像ストレージ用
  • D1 データベース — 記事データの保存用

Workers Paid プランへの変更は Cloudflare ダッシュボードからすぐにできました。

R2 サブスクリプションでハマった話

R2 のサブスクリプション追加画面で「R2 サブスクリプションをアカウントに追加する」ボタンを押しても、同じ画面に戻ってしまうという問題に遭遇しました。Safari でもChromeでも、シークレットモードにしたりクレジットカードを変えても解消せず。

結局、数日経って再度試したらあっさり通りました。リリース直後ということもあり、Cloudflare 側の一時的な不具合だったようです。

Cloudflare ダッシュボードからのデプロイが失敗

EmDash の GitHub テンプレートにある「Deploy to Cloudflare」ボタンからデプロイを試みましたが、プロジェクト名の入力欄に HTTP 500 エラーが表示されて先に進めませんでした。名前を変えても解消せず。

CLI からのデプロイで成功

ダッシュボードがダメだったので、ターミナルからのデプロイに切り替えました。
Mac のターミナル.app を開いて、以下のコマンドを1行ずつ実行します。

EmDash プロジェクトの作成：
※midoblog　の部分がプロジェクト名になります。皆様の環境に合わせて書き換えてください

npm create emdash@latest midoblog

途中でいくつか質問されます。以下のように選択しました。

  • Where will you deploy? → Cloudflare Workers
  • Which template? → Blog
  • Which package manager? → npm
  • Install dependencies? → Yes
CLIでのインストール中の画面

完了すると プロジェクト名のフォルダが作られます。

作成されたフォルダに移動して、開発サーバーを起動：

cd midoblog
npm run dev

ブラウザで http://localhost:4321 にアクセスすると、ブログが表示されます。

ブログ初期画面

管理画面は

http://localhost:4321/_emdash/admin です。
WordPressライクなUIで、直感的に理解できそう。

管理画面の初期画面

私の場合、ここで以下の通り設定を入れて進めてしまいましたが
パスキーの設定まで完了してしまったのが失敗だった気もするので後回しが良いかと（後述）

Site Title：ブログタイトル

Tagline： ブログの概要

Include sample content： チェック入れたままでOK（後で消せるので、まず管理画面の雰囲気を掴むのに便利です）

「Continue →」を押すと、次にAccount作成（メールアドレス等）、その次にPasskey登録と進みます。

D1 データベースと R2 バケットの作成

npx wrangler d1 create midoemon-blog
npx wrangler r2 bucket create midoemon-media --location apac

ここで注意点がひとつ。wrangler d1 create を実行すると binding 名を聞かれますが、EmDash は DB という binding 名を期待しています。自動で別の名前が入ってしまった場合は、wrangler.jsonc を手動で修正する必要があります。

wrangler.jsonc の修正

テンプレートの初期設定にはプレースホルダが入っているので、実際に作成した D1 と R2 の情報で上書きしました。

{
  "name": "midoblog",
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "midoemon-blog",
      "database_id": "実際のID"
    }
  ],
  "r2_buckets": [
    {
      "binding": "MEDIA",
      "bucket_name": "midoemon-media"
    }
  ]
}

ポイントは binding 名を DB と MEDIA にすること。テンプレートのコードがこの名前で参照しています。

ビルドとデプロイ

npm run build && npm run deploy

wrangler deploy だけだとビルドが走らずにエラーになります。必ず astro build を先に実行する必要があります。上記のように && で繋ぐか、npm run build を先に実行してください。

デプロイが完了すると midoblog.xxxxx.workers.dev のような URL が発行されて、EmDash のセットアップウィザードが表示されます。

カスタムドメインの接続

Cloudflare ダッシュボードの Workers & Pages → midoblog → カスタムドメインで midoemon.com を追加しました。

既に Cloudflare Pages で同じドメインを使っていた場合は、先に Pages 側のカスタムドメイン設定を外してから、Workers 側に追加する必要があります。DNS レコードに Worker タイプのレコードが残っていると「このドメインはすでに使用されています」と怒られます。

Passkey の落とし穴

EmDash の認証は Passkey がデフォルトです。これ自体はモダンで良いのですが、workers.dev ドメインで登録した Passkey は、カスタムドメイン（midoemon.com）では使えません。Passkey はドメインに紐づくためです。

Magic link（メールリンク）でログインする方法もありますが、メールプロバイダーの設定が別途必要です。私は当面、workers.dev の管理画面から操作する運用にしています。

テーマのカスタマイズ

EmDash のブログテンプレートには一部ハードコードされた文字列があります。例えば「My Blog」というサイト名が管理画面の Settings ではなく、テーマのソースコードに直接書かれていました。

grep -r "My Blog" src/

で該当箇所を特定して、sed で一括置換しました。

sed -i '' 's/My Blog/midoemon blog/g' src/layouts/Base.astro src/pages/posts/\[slug\].astro src/pages/index.astro src/pages/rss.xml.ts

v0.1.0 なのでこの辺りは今後改善されると思いますが、現時点ではテーマのコードを直接触る場面がちょこちょこあります。

まとめ

EmDash は v0.1.0 のプレビュー版なので、正直まだ荒削りです。
ダッシュボードからのデプロイが動かなかったり、テーマに文字列がハードコードされていたり。
でも、CLI でのセットアップは比較的スムーズで、管理画面は WordPress に慣れた人なら迷わず使えるレベルです。
この記事自体が EmDash で書かれた最初の投稿です。これから草津温泉での IoT スタートアップの記録や、技術的なメモなどを書いていく予定です。

No comments yet

Continue reading