※本記事はアフィリエイト広告（PR）を含みます。

EmDash（エムダッシュ）は、Astroというフレームワークで作られた新しいCMS（ブログやホームページを管理画面から更新できる仕組み）です。Cloudflareの上で動かせるので、サーバーを借りなくても、無料枠の範囲で自分のサイトを公開できます。

この記事では、WEB制作が初めての方でも迷わないように、独自ドメインの取得から、Cloudflareへの公開、管理画面の初期設定までを順番に説明します。ゴールは「自分のドメイン（例：example.com）でEmDashのサイトが表示され、記事を投稿できる状態」です。

サイトの公開ができたら、続けて【フォーム編】お問い合わせフォームとResendでメール送信で、お問い合わせフォームを設置する方法も紹介しています。

EmDashを独自ドメインで公開するまでの6ステップ

EmDashとは

EmDashは、記事やページを管理画面から編集できるCMSです。WordPressと同じように「管理画面で書いて、公開ボタンを押す」という使い方ができますが、仕組みは大きく違います。

  • サーバーがいらない：CloudflareのWorkersという仕組みの上で動くため、レンタルサーバーの契約が不要です
  • 表示が速い：世界中にあるCloudflareの拠点からページが配信されます
  • ログインはパスキー：パスワードではなく、Touch IDやWindows Helloなどの生体認証でログインします
  • データの保存先もCloudflare：記事などのデータはD1（データベース）、画像はR2（ファイル置き場）に保存されます

WordPressと比べると、プラグインやテーマの数はまだ少なく、デザインの調整にはHTMLやCSSの知識が少し必要です。その代わり、サーバーの管理やセキュリティ更新の手間がほとんどかかりません。

全体の構成

最初に、これから作るサイトの全体像を見ておきましょう。

EmDashをCloudflareで動かす全体構成
  • 独自ドメイン（Xserverドメインで取得）：サイトの「住所」です
  • Cloudflare DNS：ドメインにアクセスした人を、正しい場所へ案内する係です
  • Cloudflare Workers：EmDashのプログラムが動く場所です
  • D1：記事やサイト設定を保存するデータベースです
  • R2：アップロードした画像を保存する場所です

ドメインはXserverドメインで取得し、管理（DNS）はCloudflareに任せる、という組み合わせにします。

用意するもの・かかる費用

  • パソコン：Mac・Windowsのどちらでも大丈夫です
  • Node.js 22以上：EmDashを動かすためのソフトです（後で確認方法を説明します）
  • Cloudflareアカウント：無料で作れます
  • 独自ドメイン：Xserverドメインで取得します。.comなら取得・更新とも年1,721円です（2026年4月時点の公式情報。最新の価格は公式サイトで確認してください）
  • クレジットカード：画像保存用のR2を有効にするときに登録が必要です。無料枠の範囲なら請求はありません

Cloudflare Workersの無料プランでは、1日10万リクエストまで使えます。個人ブログや小さな会社のサイトなら、ほとんどの場合は無料枠に収まります。つまり、最低限かかる費用はドメイン代だけです。

Step 1　Xserverドメインで独自ドメインを取得する

まずはサイトの住所になる独自ドメインを取得します。この記事では、次の理由からXserverドメインをおすすめします。

  • 画面もサポートも日本語なので、初めてでも迷いにくい
  • .comなどの主要なドメインが、取得時だけでなく更新時も手頃な価格
  • 後の手順で必要になる「ネームサーバーの変更」が、管理画面から簡単にできる

Xserverドメインの公式サイトで、使いたいドメインが空いているか調べる

手順は次のとおりです。

  1. 公式サイトの検索窓に、使いたいドメイン名（例：my-site）を入力して検索します
  2. 空いている種類（.com、.jpなど）にチェックを入れて、お申し込み画面へ進みます
  3. Xserverアカウントを作成（すでにある方はログイン）します
  4. 支払い方法を選んで申し込みを完了します

申し込み後、Xserverアカウントの「ドメイン」のメニューに、取得したドメインが表示されていれば完了です。

Step 2　Cloudflareのアカウントを作り、R2を有効にする

