EmDash & Astro

EmDashは、Astro向けに開発されたオープンソースのフルスタックCMSです。データベースによるコンテンツ管理機能をはじめ、管理画面UI、メディアライブラリ、メニュー、タクソノミーを既存のサイトに追加できます。

新しいAstro + EmDashのプロジェクトを作成するためには、EmDash CLIを使用し設定済みのプロジェクトを生成します。

npm create emdash@latest

pnpm create emdash@latest

yarn create emdash@latest

Astroとの統合

EmDashはAstroプロジェクト内で動作し、データベースを利用します。コンテンツの編集は、/_emdash/adminにある管理画面から行えます。各ページでは、ライブコンテンツコレクション (EN)を使用してデータベースからデータを取得し、コンテンツを表示します。

このガイドでは、Node.jsアダプターとローカルのSQLiteデータベースを使用します。対応するデータベースの一覧は、EmDashのドキュメントを参照してください。

前提条件

アダプターとoutput: "server" (EN)が設定された既存のAstroプロジェクト（Astro 6以降）。
Node.js v22.16.0以降。

依存関係のインストール

EmDashの管理画面はReactで動作するため、Reactは必須の依存関係です。プロジェクトでReactを使用していない場合は、パッケージマネージャーに応じたastro addコマンドでインストールします。

npx astro add react

pnpm astro add react

yarn astro add react

EmDashパッケージもインストールする必要があります。

npm install emdash

pnpm add emdash

yarn add emdash

インテグレーションの追加

Astro設定ファイルにemdash()インテグレーションを追加し、データベースとメディアの保存先を設定します。

import { defineConfig } from "astro/config";
import node from "@astrojs/node";
import react from "@astrojs/react";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

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

ライブコレクションローダーの追加

AstroのコンテンツレイヤーでEmDashのコンテンツを取得できるように、src/live.config.tsファイルを作成します。

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

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

_emdashコレクションは、内部でコンテンツの種類（投稿やページなど）に応じて処理を振り分けます。src/content.config.tsにある既存のファイルベースのコレクションも引き続き併用できます。

EmDashをローカルで実行する

EmDashで独自のページをテストするには、まずセットアップウィザードを完了する必要があります。セットアップが完了するまではコンテンツが公開されないため、クエリを実行しても空の結果が返されます。

Astroの開発サーバーを起動して、データベースを初期化し、管理画面UIを立ち上げます。
- npm
- pnpm
- Yarn
ターミナルウィンドウ
npm run dev
ターミナルウィンドウ
pnpm run dev
ターミナルウィンドウ
yarn run dev
EmDashを初回起動すると、スキーマおよびpagesとpostsという2つのデフォルトコレクションを含んだdata.dbが作成されます。
ブラウザーでhttp://localhost:4321/_emdash/adminにアクセスします。EmDashのセットアップウィザードにリダイレクトされます。
Siteステップで、サイトのタイトルと任意のキャッチフレーズを入力します。
Accountステップで、メールアドレスと名前を入力します。これで管理者アカウントが作成されます。
Sign Inステップで、アカウントのセキュリティを設定します。Create Passkeyを選択し、デバイスの生体認証、セキュリティキー、またはPINを使ってパスキーを登録します。
作成したパスキーでサインインし、ダッシュボードにアクセスします。

最初の投稿を作成する

ダッシュボードで**+ Post**ボタンをクリックします。
タイトルと本文を追加します。EmDashは、ブロックエディターで編集したリッチテキストをPortable Textとして保存します。URLのスラッグはタイトルから生成され、サイドバーで編集できます。
Saveをクリックしてから、Publishをクリックします。サイトの訪問者には公開済みの投稿のみが表示されます。

EmDashのコンテンツをレンダリングする

getEmDashCollection()とgetEmDashEntry()を使ってコンテンツを取得します。どちらもライブコレクションと同じ仕組みでリクエスト時に結果を返すため、公開した変更は再ビルドなしで反映されます。

投稿一覧の表示

次の例では、公開済みのすべての投稿のタイトルを一覧表示し、それぞれの投稿ページへのリンクを設定しています。

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

const { entries: posts } = await getEmDashCollection("posts", {
  status: "published",
});
---
<ul>
  {posts.map((post) => (
    <li>
      <a href={`/posts/${post.data.slug}`}>{post.data.title}</a>
    </li>
  ))}
</ul>

個別の投稿の表示

個別の投稿のコンテンツを表示するには、スラッグで投稿を取得し、<PortableText />コンポーネントでPortable Textのコンテンツをレンダリングします。

---
import { getEmDashEntry } from "emdash";
import { PortableText } from "emdash/ui";

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

if (!post) {
  return Astro.redirect("/404");
}
---
<article>
  <h1>{post.data.title}</h1>
  <PortableText value={post.data.content} />
</article>