EmDash入門 完全ガイド｜WordPressを知っている人が、ゼロからブログを公開するまで
公開日約2分で読めます
EmDashでブログを作り、インターネットに公開するまでを5つのステップで解説。必要なもの・費用・つまずきやすい点まで、実際に作った記録をもとにまとめました。
EmDashとは？ WordPressとの違い
EmDash（エムダッシュ）は、Cloudflareが作った無料のCMSです。CMSは、記事や画像を管理画面から更新できる仕組みのこと。WordPressと同じ仲間です。
大きな違いは3つあります。
WordPress | EmDash | |
|---|---|---|
動く場所 | レンタルサーバー（PHP） | Cloudflare（世界中のサーバー） |
見た目の作り方 | テーマを選ぶ・管理画面で設定 | コード（Astro）で作る。AIに頼める |
更新の手間 | 本体・プラグインの更新が頻繁 | プラグインの仕組みが新しく、更新の負担を減らす設計 |
コードで作るって、難しそう…。
最初のひな形はコマンド1つでできます。このブログも、AI（Claude Code）に手伝ってもらいながら作りました。
必要なものと費用
- パソコン：この記事はMacで確かめた手順です（Windowsは未検証）
- Node.js 22.23.4以上：プログラムを動かす土台。ターミナルで
node --versionを実行して確認 - Cloudflareのアカウント（無料）：公開するときに使います
- クレジットカードかPayPal：画像の置き場所（R2）を使うために登録が必要。無料の範囲なら請求されません
費用の目安（2026年10月時点）：
項目 | 無料の範囲 |
|---|---|
表示の回数 | 1日10万回まで |
画像の置き場所（R2） | 10GBまで |
データベース（D1） | 1つ500MBまで |
個人ブログなら、月0円で動かせる見込みです。止まると困るサイトは、月5ドル（約750円）の有料プランが安心です。
STEP1：ひな形を作る
ターミナルを開き、作業用のフォルダに移動します。
次のコマンドを実行します。
npm create emdash@latest my-blog -- --template cloudflare:blogcloudflare:blog は「Cloudflareに公開する・ブログ用のひな形」という意味です。記事一覧・タグ・RSSなど、ブログに必要な部品が最初からそろっています。
最後に「Done! Your EmDash project is ready」と出れば完成です。
STEP2：手元で動かして、初回設定をする
作ったフォルダに移動して、起動します。
cd my-blog
npm run devブラウザで http://localhost:4321/ を開くと、ブログが表示されます。
http://localhost:4321/_emdash/admin/ を開くと、初回設定の画面になります。サイトタイトルとキャッチフレーズを入れて、始め方を選びます。
- Sample content：英語のサンプル記事入りで始める（練習向き）
- Empty site：空っぽで始める（本番向き）
メールアドレスと名前を入れます。名前は記事の書き手として公開されるので、本名を出したくなければニックネームに。
パスキー（指紋や顔認証でのログイン）を登録すると、管理画面が開きます。
STEP3：記事を書いて公開する
管理画面の「＋ Post」を押し、タイトルと本文を入れて「保存」します。
「Publish now」を押すと確認が出るので、もう一度「Publish now」。これでサイトに出ます。
記事のURLが日本語になってる…？
タイトルがそのままURL（識別名・スラッグ）になります。右側の「識別名」を first-post のような英語に直しておくと、共有したときに文字化けしません。
STEP4：見た目を整える
色や文字の大きさは src/styles/theme.css に書くだけで変えられます。元の設定（tokens.css）より優先される決まりなので、元のファイルを触る必要はありません。
:root {
--color-brand: #2c6a4d;
}このブログでやったこと（詳しくは別の記事で）：
- 日本語の文字と行間に合わせる
- 日付を日本時間・「2026.10.24」形式にする
- 英語の表示を日本語にする
STEP5：Cloudflareに公開する
Cloudflareにログインします。
npx wrangler loginCloudflareの管理画面で R2を有効にします。左のメニュー「ストレージとデータベース」→「R2 オブジェクトストレージ」を開き、「R2 サブスクリプションをアカウントに追加する」を押します。
支払い方法を登録し、規約に同意して「R2 を有効化」を押します。本日の支払額は $0 です。
組み立てて公開します。
npm run build
npx wrangler deploy表示されたURL（https://〜.workers.dev）を開き、すぐに初回設定を済ませます。
つまずきやすい点
こんなとき | 原因と直し方 |
|---|---|
公開時に「R2 bucket not found」 | R2がまだ有効になっていない → STEP5の② |
管理画面で「Database migrations are required」 | データベースの準備が途中で止まっている → emdash migrate で確認・適用 |
組み立て時にフォントの取得エラー | 通信が途中で切れただけ → 同じコマンドをもう一度 |
もっと詳しい原因と直し方は、Q&A集にまとめています。
次に読むなら
まとめ
EmDashのブログは、5つのステップで作れます。手元で動かすところまでは、コマンド数回で済みます。つまずきやすいのは公開のところなので、R2の有効化と、公開直後の初回設定だけは忘れずに。
コメント
まだコメントはありません。最初のひとことをどうぞ。