次に、サイトを動かすCloudflareのアカウントを作ります。

  1. Cloudflareのダッシュボードを開き、メールアドレスとパスワードを入力して登録します
  2. 届いた確認メールのリンクを開いて、メールアドレスを認証します
  3. ダッシュボードの左メニューから「R2 Object Storage」を開きます
  4. 案内に沿って支払い情報（クレジットカード）を登録し、R2を有効にします

R2は画像を保存するために使います。毎月10GBまでの保存は無料枠に含まれるので、ブログの画像程度なら費用はかかりません。

Step 3　パソコンでEmDashのサイトを作る

ここからはパソコンの「ターミナル」（Windowsの場合は「PowerShell」）を使います。黒い画面に文字を入力して操作するアプリです。

Node.jsのバージョンを確認する

ターミナルを開いて、次のコマンドを入力し、Enterキーを押します。

node -v

「v22.〇〇.〇」のように22以上の数字が表示されればOKです。「command not found」と出る場合や、数字が22より小さい場合は、Node.jsの公式サイトからLTS版（推奨版）をダウンロードしてインストールしてください。

EmDashのプロジェクトを作る

次のコマンドを入力します。

npm create emdash@latest

いくつか質問されるので、次のように答えます。矢印キーで選んでEnterキーで決定します。

  • プロジェクト名：好きな名前（例：my-site）。同じ名前のフォルダが作られます
  • デプロイ先：Cloudflare（Workers）を選びます
  • テンプレート：今回はシンプルな「Starter」を選びます。ブログ向けなどデザイン済みのテンプレートもあります
  • パッケージマネージャー：分からなければnpmを選びます
  • 依存関係をインストールするか：Yesを選びます

パソコン上で動かしてみる

作成したフォルダに移動して、開発用のサーバーを起動します。

cd my-site
npm run dev

ブラウザで http://localhost:4321 を開くと、サイトが表示されます。管理画面は http://localhost:4321/_emdash/admin です。ここで作った記事はパソコンの中だけのデータなので、自由に試してみてください。終了するときは、ターミナルでControlキーとCキーを同時に押します。

Step 4　Cloudflareに公開する（最初のデプロイ）

パソコンで作ったサイトを、Cloudflareにアップロードします。この作業を「デプロイ」と呼びます。

まず、ターミナルからCloudflareにログインします。ブラウザが開くので、「Allow（許可）」を押してください。

npx wrangler login

続けて、サイトを組み立てて（ビルド）、アップロードします。

npm run build
npx wrangler deploy

初めてのデプロイでは、記事を保存するD1データベースと、画像を保存するR2バケットが自動で作られます。完了すると、ターミナルに「https://my-site.〇〇.workers.dev」のようなURLが表示されます。このURLを開いてサイトが表示されれば、公開は成功です。

なお、管理画面の初期設定（Step 6）は、まだしないでおきましょう。ログインに使うパスキーはURL（ドメイン）ごとに登録されるため、独自ドメインをつないでから設定したほうが後で困りません。

Step 5　独自ドメインをつなぐ

いよいよ、Step 1で取得したドメインでサイトを表示させます。少し手順が多いですが、流れは下の図のとおりです。

独自ドメインをCloudflareのサイトにつなぐ流れ

5-1　Cloudflareにドメインを追加する

  1. Cloudflareのダッシュボードで「ドメインを追加」（Add a domain）を押します
  2. 取得したドメイン（例：example.com）を入力して進みます
  3. プランは「Free（無料）」を選びます
  4. 最後に、Cloudflareのネームサーバーが2つ表示されます（例：〇〇.ns.cloudflare.com）。この2つをメモしておきます

5-2　Xserverでネームサーバーを変更する

ドメインの管理をCloudflareに任せるための設定です。

  1. Xserverアカウントにログインし、「ドメイン」のメニューから対象のドメインを選びます
  2. 「ネームサーバー設定」を開きます
  3. 「その他のサービスで利用する」を選び、ネームサーバー1と2に、5-1でメモしたCloudflareのネームサーバーを入力します
  4. 確認画面に進み、設定を確定します

