はじめに

このガイドでは、インストールから最初の投稿の公開まで、最初のEmDashサイトの作成を案内します。

前提条件

• Node.js v22.12.0以降（奇数番号のバージョンはサポートされていません）
• npm、pnpm、または yarn
• コードエディタ（VS Codeを推奨）

新しいプロジェクトを作成する

npm create emdash@latest

pnpm create emdash@latest

yarn create emdash

プロンプトに従ってプロジェクトに名前を付け、設定を行います。

開発サーバーを起動する

セットアップウィザードを完了する

管理パネルに初めてアクセスすると、EmDashのセットアップウィザードが初期設定を案内します：

パスキーが登録されると、ログインして管理ダッシュボードにリダイレクトされます。

最初の投稿

プロジェクト構造

EmDashプロジェクトは、いくつかの追加を加えた標準のAstro構造に従います：

my-emdash-site/
├── astro.config.mjs      # Astro + EmDash設定
├── src/
│   ├── live.config.ts    # Live Collections設定
│   ├── pages/
│   │   ├── index.astro   # ホームページ
│   │   └── posts/
│   │       └── [...slug].astro  # 動的な投稿ページ
│   ├── layouts/
│   │   └── Base.astro    # ベースレイアウト
│   └── components/       # Astroコンポーネント
├── .emdash/
│   ├── seed.json         # テンプレートシードファイル
│   └── types.ts          # 生成されたTypeScript型
└── package.json

設定ファイル

astro.config.mjs

以下の設定は、ローカルSQLiteデータベースとローカルファイルストレージを使用して、EmDashをAstro統合として登録します：

import { defineConfig } from "astro/config";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

export default defineConfig({
	integrations: [
		emdash({
			database: sqlite({ url: "file:./data.db" }),
			storage: local({
				directory: "./uploads",
				baseUrl: "/_emdash/api/media/file",
			}),
		}),
	],
});

src/live.config.ts

以下のファイルは、単一のライブコレクションを介してEmDashをAstroのコンテンツシステムに接続します：

import { defineLiveCollection } from "astro:content";
import { emdashLoader } from "emdash/runtime";

export const collections = {
	_emdash: defineLiveCollection({ loader: emdashLoader() }),
};

環境変数

本番環境では、以下のコマンドでプラグインシークレット用の暗号化キーを生成します：

npx emdash secrets generate

生成された値を EMDASH_ENCRYPTION_KEY として環境に追加します（以下を参照）。このキーは保存時にプラグインシークレットを暗号化します。プラグインシークレット暗号化が使用するときにデプロイメントが準備できるように、今すぐ設定してください。

EMDASH_ENCRYPTION_KEY=emdash_enc_v1_...

キーはデータベースに保存されません — 暗号化された暗号文のみが保存されます。耐久性のある場所にバックアップしてください。紛失すると、それで暗号化されたすべてのシークレットが失われます。

プレビューHMACシークレットとコメンターIP��ッシュソルトは、初回使用時に生成されてデータベースに保存されるため、設定する必要はありません。別のプロセスがメインサイトと同じトークンを検証する必要がある場合にのみ、以下のようにプレビューシークレットを上書きします。

EMDASH_PREVIEW_SECRET=your-preview-secret

ページでコンテンツをクエリする

AstroページでEmDashのクエリ関数を使用します。これらはAstroのライブコレクションパターンに従い、コレクションには { entries, error } を、単一エントリには { entry, error } を返します：

---
import { getEmDashCollection } from "emdash";
import Base from "../layouts/Base.astro";

const { entries: posts } = await getEmDashCollection("posts");
---

<Base title="Home">
  <h1>最新の投稿</h1>
  <ul>
    {posts.map((post) => (
      <li>
        <a href={`/posts/${post.slug}`}>{post.data.title}</a>
      </li>
    ))}
  </ul>
</Base>

以下のページは、スラッグで単一のエントリを取得します：

---
import { getEmDashEntry } from "emdash";

const { slug } = Astro.params;
const { entry: post } = await getEmDashEntry("posts", slug);

if (!post) {
  return Astro.redirect("/404");
}
---

<h1>{post.data.title}</h1>

TypeScript型を生成する

完全な型安全性のために、データベーススキーマから型を生成します：

npx emdash types

これにより、すべてのコレクションのインターフェースを含む .emdash/types.ts が作成されます。エディタはフィールド名を自動補完し、型エラーをキャッチするようになります。

次のステップ

サイトが実行されると、以下のページで次に何をすべきかを説明します：

• コア概念 — EmDashが内部でどのように機能するかを理解する
• コンテンツの操作 — コンテンツのクエリとレンダリングを学ぶ
• メディアライブラリ — 画像とファイルをアップロードして管理する
• ブログを作成する — カテゴリとタグを使用して完全なブログを構築する
• Cloudflareにデプロイする — サイトを本番環境に移行する