Cloudflareがオープンソースで公開している次世代CMS「EmDash（エムダッシュ）」に興味を持ち、「自分のパソコンにインストールして実際の管理画面を触ってみたい」「コマンド操作やAstroに詳しくなくても、記事投稿や本番公開まで進められるだろうか？」と感じている方は多いのではないでしょうか。

従来のWordPressをローカル環境に構築しようとすると、PHPやMySQL、Webサーバー（Apache / Nginx）や専用仮想環境を用意する必要がありました。それに対してEmDashは、パソコンに「Node.js」さえ入っていれば、コマンド1つ・わずか数分でローカル環境にサイト本体と管理画面を立ち上げられる手軽さが大きな魅力です。

本記事では、これから初めてEmDashを触る方に向けて、導入前の環境チェックから対話型インストーラーの選び方、管理画面での記事作成・画像アップロード・メニュー整理、さらにフロントエンドの表示カスタマイズやCloudflareへの本番デプロイ手順まで、つまずきやすいポイントを押さえながら丁寧に解説します。

あわせて読みたい（EmDashの全体像とWordPressとの比較）

「そもそもEmDashがどのような仕組みのCMSで、WordPressと何が違うのかを先に知っておきたい」という方は、概要編の記事「Cloudflare製CMS「EmDash」とは？特徴・WordPressとの違い・基本的な使い方を図解で解説」もあわせてご覧ください。

Node.jsのバージョン確認と導入手順

まずはターミナル（Windowsなら「PowerShell」または「コマンドプロンプト」、Macなら「ターミナル」）を開き、以下のコマンドを入力してEnterキーを押します。

node -v
npm -v

実行結果として v22.16.0 や v24.x.x のように22系以上のバージョン番号が表示されれば準備OKです。
もし「コマンドが見つかりません」と表示されたり、v18 や v20 など古いバージョンが入っていたりする場合は、Node.js公式サイト（nodejs.org）から最新の「LTS（推奨版）」インストーラーをダウンロードしてアップデートしておきましょう。

デプロイ先（Cloudflare Workers と Node.js）の選び方

EmDashのインストーラーを実行すると、途中で「将来どこに公開（デプロイ）するか」を2つの構成から選びます。最初に特徴を知っておくと迷わず選択できます。

• Cloudflare Workers（D1 ＋ R2）構成【迷ったらこちらがおすすめ】
  Cloudflareのエッジ環境でサーバーレス運用するための標準構成です。データベースに「Cloudflare D1」、画像保管に「Cloudflare R2」を使います。なお、この構成を選んでも開発中は自分のパソコン内でローカルエミュレーションとして動作するため、まだCloudflareアカウントを持っていなくても問題なくローカルで試せます。
• Node.js（SQLite ＋ ローカルストレージ）構成
  記事データを手元のSQLiteファイル（data.db 等）、画像をローカルフォルダ（./uploads 等）に保存するシンプルな構成です。一般的なVPSやDockerコンテナ、自社サーバー上で自己ホスト（セルフホスト）したい場合に向いています。

作成コマンドを実行して対話形式でセットアップする

ターミナルでプロジェクト用のフォルダを作りたい場所（デスクトップやドキュメント配下の作業フォルダなど）へ移動し、公式のプロジェクト作成コマンドを実行します。

# npm を使う場合（標準）
npm create emdash@latest

# pnpm を使う場合
pnpm create emdash@latest

初回実行時に Need to install the following packages: create-emdash@... Ok to proceed? (y) と尋ねられたら、y を入力してEnterキーを押します。すると対話形式のセットアップが始まるので、矢印キー（↑↓）とEnterキーで順番に選んでいきましょう。

• Project name?：作成するフォルダ名を入力します（例：my-emdash-blog）。
• Where will you deploy?：Cloudflare Workers または Node.js を選択します。
• Which template?：サイトの初期デザインとなるスターターテンプレートを選びます（下の比較表を参照）。
• Which package manager?：普段使っているもの（迷ったら npm）を選びます。
• Install dependencies?：Yes を選ぶと、必要なライブラリ一式が自動でダウンロードされます。

自動生成されるフォルダ構成と主要ファイルの役割

インストールが完了すると、指定したフォルダの中に以下のようなファイル一式が作られます。どこに何があるかをざっくり把握しておくと、あとからカスタマイズするときに迷いません。

