Prosefly
すべてのフレームワーク

Prosefly × Astro

Astro サイトのための Git ベース CMS。

Astro Content Collections 向けの Git ベース CMS。チームで Markdown・MDX と frontmatter を編集し、差分を確認して GitHub に公開できます。Aster の例で、既存の Astro ビルドを使う流れを紹介します。

既存のコレクションと対応するスキーマの項目を読み取ります。接続のために CMS 用のスキーマ、コンテンツ API、Prosefly パッケージを追加する必要はありません。

ウェブサイトを接続エディターを試す登録不要Astro 向け CMS の導入ガイド

Aster の記事から、サイトの更新まで。

Aster は、制作実績と文章のために私たちが作ったオープンソースの Astro テンプレートです。Blog コレクションの Defaults With an Exit を使い、編集、Git の差分確認、公開後のページまで進みます。既存の対応する Astro コレクションにも同じ流れを使えます。

  • コンテンツの定義はひとつ

    src/content.config.ts が引き続きフィールドと形式を定義します。Prosefly は対応する定義から編集フォームを作り、Astro は同じファイルを検証します。

  • 既存のファイルをビジュアル編集

    本文と属性を並べて編集できます。Aster に含まれる Prosefly MDX コンポーネントも、対応するものは画面から操作でき、ソース全体も開けます。

  • 確認した変更をリポジトリへ

    まず下書きを保存し、frontmatter と本文の差分を確認します。コミットまたはプルリクエストで公開すると、既存の Astro ビルドがサイトを更新します。

リポジトリ内のファイル例を見る
リポジトリ内のコンテンツの例Astro
  • astro.config.mjs
  • src/content.config.ts
  • src/content/blog/defaults-with-an-exit.mdx
  • src/content/projects/aster.mdx

選択中のリポジトリファイル

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),
  }),
})
Aster の既存の Blog コレクションからの抜粋です。src/content.config.ts 全体では Projects も定義されています。両方のコレクションとファイルパスを維持してください。

Astro CMS の流れを体験。

ご自身の Aster リポジトリを接続し、検出されたコレクションを確認。記事を編集し、ファイルの差分を見てから公開します。

Prosefly/リポジトリ
defaults-with-an-exit.mdxProsefly / astro-template-aster / Blog
Aster · Prosefly

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

下書きはこのページ内に保存

操作できるデモです。変更はこのページ内に留まり、リポジトリへの接続や公開は行いません。

Aster の操作手順：リポジトリの接続 → スキャン結果の確認 → 記事の編集 → Git の差分確認 → サイトの更新。

今の設定を読み取り、確認して編集へ。

  1. 01

    Astro のリポジトリを接続

    GitHub を認証し、Astro アプリを含むリポジトリを接続します。モノレポ内のアプリにも対応しています。

  2. 02

    検出されたコンテンツを確認

    既存の設定から読み取ったアプリのルート、コンテンツディレクトリ、フィールド、エディタープロファイルを確認します。対応する定義なら、CMS 用の設定を追加せずにコンテンツスペースへ取り込めます。

  3. 03

    ページを編集して公開

    コレクションを開いて下書きを保存し、公開前に Git の差分を確認します。

接続前に知っておきたいこと

対応する静的な Content Collections、ディレクトリ全体を対象にする Markdown・MDX の glob ローダー、対応するスキーマの項目を自動検出します。リポジトリのコードや独自ローダーは実行しません。リモートコンテンツ、動的なスキーマ、一部のファイルだけを選ぶパターンでは、対象範囲の明示的な設定が必要になる場合があります。サイトのレイアウトや任意の Astro コンポーネントはコードで管理し、標準のドキュメントナビゲーションの編集は Starlight ガイドで紹介しています。

Astro で CMS を使うには

Aster テンプレートは必須ですか？

いいえ。Aster は手順を再現するための例です。既存の Astro リポジトリを接続し、設定から検出された対応コレクションとスキーマの項目を確認できます。

Astro サイトに何をインストールしますか？

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

チーム全員が Git コマンドを使いますか？

管理者が GitHub の接続、コンテンツスペース、公開方法を設定します。執筆者は Git コマンドを使わずに、文書と対応する属性を編集し、下書きを保存できます。

独自の Astro・MDX コンポーネントも編集できますか？

対応する MDX コンポーネントにはビジュアル編集の操作があります。独自の MDX コンポーネントや未対応の式はソースで編集できます。Prosefly はコンポーネントのコードを実行せず、サイトの Astro レイアウトも編集しません。

編集内容を保存するとサイトも更新されますか？

保存すると Prosefly に下書きが作成されます。差分を確認して Git に公開し、必要な場合はプルリクエストをマージします。その後、既存の Astro ビルドとホスティングの処理がサイトを更新します。

公開したコンテンツは、自分の Git リポジトリに。

公開するまで、下書きは Prosefly に保存されます。変更を確認してコミットまたはプルリクエストを作成すると、ウェブサイトの既存のビルドがデプロイを引き継ぎます。

コンテンツの所有権について

さらに詳しく

コンテンツスペースの接続、公開の仕組み、ウェブサイトを支えるツールについて。

ほかのフレームワークを見る