蘇我Webスタジオ

Appearance

EmdashでWebサイトを構築する手順 ​

2026/05/06に公開

EmdashAstroCloudflare

Emdashを使ってWebサイトを構築するまでの流れを整理します。 本記事では、まずEmdashが何かを簡単に確認し、その後にCLIでプロジェクトを作成し、Cloudflare Workers、D1、R2を使って本番環境へデプロイするまでの手順を紹介します。

今回構築したデモサイトはこちらです。

Emdashとは何か ​

EmdashはAstroをベースにしたTypeScript製のCMSです。 WordPressのような管理画面やプラグイン拡張を、Cloudflare Workers、D1、R2などの現代的な構成で再設計することを目指しています。

Cloudflareのブログでは、EmdashはWordPressの精神的後継として紹介されています。 ただし現時点ではまだアルファ版のため、本番利用というよりは、今後のCMSの選択肢として検証する段階のツールです。

構築前に必要なもの ​

今回はローカルで試すだけではなく、実際に本番環境へデプロイします。 構成は以下です。

  • アプリケーション: Cloudflare Workers
  • データベース: Cloudflare D1
  • メディア保存: Cloudflare R2

事前にCloudflareアカウント、Node.js、npmを用意します。 デプロイ時にはCloudflareへログインできる状態にしておきます。

今回はプラグインを利用しない構成で進めます。 そのため、Dynamic Workersが必要なsandboxed pluginやmarketplace機能は外し、Cloudflare Workersの無料プランでデプロイできる構成に調整します。

1. プロジェクトを作成する ​

Emdashのプロジェクトは、以下のコマンドで作成します。

sh
npm create emdash@latest

初回実行時は create-emdash のインストール確認が表示されるため、y を入力して進めます。 その後、対話形式でプロジェクトの設定を選択します。

txt
Project name? emdash-blog
Where will you deploy? Cloudflare Workers
Which template? Blog
Which package manager? npm
Install dependencies? Yes

今回はCloudflare Workersへデプロイし、Blogテンプレートをnpmで利用する構成にしました。 依存関係もこの時点でインストールします。

sh
cd emdash-blog

まずは生成された構成を確認し、package.json、astro.config.mjs、wrangler.jsonc などの設定ファイルを見ておきます。

2. ローカルで確認する ​

プロジェクトを作成したら、必要に応じて開発サーバーを起動します。

sh
npm run dev

通常は http://localhost:4321 でサイトを確認できます。 管理画面は次のURLです。

txt
http://localhost:4321/_emdash/admin

ただし今回の検証では、初期セットアップはローカル起動時ではなく、Workersへデプロイした後の本番URLで必要になりました。 ローカル起動は表示確認やデザイン調整のための補助として考えるとよさそうです。

3. デザインはテンプレートのまま利用する ​

今回はEmdashの構築とCloudflare Workersへのデプロイを確認することを目的にしたため、デザインはBlogテンプレートのまま利用しました。 見た目の調整は行わず、生成された状態でサイト本体と管理画面が動くかを優先して確認しています。

4. Cloudflare Workersへデプロイする ​

ローカルの変更内容を確認したら、CLIからWorkersへデプロイします。 今回はプロジェクトに用意されているnpm scriptを使います。

sh
npm run deploy

今回の実行では、Cloudflare APIへのリクエストで以下のエラーになりました。

txt
✘ [ERROR] A request to the Cloudflare API (/accounts/1b69d7370bad041e23a9bb73514ff854/workers/scripts/my-emdash-site) failed.

  In order to use Dynamic Workers, you must switch to a paid plan at
  https://dash.cloudflare.com/1b69d7370bad041e23a9bb73514ff854/workers/plans. [code: 10195]

  If you think this is a bug, please open an issue at:
  https://github.com/cloudflare/workers-sdk/issues/new/choose


🪵  Logs were written to "/Users/kira/Library/Preferences/.wrangler/logs/wrangler-2026-05-06_10-26-48_278.log"

今回はプラグインを利用しない前提でしたが、生成された設定ではDynamic Workersを使う扱いになっているようです。 このため、無料プランのままではデプロイできず、Paid Workers環境が必要というエラーで止まりました。

原因は、Emdashのsandboxed pluginやmarketplace機能がCloudflareのDynamic Workersを必要とするためです。 今回はサイト本体と管理画面を無料プランで動かしたいので、Dynamic Workersに関係する設定を外します。

まず astro.config.mjs からsandboxed plugin関連の設定を削除します。

js
sandboxed: [webhookNotifierPlugin()],
sandboxRunner: sandbox(),
marketplace: "https://marketplace.emdashcms.com",

