#4 ブログを作った話 - Contentfulで記事を投稿する

当ブログ(sumii.io)を、Figma, Nuxt.js, Contentful, Netlifyを使って構築した方法を各パートにわけて紹介していきます。

今回はContentfulで記事を投稿する方法を紹介します。

Contentfulとは

ContentfulはHeadless CMSと呼ばれ、管理画面とAPIのみを提供しフロント側は自由に開発することができます。
主に、Space,Content Model,Entryの3つの構造になっているので順に説明していきます。

サインアップ

まずはContentfulにサインアップしましょう。
Google、Githubのアカウントでもサインアップできます。

Spaceの作成

ContentfulのSpaceはコンテンツのことを指します。
管理画面のハンバーガーメニューからCreate spaceをクリック。

contentful-create-space

モーダルが立ち上がるので、Space作成のステップを進めます。

1.Space type

今回はFreeを選択しましょう。

contentful-space-type

2.Space details

Spaceの名前を入力します。

contentful-space-details

3.Confirmation

設定に問題がなければConfirm and create spaceをクリックして、Spaceを作成します。

contentful-space-confirm

Content Modelの作成

ContentfulのContent Modelは記事の雛形を指します。
Content Modelページへ移動し、Add content typeをクリックし必要事項を入力してください。

contentful-content-model

contentful-content-model-setup

Fieldの設定

ContentfulのFieldは記事のタイトルや本文や日付などを入力するための項目を指します。
作成したContent Modelのページに移動し、Add fieldをクリックし、自分のコンテンツに合ったFieldを追加していきます。

contentful-field

Entryの作成

ContentfulのEntryは記事を指します。
Contentページに移動しAdd BlogPostをクリック。
※「BlogPost」の箇所は作成したContent Modelの名前です。

contentful-content

投稿画面に設定したFieldが反映されているのがわかると思います。
記事の内容を入力してPublishをクリックすると記事が投稿されます。

contentful-entry

最後に

これで記事を投稿する準備は整いました。
Fieldを調整しながら記事の内容を充実させていきましょう。
次回は、#6前回Nuxtで実装したブログにContentfulで投稿した記事をAPIを使って表示させる方法を紹介します。