Prosefly で Astro Content Collections を管理する

既存の Astro サイトを、コンテンツの定義を書き直さずに Prosefly へ接続します。このガイドでは、制作実績と文章のために私たちが作ったオープンソースのテンプレート Aster を使います。Defaults With an Exit を編集し、確認した MDX ファイルをご自身の GitHub リポジトリに公開して、サイト上の同じ記事を確認します。

Content Collections、ファイルパス、コンポーネント、ビルドの仕組みはそのままです。オーナーまたは管理者がリポジトリの接続と公開方法を設定した後、執筆者は Git コマンドを使わずに編集し、下書きを保存できます。

始める前に

• GitHub に Aster のコピーを用意するか、既存の対応する Astro プロジェクトを使います。そのリポジトリへの公開権限が必要です。
• Prosefly のアカウントと組織を作成します。Personal は1か月無料で試用でき、クレジットカードは不要です。料金をご覧ください。
• 公開後のサイトを確認する場合は、通常のビルドとホスティングを用意します。新しい Aster のコピーでは src/data/config.ts のサイト URL を変更し、README に沿って起動・デプロイしてください。

編集前に Aster のデモと元の記事を開いてみてください。記事、ソース、画面を対応させやすいように、サンプルの本文は英語のまま使います。記事を翻訳する必要はありません。

1. Aster の既存のコレクション定義を使う

Aster の Blog は src/content/blog/、Projects は src/content/projects/ にあります。src/content.config.ts は、すでに次のように項目を定義しています。

import { defineCollection, reference } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

const blog = defineCollection({
  loader: glob({
    base: './src/content/blog',
    pattern: '**/*.{md,mdx}',
  }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishedAt: z.coerce.date(),
    updatedAt: z.coerce.date().optional(),
    category: z.string(),
    tags: z.array(z.string()).default([]),
    project: reference('projects').optional(),
    draft: z.boolean().default(false),
  }),
});

const projects = defineCollection({
  loader: glob({
    base: './src/content/projects',
    pattern: '**/*.{md,mdx}',
  }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    year: z.number().int(),
    status: z.enum(['Open source', 'Private package']),
    tags: z.array(z.string()).default([]),
    website: z.url().optional(),
    repository: z.url().optional(),
    featured: z.boolean().default(false),
    order: z.number().int().default(0),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog, projects };

このファイルは変更せずに使います。Blog には title、description、publishedAt、category、tags と、任意の project 参照があります。Astro はこのスキーマでファイルを検証し、Prosefly は対応する項目を読み取って属性フォームを作ります。

これらのコレクションの接続に、別の CMS スキーマ、Prosefly ランタイム、コンテンツ API は必要ありません。Aster 自体は MDX の表示に @prosefly/astro-components を使いますが、このテンプレートの依存関係は Prosefly への接続とは別です。

2. 自分のリポジトリを接続し、スキャンを確認する

組織設定 → リポジトリを開きます。GitHub アカウントを連携し、Prosefly GitHub App に Aster リポジトリへのアクセスを許可します。リポジトリを接続し、Scan repository を選びます。認証画面の詳細は GitHub の接続をご覧ください。

設定した対象ブランチとアプリケーションのルートを確認します。Blog と Projects が既存のパスで検出されたことを確かめ、項目とエディタープロファイルを確認してからコンテンツスペースを確定します。インデックス作成の完了を待ってください。Aster の MDX は Prosefly コンポーネントをインポートするため、そのコンテンツで検出されたプロファイルも確認します。

全体の流れでこの操作を試せます。

スキャンはリポジトリを読み取るだけで、コードを実行せず、Git のファイルも変更しません。コレクションが見つからない場合は、ブランチ、アプリケーションのルート、ローダーのパスを確認してください。

3. 同じ記事を編集し、下書きを保存する

Blog コレクションから Defaults With an Exit を開きます。対象ファイルは次のとおりです。

src/content/blog/defaults-with-an-exit.mdx

説明（Description）を下の新しい文章に変更し、ビジュアルモードで冒頭の段落を置き換えます。タイトル、日付、カテゴリー、タグ、project: aster は維持し、記事の識別子と関連付けを保ちます。

description: Good theme defaults shorten the first week without limiting what the site can become.
description: Good defaults help a site grow without rewriting its content.

A useful theme handles page structure, navigation, search, and readable prose so the team can focus on its content.

これはご自身の Aster のコピーに加える編集例です。ソースを開き、frontmatter とコンポーネントのインポートを含む MDX 全体を確認します。既存のインポートは維持してください。対応する Prosefly MDX コンポーネントはビジュアル編集でき、独自の構文はソースで扱えます。

全体の流れでこの操作を試せます。

下書きの保存完了を待ちます。下書きは Prosefly のワークスペースに保存され、Git コミットや公開サイトの更新は発生しません。操作はビジュアルエディターで説明しています。

4. MDX ファイルの差分を確認して公開する

オーナーまたは管理者がコンテンツスペース設定 → 公開で Commit または Pull request を選びます。公開前レビューで次を確認してください。

1. リポジトリと対象ブランチが意図した公開先である。
2. 変更したファイルが src/content/blog/defaults-with-an-exit.mdx である。
3. frontmatter に説明の変更があり、本文に冒頭の段落の変更がある。
4. コンポーネントのインポートとほかの属性が維持されている。

全体の流れでこの操作を試せます。

確認後に公開します。Commit は確認した変更を設定済みの対象ブランチへ書き込みます。Pull request は変更の提案を作り、マージ後に対象ブランチが更新されます。詳しくは Git への公開をご覧ください。

5. Astro のビルド後に記事を確認する

既存のホスティングの処理が更新されたリポジトリをビルドします。完了後、ご自身のデプロイ先で /blog/defaults-with-an-exit/ を開いてください。リンク先の Aster デモは比較用です。自分のコピーへの公開で公式デモは変わりません。

説明と冒頭の段落が編集内容と一致すること、既存のレイアウトとコンポーネントが表示されること、Aster プロジェクトとの関連付けが維持されていることを確認します。Prosefly はコンテンツファイルを公開し、Astro プロジェクトとホスティングがサイトを更新します。

全体の流れでこの操作を試せます。

全体の流れを体験

サンプルは記事編集から始まります。ステージ操作で接続、コンテンツの確認、編集、レビュー、Web サイトのプレビューを切り替えられます。

Prosefly/リポジトリ

defaults-with-an-exit.mdxProsefly / astro-template-aster / Blog

Aster · Prosefly

サンプルをリセット変更を確認

ビジュアルソース

ドキュメントパネル

エディターを読み込み中…

ガイドの編集例を適用下書きはこのページ内に保存

既存の Astro サイトで使う

Aster は手順を示す例であり、必須ではありません。ご自身のフィールド名、コンテンツのディレクトリ、表示用のコードを維持してください。

一般的な Astro コレクションは標準のドキュメントナビゲーションを定義しません。Starlight のサイドバーとコンポーネント編集は Starlight 向け CMS 導入ガイドをご覧ください。

想定と違う場合の確認点

次は Astro 向け CMS の紹介、コンテンツの所有権、Astro Content Collections の公式ドキュメントをご覧ください。