はじめに
Contentfullにアカウント登録して記事を登録するまでの記録です。
自分の簡易的なブログが欲しくなったので、流行り?のJAMStack構成で作ってみるかと思ったのがきっかけです。
なお、全て以下のブログを参照させていただいています。感謝🙏
ContentfullとJAMStackについて
以下の記事がたいへん参考になります。
1. Contentfullにアカウント登録
公式ページからアカウントを登録します
登録が完了したら、以下画面が表示されます。
2. APIキーの取得
Backend（Next.jsなど）で使用するAPIキーを発行・取得します。
スクリーンショットの赤枠をクリックし、APIキー作成画面まで遷移しましょう。
Description(説明文)の入力が必要になりますので、ここを適当に埋めたあと、右上の「Save」をクリックします。
Saveしたあと、Space IDとContent Delivery APIを控えます。
3. Content Modelの定義
続いて、ブログのコンテンツを決定するためのモデルを定義していきます。
以下の赤枠クリックして画面遷移しましょう。
「Create new content type」でName項目を入力し、Createをクリックします。
この時、Api Identifierを控えておきます。
続いて、フィールドを追加していきます。以下のような構成です。
| Name | Field | 説明 |
|---|---|---|
| title | Text | ブログタイトル |
| slug | Text | ブログのURLパス |
| content | Rich text | ブログ本文（URLリンクやメディアの埋め込みが可能） |
それでは早速フィールドを追加していきます。例としてtitleフィールドを追加してみます。
Add fieldをクリックします。
フィールドの形式を聞かれるので、「Text」をクリックします。
Name欄に「title」を入力したあと、Createをクリックします。
これでtitleフィールドが追加できました。このようにして残りのslugフィールドとcontentフィールドを追加していきます。
※contentフィールドはRich Textを選択してください！
最後にSaveをクリックしてフィールドを保存します。
4. ブログの作成
いよいよブログ記事を作成していきます。
以下のスクリーンショットの赤枠をクリックして画面遷移しましょう。
title、slug、contentを入力したあと、Publishをクリックして公開設定にします。
以上で投稿作業は終わりです。
これで終わりだと「じゃあどこで投稿したブログを見れるの？」となってしまいますね。これはContentfullがヘッドレスCMSだから仕方ない話です……。
次の記事ではNext.jsを使用して作成したブログ記事を表示させる処理を行っていきたいと思います。