Prosefly
ウェブサイトのリポジトリにあるコンテンツを、ホスティングされたコンテンツスペースで編集。
- 01
GitHub を接続し、コンテンツスペースを開く。
- 02
一緒に書き、Git にコミットせず共有の下書きとして保存。
- 03
ファイルの差分を確認し、コミットまたはプルリクエストで公開。
Prosefly
KeystaticProsefly と Keystatic の比較
共有のコンテンツスペースか、コードで設定する CMS か。
どちらもコンテンツファイルを扱います。Keystatic は設定可能な管理画面をプロジェクトに組み込み、Prosefly は既存のリポジトリにつながる、ホスティングされたコンテンツスペースを提供します。
詳しく比較するエディターを置く場所から考える。
Keystatic はコレクション、単一コンテンツ、項目を開発者がコードで定義します。Prosefly は対応するリポジトリのコンテンツをスペースとコレクションに整理し、スペース内で執筆と公開を行います。
コンテンツと向き合う、2つの方法。
Keystatic
ローカルや GitHub のファイルを読み書きする、設定可能なコンテンツエディター。
- 01
keystatic.config.ts でコレクションと項目を定義。
- 02
ローカル、GitHub、Keystatic Cloud の保存モードで編集。
- 03
保存したファイルをウェブサイトで表示。
それぞれの基本的な流れをまとめています。設定や追加サービスによって詳細は変わります。
ドキュメントの構造が分かるビジュアルエディター。
Markdown・MDX のビジュアル編集に加えて、Starlight、Fumadocs、Prosefly コンポーネントに個別対応。同じエディターで、対応するドキュメント用ブロックを扱えます。
Starlight注意書き、タブ、カード、ファイルツリーを編集。Starlight のコンポーネント構文と Expressive Code のメタデータに対応します。
FumadocsFumadocs のコンポーネント構文と対応するプロパティで、コールアウト、タブ、ステップ、アコーディオンを編集。
- Prosefly コンポーネント
Lotus と Dahlia で使われる @prosefly/astro-components のコールアウト、タブ、カード、アコーディオンを編集。
対応範囲はコレクションのエディタープロファイルと、認識できる構文によって異なります。独自のコンポーネントや未対応の式はソースで編集でき、リポジトリのコードは実行しません。
ビジュアル編集を見る日々の作業は、どう変わるか。
- 公開済みコンテンツ
- Prosefly
公開済みの文書、JSON・YAML リソース、Public ファイルは自分の Git リポジトリに保存。
- Keystatic
保存モードに応じた、ローカルディレクトリまたは GitHub リポジトリ内のファイル。
- 導入
- Prosefly
GitHub を接続し、対応するコンテンツをスキャンしてコンテンツスペースを設定。
- Keystatic
インテグレーションを導入し、keystatic.config.ts を定義。
- 編集体験
- Prosefly
ビジュアル編集とソース編集、frontmatter の属性、リアルタイム共同編集。Starlight、Fumadocs、@prosefly/astro-components 向けのビジュアル編集に対応。
- Keystatic
スキーマに応じた項目とリッチテキスト。Markdoc・MDX フィールドにも対応。
- 下書きと保存
- Prosefly
保存しても Git は変わりません。公開するまで、下書きはコンテンツスペースに残ります。
- Keystatic
保存モードに応じて、ローカルファイルへ保存するか GitHub と連携して編集。
- 公開
- Prosefly
ファイルの差分を確認し、コミットまたはプルリクエストで公開。
- Keystatic
コンテンツファイルを保存し、プロジェクトの Git・サイトの仕組みで公開。
- メディア
- Prosefly
Public の画像は Git に公開。組織のメディアは別途ホスティングされた URL を利用。
- Keystatic
画像フィールドを設定。Cloud モードには画像ホスティング機能も。
- ホスティングと保守
- Prosefly
編集サービスは Prosefly が運用。ウェブサイトとビルドパイプラインは自分で管理。
- Keystatic
プロジェクトへの組み込みを管理。Keystatic Cloud は追加サービスを提供。
Git への公開自体はサイトをデプロイしません。Prosefly は既存のビルドパイプラインを利用し、リポジトリの再取得は明示的なスキャンで行います。
Keystatic の MDX フィールドには、import や HTML タグなどの制限が記載されています。Prosefly はリポジトリのコードを実行せず、ソース編集とビジュアル編集の対応範囲は異なります。どちらを選ぶ場合も、代表的な MDX ファイルで確認してください。
必要な作業を軸に選びましょう。
Prosefly が向いている場合
- リポジトリにつながる、ホスティングされたコンテンツスペースで編集したい。
- リアルタイム共同編集と、独立した公開前レビューが大切。
- コンテンツが対応する文書エディターや JSON・YAML リソースエディターに合っている。
Keystatic を検討したい場合
- Astro、Next.js、Remix のプロジェクトに CMS を組み込みたい。
- GitHub だけでなく、ローカルファイルも編集したい。
- 独自の項目やコンテンツ用コンポーネントを TypeScript で定義したい。
さらに詳しく
出典と比較の範囲
確認日
製品の事実関係は、以下の公式ドキュメントで確認しています。選び方は私たちの見解です。追加の連携や有料版には別の機能が含まれる場合があります。選定時は最新のドキュメントと利用条件をご確認ください。
ほかの比較
今のウェブサイトに、書く場所を。
リポジトリを接続して、ご自身のコンテンツで一連の操作を試せます。