はじめに

このガイドでは、インストールから最初の投稿の公開まで、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

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() }),
};

環境変数

本番デプロイでは次を設定します:

# Required for authentication
EMDASH_AUTH_SECRET=your-secret-here

# Optional: for content preview
EMDASH_PREVIEW_SECRET=your-preview-secret

安全な認証シークレットは次で生成します:

npx emdash auth secret

ページでコンテンツを取得する

Astro ページでは EmDash のクエリ関数を使います。Astro の live collections パターンに従い、コレクションは { entries, error }、単一エントリは { entry, error } を返します:

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

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

<Base title="Home">
  <h1>Latest Posts</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 サイトができました。次はこちらへ:

• コアコンセプト — EmDash の内部の仕組み
• コンテンツの扱い — 取得とレンダリング
• メディアライブラリ — 画像とファイルの管理
• ブログを作る — カテゴリとタグ付きブログ
• Cloudflare にデプロイ — 本番公開