変更が反映されるまで、数時間から最大72時間ほどかかることがあります。反映されると、Cloudflareのダッシュボードでドメインのステータスが「アクティブ」になり、メールでもお知らせが届きます。

5-3　Workerに独自ドメインを設定する

ドメインがアクティブになったら、Step 4で公開したサイト（Worker）に独自ドメインを割り当てます。方法は2つあり、どちらか一方でOKです。

方法A：ダッシュボードで設定する

Cloudflareのダッシュボードで「Workers & Pages」を開き、作成したWorkerを選びます。「設定」の「ドメインとルート」で「追加」を押し、「カスタムドメイン」にドメイン（例：example.com）を入力します。

方法B：設定ファイルに書く

プロジェクトのフォルダにある wrangler.jsonc に、次のように追記します。設定がファイルに残るので、後から見返しやすいのが利点です。

"routes": [
  { "pattern": "example.com", "custom_domain": true }
]

5-4　サイトのURLを設定して、もう一度デプロイする

EmDashに「このサイトの正式なURLはこれです」と教えておきます。wrangler.jsonc の vars に、次の1行を追加してください（vars がなければ作ります）。

"vars": {
  "EMDASH_SITE_URL": "https://example.com"
}

保存したら、もう一度ビルドとデプロイをします。

npm run build
npx wrangler deploy

ブラウザで https://example.com を開いて、サイトが表示されれば成功です。

Step 6　管理画面の初期設定をして、最初の記事を書く

最後に、独自ドメインの管理画面を開いて初期設定をします。

  1. https://example.com/_emdash/admin を開くと、セットアップ画面が表示されます
  2. サイト名と管理者のメールアドレスを入力します
  3. パスキーを登録します。Macなら Touch ID、WindowsならWindows Hello、またはスマートフォンで登録できます

登録が終わると管理画面に入れます。「投稿」から新しい記事を作り、タイトルと本文を入力して「公開」を押せば、サイトに記事が表示されます。

検索エンジンに表示されるようにする

セットアップした直後のサイトは、検索エンジン（Googleなど）に表示されない設定になっています。準備ができたら、管理画面の設定で、検索エンジンへの表示を許可するように切り替えてください。

つまずきやすいポイント

コマンドを実行するとエラーが出る

多いのはNode.jsのバージョンが古いケースです。node -v で22以上になっているか確認してください。Node.jsをインストールし直した場合は、ターミナルをいったん閉じて開き直します。

独自ドメインを開いてもサイトが表示されない

ネームサーバーの変更がまだ反映されていない可能性があります。Cloudflareのダッシュボードで、ドメインのステータスが「アクティブ」になっているか確認してください。反映には最大72時間ほどかかることがあります。

ファイルを直したのにサイトが変わらない

デプロイの前に npm run build を実行したか確認してください。ビルドをしないと、古い状態のままアップロードされます。

管理画面にログインできない

パスキーは登録したドメインでしか使えません。workers.dev のURLではなく、独自ドメインの管理画面を開いているか確認してください。

まとめ

お疲れさまでした。ここまでの手順を振り返ってみましょう。

  1. Xserverドメインで独自ドメインを取得した
  2. Cloudflareのアカウントを作り、R2を有効にした
  3. npm create emdash@latest でサイトを作った
  4. wrangler deploy でCloudflareに公開した
  5. ネームサーバーを変更して、独自ドメインをつないだ
  6. 管理画面の初期設定をして、記事を公開した

EmDashとCloudflareの組み合わせなら、費用はほぼドメイン代だけで、自分のサイトを持てます。まだドメインを持っていない方は、まず使いたい名前が空いているか調べてみてください。

Xserverドメインで独自ドメインを検索する

サイトが公開できたら、次はお問い合わせフォームを付けてみましょう。メール送信サービスのResendを使って、フォームの内容をメールで受け取る方法を【フォーム編】お問い合わせフォームとResendでメール送信で解説しています。

Claude CodeやCodexなどのAIに、サイトの構築や記事の更新を手伝ってもらう方法は、【AI活用編】MCPサーバーでClaude Code・Codexからサイトを構築・更新するで紹介しています。