importも整理します。

js
import { d1, r2 } from "@emdash-cms/cloudflare";

最終的なEmdash設定は、D1、R2、通常のpluginだけを使う形にします。

js
emdash({
  database: d1({ binding: "DB", session: "auto" }),
  storage: r2({ binding: "MEDIA" }),
  plugins: [formsPlugin()],
});

次に wrangler.jsonc からWorker Loaderを削除します。

jsonc
"worker_loaders": [
  {
    "binding": "LOADER"
  }
]

Worker Loaderはplugin sandboxingに使われるため、無料プランでデプロイする今回は外します。

さらに src/worker.ts からsandbox用のexportを削除します。

ts
import handler from "@astrojs/cloudflare/entrypoints/server";

export default handler;

Cloudflare側のリソースも確認します。 最初のデプロイ時に SESSION 用のKV namespaceは作成済みだったため、wrangler.jsonc に既存のnamespace IDを固定しました。

jsonc
"kv_namespaces": [
  {
    "binding": "SESSION",
    "id": "55fc507cb19a4b3fa744aa897c209c05"
  }
]

D1 databaseはまだ作成されていなかったため、以下のコマンドで作成しました。

sh
npx wrangler d1 create my-emdash-site

作成されたdatabase IDを wrangler.jsonc に設定します。

jsonc
"d1_databases": [
  {
    "binding": "DB",
    "database_name": "my-emdash-site",
    "database_id": "4c0abc8b-24d3-4974-8313-018fa954e017"
  }
]

MEDIA 用のR2 bucketは最初のデプロイ時に作成済みだったため、既存の設定をそのまま使いました。

jsonc
"r2_buckets": [
  {
    "binding": "MEDIA",
    "bucket_name": "my-emdash-media"
  }
]

その後、設定を見直して再度デプロイし、以下のURLで公開できました。

txt
https://emdash-jp.com

この対応では、Emdash marketplace、sandboxed webhook notifier plugin、Worker Loader、Dynamic Workersを使うplugin sandboxを無効化しています。 一方で、サイト本体、Emdash管理画面、D1、R2、KVは利用できます。 sandboxed pluginやmarketplaceを使いたい場合は、Cloudflare Workersの有料プランに切り替えてDynamic Workersを利用できるようにする必要があります。

5. デプロイ後に初期セットアップを行う ​

Workersへデプロイした後、公開URLへアクセスするとEmdashの初期セットアップが必要になります。 今回の場合、ローカル起動時ではなく、デプロイ後の本番URLでセットアップを行う流れでした。

管理画面に入ったら、サイト運用に必要な基本情報を設定します。 テンプレートやバージョンによって画面構成は変わる可能性がありますが、最初に確認したい項目は以下です。

  • サイトタイトル
  • 管理ユーザー
  • 投稿や固定ページのコレクション
  • カテゴリーやタグ
  • メニュー
  • メディアライブラリ

Emdash初回起動後のセットアップ画面

Emdash初回セットアップの入力画面

セットアップが完了すると、Emdashのダッシュボードが表示されます。

Emdashの管理画面

本番環境では、次の動作を実際に確認します。

  • 管理画面へログインできる
  • 記事を新規作成できる
  • 作成した記事が公開側に反映される
  • 画像をアップロードできる
  • アップロードした画像が公開ページで表示される
  • 再デプロイ後もD1とR2のデータが残る

ここまで確認できれば、Emdashを使ったWebサイトをCloudflare Workers、D1、R2の構成で本番公開できた状態になります。

6. 独自ドメインを設定する ​

最後にCloudflare Workersに独自ドメインを設定します。 今回は公開URLを https://emdash-jp.com にしました。

独自ドメイン設定後は、管理画面のURL、画像URL、OGP、サイトマップ、RSSのURLが本番ドメインで正しく動くことを確認します。

まとめ ​

Emdashは、WordPress的なCMS体験をAstroとCloudflare中心の構成で再設計したCMSです。 管理画面やプラグイン拡張を備えつつ、TypeScriptやサーバーレス環境に寄せた設計になっているため、新しくCMS付きWebサイトを構築する選択肢として注目できます。

今回は npm create emdash@latest でプロジェクトを作成し、Blogテンプレートをそのまま使って、npm run deploy によるWorkersへのデプロイ、デプロイ後の初期セットアップまでを整理しました。 Cloudflare Workers、D1、R2の構成をCLI中心で進められるため、まずは生成された設定に沿ってデプロイするのが分かりやすいです。

参考リンク ​

Last updated: