Craftでパーソナルブログを構築する

この例では、Craftを使用して個人ブログを管理し、Lovableを活用して投稿・タグ・検索機能を備えた美しい個人ウェブサイトへと変えていきます。

ステップ1 — ドキュメントを作成

ブログ記事はコレクションに保管されています。コレクションフィールドを使用してタグ、投稿日、公開ステータスを管理します。各ブログ記事の内容はコレクションアイテムの内容となります。これにより、Craftの強力なエディターを使用してブログ記事を作成・編集できます。

テンプレートを使用して、ブログ用のコレクションを含む新しいドキュメントを作成し、いくつかのサンプル投稿で埋めましょう

パーソナルブログ

テンプレートをプレビューこのテンプレートを使用する

ステップ2 — APIアクセスを有効にする

ドキュメントのAPIアクセスを有効化すると、ドキュメントの読み取りや追加に使用できる固有のURLを取得できます。

ステップ1

ドキュメント内で、右上にある「Imagine」ボタンをクリックします。

ステップ2

パネルの下部にある「Enable API」をクリックします。

ステップ3

あなたのドキュメントとやり取りするために使用される API URL が、上部に表示されるようになりました。このプロジェクトでは読み取りのみが必要です。API 権限を「Read」に設定してください。

ステップ4

「Add Document」から「Personal Blog 」ドキュメントを選択。

ステップ5

このプロジェクトでは、API はあなたのドキュメントへの書き込みだけを行えば十分です。 API の権限を「Write（書き込み）」のみに設定してください。

「Download AI Bundle」ボタンをクリックして、API ドキュメントとドキュメントの内容をダウンロードします。

ステップ6

このプロジェクトでは、「Download AI Bundle」ボタンをクリックしてください。これにより、API ドキュメントとドキュメントの内容が含まれたフォルダがダウンロードされます。このフォルダを Lovable にアップロードすることで、Lovable があなたのドキュメントの読み取り方法を理解できるようになります。

ドキュメント内のすべての投稿はパブリックAPIから読み込めることに留意してください。コレクション内の「公開済み」フィールドがウェブサイトに表示される投稿を制御しますが、未公開の投稿も同様にアクセス可能です。

ステップ3 — Lovableで構築

それでは、Lovableでブログの実際のウェブサイトを作成していきましょう。上記のサンプルサイトでは、以下のプロンプトを使用しました

私の個人ブログを構築してほしいです。

情報はCraftに保存されています。現在のCraftドキュメントの状態例と、ブログ投稿を取得するために使用するべきAPIに関する情報は添付ファイルを確認してほしいです。APIドキュメントを注意深く読み、指示に従ってください。

以下の機能が必要です：
- 最新3件の投稿（日付と概要付き）を表示するランディングページ、およびアーカイブへのリンク
- 公開済み全投稿を日付順に一覧表示するアーカイブページ（テーブル形式）
- 各投稿ページ（下部には前/次ナビゲーションを設置）
- 特定タグ付きブロックを一覧表示するページ
- 検索機能も実装してください
全投稿にはpublishedプロパティがあります。この値がtrueに設定されている投稿のみを表示してください。

洗練されたモダンなデザインを希望します。細部までこだわり、非常に丁寧に作り込まれた印象を与えること。上品でありながら気取らない雰囲気で、優れた現代的なタイポグラフィと十分な余白を特徴とします。

Lovable にアクセスし、プロンプトをプロンプトボックスに貼り付けてください。先ほどダウンロードしたドキュメント用の AI バンドルを必ず添付してください。