はじめてのEmDashサイト作成
このページで分かること
- StarterテンプレートからNode.jsのサイトを作り、SQLiteとローカルのメディアストレージを使って、クラウドのアカウントなしで動かす手順
- セットアップウィザードでサイト情報と管理者を登録し、サンプルの投稿のタイトルを変えて公開するまでの操作
- 作成されたプロジェクトで
astro.config.mjs、src/live.config.ts、seed/seed.json、.envがそれぞれ担う役割
このページの目次
このチュートリアルでは、StarterテンプレートからNode.jsのサイトを作成します。作成したサイトはSQLiteとローカルのメディアストレージを使うため、クラウドのアカウントがなくても最後まで進められます。
前提条件
Node.js 22.16以上とnpmをインストールします。先に進む前に、インストールされているNode.jsのバージョンを確認します。
node --version
v22.16.0 以降のバージョンが表示されれば問題ありません。
サイトの雛形を作る
-
Node.jsのStarterテンプレートから
my-emdash-siteを作成します。npm create emdash@latest my-emdash-site -- --template node:starter --pm npm --yesnode:starterを指定すると、PostsとPagesを持つ汎用のサイトが作られます。作成ツールは依存パッケージをインストールし、自動生成したEMDASH_ENCRYPTION_KEYを.envファイルに書き込みます。.envはGitの管理対象から除外されています。依存パッケージのインストールに失敗しても、プロジェクトのファイルは残ります。作成ツールが表示する再試行のコマンドを実行してから先に進みます。
-
プロジェクトのディレクトリに移動し、開発サーバーを起動します。
cd my-emdash-site npm run devこのターミナルは開いたままにしておきます。AstroがローカルのサイトのURLを表示します。通常は
http://localhost:4321/です。
やさしい解説
WordPressでは、サーバーにPHPとデータベースを用意してからインストールします。このチュートリアルでは、1つのコマンドでサイトの雛形が作られ、データベースにはパソコン上のファイル（SQLite）を使います。そのため、クラウドのアカウントやデータベースサーバーを用意しなくても試せます。npm run dev で起動した開発サーバーは、ターミナルを閉じると止まるため、作業中は開いたままにします。
初期設定を完了する
http://localhost:4321/_emdash/admin/ を開きます。新しいサイトでは、セットアップウィザードに移動します。
-
「サイトタイトル」と、必要に応じて「キャッチフレーズ」を入力します。「サンプルコンテンツを含める（新しいサイトに推奨）」は選択したままにして、テンプレートのWelcome投稿とAboutページがある状態から始めます。「続行」を選択します。
-
「メールアドレス」と、必要に応じて「名前」を入力し、「続行」を選択します。
-
ブラウザーに認証情報の確認画面が表示されたら、パスキーを登録します。登録が終わったら「Open the dashboard」を選択します。
ダッシュボードが開き、ナビゲーションに「Posts」と「Pages」が表示されます。セットアップウィザードは、Starterテンプレートのコンテンツモデルとサンプルコンテンツを、ローカルのSQLiteデータベースに適用しています。
変更を公開する
-
「Posts」を開き、「Welcome」を開きます。
-
タイトルを
Hello from EmDashに変更し、「保存」を選択します。 -
「Publish changes」を選択します。保存した下書きが、訪問者に表示される版になります。
-
別のタブで
http://localhost:4321/を開きます。トップページに Hello from EmDash が表示されます。
Starterテンプレートは、Astroがトップページを描画するときに getEmDashCollection("posts") を呼び出します。ページを再読み込みすると、実行時にEmDashから公開済みの版を読み込みます。
やさしい解説
WordPressと同じく、「保存」しただけでは訪問者に見える内容は変わらず、公開の操作をして初めて反映されます。このテンプレートのトップページは、表示されるたびにEmDashから公開済みの記事を読み込みます。そのため、公開したあとにページを再読み込みするだけで、変更したタイトルが表示されます。サイトをビルドし直す必要はありません。
生成されたサイトの仕組み
雛形として作られるのは通常のAstroプロジェクトで、EmDashは3か所で接続されています。
astro.config.mjs は、サーバーでの描画（サーバーレンダリング）とNode.jsのアダプターを有効にします。また、管理画面のためにReactを登録し、EmDashにSQLiteのデータベースと、アップロードしたメディアを置くディレクトリを渡します。src/live.config.ts ファイルは、データベースに保存されたコンテンツを、Astroのライブコンテンツコレクション（Live Content Collections）につなぎます。
そのうえで、トップページが posts コレクションを取得します。このクエリは、生成されたページの次の部分と同じです。
---
import { getEmDashCollection } from "emdash";
const { entries: posts, cacheHint } = await getEmDashCollection("posts", {
orderBy: { published_at: "desc" },
});
if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
---
<ul>
{posts.map((post) => <li>{post.data.title}</li>)}
</ul>
seed/seed.json は、PostsとPagesのコレクション、それぞれのフィールド、セットアップウィザードが適用したサンプルコンテンツを定義しています。ローカルでの開発中、EmDashはこのモデルを読み込んで emdash-env.d.ts を更新します。そのため、エディターでクエリのコードを書くときに、コレクション名やフィールドをチェックできます。
生成された .env は、実行時に暗号化キーを渡します。.env は、モデルとコンテンツを保存するSQLiteのファイルとは別のファイルです。
やさしい解説
生成されたサイトでは、役割ごとにファイルが分かれています。astro.config.mjs はサイト全体の設定（サーバーでの描画、データベース、メディアの置き場所）を書くファイルです。seed/seed.json には、どんな種類のコンテンツ（コレクション）があり、それぞれがどんな項目（フィールド）を持つかが書かれています。記事そのものはSQLiteのデータベースに保存され、暗号化キーはそれとは別の .env に保存されます。
次のステップ
これらの部品がどう連携するかは、アーキテクチャで説明しています。すでにあるサイトにEmDashを追加するには、既存のAstroプロジェクトにEmDashを追加するの手順に従います。コンテンツの取得ガイドでは、絞り込み、ページ分割、下書き、エラー処理を扱います。サイトを自分のパソコンの外で動かす準備ができたら、Cloudflare WorkersまたはNode.jsにデプロイします。メディアライブラリガイドでは、アップロード、メディアフィールド、差し替え、削除を説明しています。