制作の裏側 2026.10.20

コマンド1つで、自分のパソコンにサイトを立てる【AI 初心者でもわかる エムダッシュの作り方 #2】

コマンド1つで、自分のパソコンにサイトを立てる【AI 初心者でもわかる エムダッシュの作り方 #2】

公開日:2026-10-20 / 最終更新日:2026-10-20

EmDash(エムダッシュ)は、コマンドを1つ打てば自分のパソコンで動きます。所要時間は、待ち時間を入れて約2分でした。この連載では、AI を使い始めたばかりの人でも EmDash でサイトを立てて公開できるように、1日1本ずつ手順を書いていきます。第2回は「手元で動かして、管理画面の入口まで行く」までです。

この記事で分かること

  • EmDash が何か(WordPress と何が違うか)を3行で
  • 自分のパソコンで EmDash のブログを動かす手順(コマンドは3つ)
  • 実際にやってつまずきそうだった所と、その避け方

EmDash とは:Cloudflare が作った、新しいサイトの仕組み

EmDash は、Cloudflare が 2026年4月に出した CMS(記事を書いて公開するための仕組み)です。9月に 1.0 が出て、この記事を書いた 10月20日時点の最新は 1.3.1 でした。

WordPress との違いは、ざっくり3つです。

比べる点 WordPress EmDash
作り PHP とデータベース Astro(サイトを作る道具)と TypeScript
プラグイン サイトの中で何でもできる 1つずつ囲いの中で動く(安全のため)
AI との相性 後から足す 最初から AI 向けの説明書きが入っている

3つ目が、この連載で AI 初心者向けにした理由です。EmDash でサイトを作ると、AI に読ませる説明書き(AGENTS.md)と、AI が EmDash の公式ドキュメントを読みに行ける設定(.mcp.json)が最初から入ります。あとで「AI に頼んで見た目を変える」回で使います。

用意するもの:Node.js だけ

必要なのは Node.js(JavaScript をパソコンで動かす道具)だけです。公式の手順では 22.16 以上が条件で、Cloudflare のアカウントもデータベースも、この段階では要りません。

ターミナル(Mac なら「ターミナル」アプリ)を開いて、次を打ちます。

node --version

v22.16.0 以上の数字が出れば準備完了です。出ない時は、Node.js の公式サイトから LTS 版を入れてください。

手順:コマンド3つで動く

1. サイトを作る

npm create emdash@latest my-blog -- --template blog --platform node --yes

my-blog はフォルダの名前で、好きに変えて大丈夫です。後ろの3つは「ブログの見た目で」「自分のパソコン(Node.js)で動かす」「質問は全部おすすめの答えで」という意味です。付けずに打つと、1つずつ質問されます。

私の環境では、部品の取り込みまで含めて1分15秒で終わりました。最後に Done! Your EmDash project is ready at my-blog と出れば成功です。

2. フォルダに入って起動する

cd my-blog
npm run dev

http://localhost:4321 のような URL が出たら、ブラウザで開きます。

EmDash のブログテンプレートのトップページ。「My Blog」の見出しと「No posts yet」の表示

まだ記事が無いので「No posts yet」と出ます。これで、サイトはもう動いています。

3. 管理画面の入口を開く

URL の後ろに /_emdash/admin を付けて開くと、最初の設定画面になります。表示は日本語でした。

EmDash の初期設定画面。サイトタイトル・キャッチフレーズと、始め方の3つの選択肢

始め方は3つから選べます。

  • Sample content:見本の記事とページが入った状態で始める(初めてならこれ)
  • Empty site:記事の型だけ入った空のサイトで始める
  • Import an existing EmDash site:別の EmDash から書き出したデータを読み込む

「続行」を押すと、メールアドレスと名前を入れる画面になります。

アカウント作成の画面。メールアドレスと名前の入力欄

つまずきそうな所:パスワードではなく「パスキー」でログインする

最後の画面で、EmDash はパスワードを作らせません。代わりに「パスキー」を作ります。パスキーは、指紋や顔、パソコンのパスワードで本人確認する仕組みで、Mac なら Touch ID が使えます。

パスキー作成の画面。「Create passkey」のボタンと、macOS のパスキー確認が開くという案内

ここで注意が1つあります。パスキーは、作った時の URL(この場合は localhost)と結びつきます。あとで本番の URL に移した時は、本番側でもう一度作ることになります。パスワードを覚えなくていい代わりに、「どの URL で作ったか」を意識しておくと迷いません。

ほかに、私の環境(Node.js 24)では、部品を取り込む時に「エンジンのバージョンが合わない」「この部品は古い」という警告がいくつか出ました。どれも警告で、作成は最後まで進み、サイトも動きました。赤い ERR! で止まった時だけ、Node.js のバージョンを見直してください。

ここまでにかかった時間とお金

  • 時間:コマンドを打ってからトップページが出るまで約2分(取り込み1分15秒+起動)
  • お金:0円(自分のパソコンで動かしているだけ)
  • 作られたもの:my-blog フォルダ1つ。記事は同じフォルダの data.db(SQLite というファイル1つのデータベース)に、画像は uploads に入ります

まとめ

  • EmDash は Cloudflare が作った新しい CMS で、AI 向けの説明書きが最初から入っている
  • npm create emdash@latest → npm run dev で、自分のパソコンにブログが立つ
  • 管理画面は /_emdash/admin。ログインはパスワードではなくパスキー
  • ここまでは Cloudflare のアカウントも費用も要らない

次回は、エムダッシュを置く先になる Cloudflare(クラウドフレア)が何をしている会社で、何ができて、どこまで無料かを見ます。

出典

  • EmDash 公式ドキュメント「Create your first EmDash site」 https://docs.emdashcms.com/getting-started/
  • Cloudflare ブログ「EmDash 1.0: the stable CMS with a secure plugin registry」 https://blog.cloudflare.com/emdash-cms-plugin-registry/
  • Cloudflare ブログ「Introducing EmDash — the spiritual successor to WordPress that solves plugin security」 https://blog.cloudflare.com/emdash-wordpress
  • npm「emdash」 https://www.npmjs.com/package/emdash

サイトの引っ越しや、EmDash・ヘッドレス CMS での制作のご相談は、お問い合わせからどうぞ。

ホームページの「困った」、聞かせてください

お見積もりは無料です。内容が固まっていなくても大丈夫。