最初の EmDash サイトを作成する

このチュートリアルでは 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 --yes
```
明示的な node:starter の選択は、Posts と Pages を含む汎用サイトを作成します。スキャフォルダーは依存関係をインストールし、生成された EMDASH_ENCRYPTION_KEY を gitignore された .env ファイルに書き込みます。

依存関係のインストールが失敗した場合、プロジェクトファイルはそのまま残ります。続行する前にスキャフォルダーが出力したリトライコマンドを実行してください。
プロジェクトディレクトリに入り、開発サーバーを起動します：
```
cd my-emdash-site
npm run 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 から公開バージョンを読み取ります。

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

スキャフォールドは EmDash が3箇所で接続された通常の 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 にデプロイしてください。メディアライブラリガイドはアップロード、メディアフィールド、置換、削除について説明しています。