初めての EmDash サイトを作成する

このチュートリアルは Starter テンプレートから Node.js サイトを作成します。結果は SQLite とローカルメディアストレージを使うため、クラウドアカウントなしでチュートリアルを完了できます。

すでに Astro サイトがある場合は、代わりに既存の Astro プロジェクトに EmDash を追加するに従ってください。

前提条件

Node.js 22.16 以降と npm をインストールします。続行する前にインストール済みの Node.js バージョンを確認します。

node --version

コマンドは v22.16.0 またはそれ以降のバージョンを報告する必要があります。

サイトをスキャフォールドする

対話型スキャフォールダーを開始します。
npm
```
npm create emdash@latest
```
pnpm
```
pnpm create emdash@latest
```
yarn
```
yarn create emdash
```
bun
```
bun create emdash@latest
```
求められたら次のオプションを選びます。
- Project name: my-emdash-site
- Where will you deploy? Node.js
- Which template? Starter
- Which package manager? ステップ 1 のコマンドから検出されたパッケージマネージャーをそのまま使います。
- Install dependencies? Yes
これらの選択は、Posts と Pages を持つ汎用の Node.js サイトを作成します。スキャフォールダーは生成された EMDASH_ENCRYPTION_KEY も gitignore された .env ファイルに書き込みます。

依存関係のインストールが失敗しても、プロジェクトファイルはそのまま残ります。続行する前にスキャフォールダーが表示した再試行コマンドを実行してください。
プロジェクトディレクトリに入り、開発サーバーを起動します。
npm
```
cd my-emdash-site
npm run dev
```
pnpm
```
cd my-emdash-site
pnpm dev
```
yarn
```
cd my-emdash-site
yarn dev
```
bun
```
cd my-emdash-site
bun dev
```
このターミナルは開いたままにしてください。Astro はローカルのサイト URL（通常は http://localhost:4321/）を表示します。

セットアップを完了する

http://localhost:4321/_emdash/admin/ を開きます。新しいサイトはセットアップウィザードにリダイレクトします。

Site Title と任意の Tagline を入力します。チュートリアルがテンプレートの Welcome 投稿と About ページから始まるよう Include sample content を選択したままにし、Continue を選択します。
Your Email と任意の Your Name を入力し、Continue を選択します。
ブラウザが資格情報のプロンプトを開いたらパスキーを登録します。登録後、 Open the dashboard を選択します。

ダッシュボードが開き、ナビゲーションに Posts と Pages が表示されます。セットアップウィザードは Starter テンプレートのコンテンツモデルとサンプルコンテンツをローカル SQLite データベースに適用しています。

編集を公開する

Posts を開き、次に Welcome を開きます。
タイトルを Hello from EmDash に変更し、Save を選択します。
Publish changes を選択し、保存した下書きを訪問者に表示されるバージョンにします。
別のタブで http://localhost:4321/ を開きます。ホームページに Hello from EmDash が一覧されます。

Starter テンプレートは、Astro がホームページをレンダーするときに getEmDashCollection("posts") を呼び出します。ページを再読み込みすると、ランタイムで EmDash から公開版を読み取ります。

生成されたサイトの仕組み

スキャフォールドは、3 か所で EmDash が接続された通常の Astro プロジェクトを生成します。

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 はランタイムで暗号化キーを供給します。モデルとコンテンツを保存する SQLite ファイルとは別です。

次のステップ

これらの部分がどう連携するかはアーキテクチャを読んでください。すでに存在するサイトに EmDash を追加するには、既存の Astro プロジェクトに EmDash を追加するに従ってください。コンテンツの照会ガイドはフィルタ、ページネーション、下書き、エラー処理を扱います。サイトをマシンから出す準備ができたら、Cloudflare Workers または Node.js にデプロイします。メディアライブラリガイドはアップロード、メディアフィールド、置換、削除を説明します。