my-emdash-blog/
├── public/              # ファビコンやrobots.txtなどの静的ファイル置き場
├── seed/                # お試し用のサンプル記事データ（シードデータ）
├── src/
│   ├── components/      # ヘッダー・フッター・カードなどの画面パーツ
│   ├── layouts/         # サイト共通のHTML骨格（Layout.astroなど）
│   ├── pages/           # トップページや記事詳細（[slug].astro）などのURLルーティング
│   ├── live.config.ts   # AstroとEmDashのコンテンツデータを繋ぐ設定
│   └── emdash.d.ts      # 投稿スキーマから自動生成されるTypeScript型定義
├── AGENTS.md            # Claude CodeやCursorなどのAIエージェント向け案内ファイル
├── astro.config.mjs     # Astro本体およびEmDash（DB・ストレージ・フォント等）の設定
├── wrangler.jsonc       # Cloudflare Workers / D1 / R2 のデプロイ設定（Cloudflare選択時）
└── package.json         # 利用パッケージと起動・デプロイ用スクリプト定義

WordPressでいう「テーマ（外観テンプレート）」に相当するのが src/layouts/ や src/pages/ の中身で、サイト全体の設定ファイル（wp-config.php に相当するもの）が astro.config.mjs とイメージすると分かりやすいでしょう。

開発サーバーを起動して管理者アカウントとパスキーを登録する

作成したプロジェクトフォルダへ移動し、ローカル開発サーバーを起動します。もし最初からサンプル記事が入った状態で見た目を確認したい場合は、npx emdash seed を実行しておくとデモ用データが投入されます。

# 作成したフォルダへ移動
cd my-emdash-blog

# （任意）サンプル記事データを投入したい場合
npx emdash seed

# ローカル開発サーバーを起動
npm run dev

ターミナルに Local: http://localhost:4321/ と表示されたら起動成功です！ブラウザを開いて次の2つのアドレスへアクセスしてみましょう。

• 公開サイトのトップ画面：http://localhost:4321
• EmDashの管理画面：http://localhost:4321/_emdash/admin

初めて /_emdash/admin を開くと、最初のオーナー（管理者）登録画面が表示されます。表示名（Name）とメールアドレスを入力して登録ボタンを押すと、お使いのOSやブラウザのパスキー（Windows Helloの顔・指紋・PIN認証や、MacのTouch ID、iCloudキーチェーン / Googleパスワードマネージャー等）の登録ポップアップが開きます。承認するだけでパスワードいらずの安全なログインが完了し、管理ダッシュボードが表示されます。

日本語サイト向けに入れておきたいフォント設定

日本語でブログやWebサイトを作る場合は、プロジェクト直下の astro.config.mjs をエディタで開き、emdash({ ... }) のオプションに日本語フォントスクリプト（japanese）を追記しておくと文字表示がきれいに最適化されます。

// astro.config.mjs の設定例（日本語スクリプト対応を追加）
import { defineConfig } from "astro/config";
import emdash from "emdash/astro";

export default defineConfig({
  integrations: [
    emdash({
      fonts: {
        scripts: ["latin", "japanese"],
      },
    }),
  ],
});

新しいブログ記事（Posts）を作成・編集して公開する手順

最初の記事を書いて公開するまでの手順はとてもシンプルです。

• 新規作成画面を開く：左サイドバーの「Posts」をクリックし、画面右上の新規作成ボタン（New Post）を押します。
• タイトルとURLスラッグを設定する：記事タイトルを入力し、設定欄の Slug（URLの末尾になる文字列）には first-emdash-post のような半角英数字とハイフンの分かりやすい名前を付けておくとSEOやシェアの面でも扱いやすくなります。
• リッチテキストエディタで本文を書く：EmDashの本文エディタには軽快な「TipTap」が採用されています。NotionやWordPressのブロックエディタと同じように、行頭で半角スラッシュ「/」を入力するとブロック挿入メニューが開き、見出し・箇条書きリスト・引用・コードブロック・画像などを素早く差し込めます。もちろん、## 見出し や - リスト といったMarkdown風のショートカット入力にも対応しています。
• 下書き保存または公開（Publish）：書きかけの状態で保存したいときは「Draft（下書き）」のまま保存し、完成したら「Publish（公開）」ボタンを押します。公開すると即座に http://localhost:4321 側の記事一覧に反映されます。

※入力した本文は生のHTML文字列ではなく「Portable Text」と呼ばれる安全な構造化JSONデータとしてデータベースに保存されるため、タグの閉じ忘れによるレイアウト崩れや不正スクリプト混入が起きにくい仕組みになっています。

