はじめに
4月くらいに書いた記事をそのまま投稿するのを忘れていたので、6月ですけど投稿します...
Xを見ていると、とても興味深いポストを見つけてしまいました。(まだ春休みの宿題が大量に残ってるのに...)
EmDashがとてもおもしろそうだったので使ってみることにしました。
EmDashとは
まずEmDashとは何かGrokにまとめてもらいました。
Cloudflareが開発した、WordPressの現代版後継CMSです。WordPressの「誰でも簡単にサイトを作れる」という精神を継承しつつ、完全にTypeScriptで書き直し、サーバーレス設計にしています。最大の特徴は、プラグインをサンドボックス化してセキュリティ問題を根本的に解決した点です。Astroを基盤に使い、軽くて高速。オープンソース（MITライセンス）で公開されており、WordPressの使いやすさを残しつつ、現代のウェブ環境に最適化した次世代ツールです。現在はまだ開発初期ですが、Cloudflareの本気プロジェクトとして注目されています。
公式サイト(?)はこちら
https://emdashcms.com/
GitHubリポジトリはこちら
https://github.com/emdash-cms/emdash
実際に使ってみる
実際にプロジェクトを作成してページのデプロイまでやってみました。
EmDashプロジェクトの作成
ターミナル上で以下のコマンドを実行します。
npm create emdash@latest
そうすると以下のような質問をされます。
— E M D A S H —
┌ Create a new EmDash project
│
◆ Project name?
│ my-site
└◆ Where will you deploy?
│ ● Cloudflare Workers (D1 + R2)
│ ○ Node.js
└◆ Which template?
│ ● Blog (A blog with posts, pages, and authors)
│ ○ Starter
│ ○ Marketing
│ ○ Portfolio
│ ○ Blank
└◆ Which package manager?
│ ○ pnpm
│ ● npm
│ ○ yarn
│ ○ bun
└◆ Install dependencies?
│ ● Yes / ○ No
└
完成すると以下のような感じになります。
— E M D A S H —
┌ Create a new EmDash project
│
◇ Project name?
│ econanringo-blog
│
◇ Where will you deploy?
│ Node.js
│
◇ Which template?
│ Blog
│
◇ Which package manager?
│ npm
│
◇ Install dependencies?
│ Yes
│
◇ Project created!
│
◇ Dependencies installed!
│
◇ Next steps ──────────╮
│ │
│ cd econanringo-blog │
│ npm run dev │
│ │
├───────────────────────╯
│
└ Done! Your EmDash project is ready at econanringo-blog
Where will you deployのところで、Cloudflareの選択をしても良かったのですが、無料で作ってみたかったので、とりあえず自分の環境(Node.js)にデプロイしてみることにしました。
実際に動かしてみる
プロジェクトを開いてnpm run devをしてみると、写真のような画面が出てきました。
まあ何もポストをしていないのでこのような画面になるので、とりあえずCreate a Postボタンを押してみました。
すると、adminページの設定画面が出てきたので、とりあえず設定してみました。なんとパスキーも設定できるらしくてびっくりしました。
サインインするとついに管理画面が表示されました！
WordPressの後継CMSなだけあって、デザインもWordPressに似ていました。
ページを作る画面とポストを作る画面はそれぞれこんな感じです。
これ以外にも結構機能もたくさんあって良さげでした。
サイトの画面もデフォルトでこんな画面になっていて、完成度が高かったです。
データベースを設定する
最初の設定で、Cloudflareのデータベースを選ばなかったので無料で使えるSupabaseを使おうと思います。AIに「データベースにSupabaseを使って」とプロンプトを打つと、ちゃんとSupabase用のプログラムを作ってくれました。どうやらastro.config.mjsを編集していました。環境変数(Supabase関連)は、.envを利用して保存しました。
SUPABASE_URL=https://your-supabase-id.supabase.co
SUPABASE_STORAGE_BUCKET=your-storage-bucket-name
SUPABASE_REGION=your-bucket-region
SUPABASE_S3_ACCESS_KEY_ID=your-s3-access-key-id
SUPABASE_S3_SECRET_ACCESS_KEY=your-s3-secret-access-key
DATABASE_URL=postgresql://postgres:your-supabase-password@db.your-supabase-id.supabase.co:5432/postgres
SupabaseはデータベースもストレージもFree Tierがあるので愛用しています。
DATABASE_URLは、DirectのTransaction Poolerを使うとうまく使えました。
データベースのリージョンが悪かったのか原因はまだ特定していませんが、少し読み込みに時間がかかってしまいました。ここは後ほど改善していきたいと思います。
デプロイする
本当は実際にレイアウトなどを変更しても良かったのですが、面倒になってしまったので、すぐにデプロイすることにしました。デプロイはとりあえずVercelにすることにしました。
おわりに
Cloudflareが作ったCMS「EmDash」を使ってみました
リポジトリを公開しておきますので、ぜひSupabaseと接続する際などに参考にしていただけると幸いです。
GitHubリポジトリ
https://github.com/econanringo/econanringo-blog-demo
デプロイしたページ
https://econanringo-blog-demo.vercel.app/
最後までご覧いただきありがとうございます。
ぜひSNSのフォローもよろしくお願いします！
https://x.com/econanringo
https://x.com/yoshi_dev1212