メディアライブラリ（Media）への画像アップロードとアイキャッチ設定

記事中に挿入する図解やアイキャッチ画像は、左メニューの「Media」または記事編集画面内から直接アップロードできます。

• ドラッグ＆ドロップで一括追加：手元のPNG・JPEG・WebPなどの画像ファイルをブラウザ画面へドラッグ＆ドロップするだけでストレージへ保存されます（ローカル開発時はパソコン内、Cloudflare本番時はR2バケットへ自動保存）。
• 代替テキスト（Alt text）の設定：アップロードした画像を選択すると、タイトルや代替テキスト（alt 属性）を編集できます。アクセシビリティ向上や画像検索対策のためにも簡潔な説明を入れておきましょう。
• アイキャッチ画像（Featured Image）の指定：記事編集画面のサイドパネルにあるアイキャッチ設定欄から、メディアライブラリ内の画像をワンクリックで紐付けられます。

カテゴリー・タグ（Taxonomies）と固定ページ・メニューの整理

記事が増えてきたときに欠かせないサイト全体の整理機能も、管理画面の左メニューから直感的に操作できます。

• Taxonomies（カテゴリー・タグ管理）：「Web技術」「お知らせ」などのカテゴリーやタグを作成・編集し、各記事に割り当てることができます。
• Pages（固定ページ作成）：時系列のブログ記事とは別に、「運営者プロフィール（About）」「プライバシーポリシー」「お問い合わせ」といった独立ページを作成できます。
• Menus（ナビゲーションメニュー編集）：サイトのヘッダーやフッターに並べるメニュー項目や表示順を画面上で編集できます。固定ページを追加した際にHTMLコードを毎回書き換えなくて済む便利な機能です。
• Schemas / Users（スキーマ拡張とユーザー権限）：ブログ記事以外にも「制作実績」「FAQ」「イベント情報」といった独自のカスタム投稿タイプ（スキーマ）やカスタムフィールドを追加したり、複数人で運営する場合に「管理者・編集者・寄稿者」などのロール権限を分けてメンバーを追加したりできます。

Astroページで記事一覧と本文を取得・描画する仕組み

選んだテンプレートの src/pages/ フォルダを開くと、.astro という拡張子のファイルが入っています。EmDashでは、以下の2つの関数と1つの描画コンポーネントを覚えておくだけで、サイトのデザインやレイアウトを自由にカスタマイズできます。

• getEmDashCollection("posts")：公開済みの記事一覧をまとめて取得する関数
• getEmDashEntry("posts", slug)：URLのスラッグに一致する1記事分のデータを取得する関数
• <PortableText />：構造化JSONで保存された記事本文をきれいなHTMLに変換して表示するコンポーネント

---
// src/pages/posts/[slug].astro（個別記事ページのシンプルな記述例）
import { getEmDashEntry, decodeSlug } from "emdash";
import { PortableText } from "emdash/ui";

const slug = Astro.params.slug ? decodeSlug(Astro.params.slug) : "";
const { entry: post, error } = await getEmDashEntry("posts", slug);

if (error || !post) {
  return Astro.redirect("/404");
}
---

<article class="post-container">
  <h1>{post.data.title}</h1>
  <div class="post-body">
    <PortableText value={post.data.content} />
  </div>
</article>

PHPの複雑なテンプレートタグを覚えなくても、普段のHTMLやCSS（Tailwind CSSなど）の感覚で <article> 周りのクラスや構造を書き換えるだけで、自分好みのデザインへ手軽に変更できます。

開発と運用で役立つEmDash CLI（npx emdash）主要コマンド早見表

EmDashには専用のコマンドラインツール（npx emdash、または短縮形の npx em）が同梱されています。データベースの状態確認や型定義の更新など、よく使うコマンドを表にまとめました。

Claude CodeやCursorと繋ぐ内蔵MCPサーバーの基本設定

EmDashを起動すると、追加プラグインなしで最初から /_emdash/api/mcp というURLにリモートMCP（Model Context Protocol）サーバーが立ち上がります。
Claude CodeやCursorなどのAI開発ツールを使っている場合は、MCP接続先としてローカル（http://localhost:4321/_emdash/api/mcp）または本番サイトのMCPエンドポイントを登録するだけで、エディタのチャット欄から「下書き記事を3本作成して」「新しいカテゴリーを作って既存記事を整理して」といった操作を自然言語で指示できるようになります。プロジェクト直下の AGENTS.md にもAI向けの設計ルールが記載されているため、AIと一緒にデザイン改修を進めたい方とも相性抜群です。

WranglerでD1とR2を作成して本番公開する流れ

事前にCloudflareの公式サイトで無料アカウントを作成しておき、プロジェクトフォルダのターミナルから以下の順番でコマンドを実行します。

# Cloudflareアカウントへブラウザ経由でログイン認証
npx wrangler login

# 本番用のD1データベースを作成（表示される database_id をメモする）
npx wrangler d1 create my-emdash-db

# 本番用のR2ストレージバケットを作成（画像・メディア保存用）
npx wrangler r2 bucket create my-emdash-media

※Cloudflareダッシュボード側で初めてR2を利用する場合は、一度ブラウザの管理画面からR2機能を有効化（アクティベート）しておくとコマンドがスムーズに通ります。
続いて、プロジェクト直下の wrangler.jsonc を開き、先ほど作成してメモした database_name・database_id と bucket_name を記載します。最後にセッション保護用の暗号化シークレットを登録してデプロイを実行しましょう。

# 暗号化キーをCloudflareのシークレットとして安全に登録（プロンプトでランダム文字列を入力）
npx wrangler secret put EMDASH_ENCRYPTION_KEY

# ビルドしてCloudflare Workers本番環境へデプロイ！
npm run build
npm run deploy

デプロイが完了すると公開用URL（https://プロジェクト名.サブドメイン.workers.dev、または設定した独自ドメイン）が表示されます。公開直後は本番データベースが空の状態なので、第三者にアクセスされる前にすぐ自分で https://公開URL/_emdash/admin を開き、本番用の最初の管理者アカウントとパスキー登録を済ませてください。

インストールや初回起動でつまずいたときのチェックリスト

初めて導入する際に起きやすい疑問と対処法を4点まとめました。エラーが出たときは上から順にチェックしてみてください。

• 作成コマンド実行時に構文エラーやエンジン警告が出る：パソコンに入っているNode.jsのバージョンが古いケースが大半です。node -v を確認し、v22.16以上（推奨はv24 LTS）へ更新してから再度実行してください。
• 管理画面の初回登録でパスキー作成エラーになる：パスキー（WebAuthn規格）はセキュリティ仕様上、http://localhost:4321 または https://（SSL通信）でのみ動作します。http://192.168.x.x:4321 のようにローカルIPアドレス直打ちのHTTP接続で開くとパスキーが拒否されるため、必ず localhost でアクセスしましょう。
• サイトを開いたのにトップページに記事が1件も出ない：初期状態のデータベースに記事が入っていないか、作成した記事が「Draft（下書き）」のままになっている可能性があります。管理画面でステータスを「Published」にして公開するか、npx emdash seed でサンプル記事を投入して表示を確認しましょう。
• 管理画面でカスタムフィールドを足したのにエディタで型エラーが出る：スキーマを変更したあとは、ターミナルで npx emdash types を1回実行すると src/emdash.d.ts が最新状態に更新され、VS Code等のコード補完も正しく効くようになります。

本記事のポイント

• 事前準備はNode.jsだけでOK：PHPやMySQLの環境構築は不要で、Node.js（v22.16以上 / v24 LTS推奨）があればWindows・Macを問わず自分のパソコン1台ですぐ始められる。
• インストールは対話コマンドで数分：npm create emdash@latest でデプロイ先やテンプレート（Blog 等）を選び、npm run dev で起動して /_emdash/admin からパスキーを登録するだけで初期設定が完了する。
• 親しみやすい管理画面操作：「/」入力でブロックを呼び出せるエディタでの記事執筆、ドラッグ＆ドロップでの画像管理、カテゴリー・固定ページ・ナビメニューの整理までブラウザ上で直感的に行える。
• 拡張性と本番公開もシンプル：Astroコンポーネントによる自由なデザイン調整、npx emdash CLIや内蔵MCPサーバーによるAI連携、さらにCloudflare（Workers・D1・R2）へのサーバーレス公開まで一貫した流れで進められる。

参考リンク・関連記事

• Cloudflare製CMS「EmDash」とは？特徴・WordPressとの違い・基本的な使い方を図解で解説（eguchi.net）
• EmDash 公式サイト・ドキュメント（emdashcms.com）
• GitHub – emdash-cms/emdash 公式リポジトリ