tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

Contentfulの設定方法

こんにちはkoです。
来年に向けてブログのリニューアル行っています。
Contentfull × Vercel × Next.js でブログを作成しようと思っています。
今日はそのうち、Contentfulに関する設定方法を記述していきます。

f:id:okinawanpizza:20211020223251p:plain

 目次

Contentfulとは

Contentfulとは、「Headless CMS」 と呼ばれるAPIベースのCMSです。
Contentful以外にも、GraphCMS、Micro CMS などがあります。

Headless CMS ツール比較参考記事
https://wk-partners.co.jp/homepage/blog/hpseisaku/htmlcss/headless-cms/

初回登録

下記リンクから初期登録します。
https://www.contentful.com/sign-up/
githubを連携したら自動的にサインアップできます。

完了したらログインし、
Space、ContentModel、Field、Contentの作成を行います。

Space

f:id:okinawanpizza:20211021013205p:plain

Spaceはブログごとの単位のことを指します。
(GitHubでいうリポジトリのようなものだと捉えています。)

設定方法:
「左上のハンバーガーメニュー」>「Create Space」

ContentModel

f:id:okinawanpizza:20211021004950p:plain

In short, a content model gives structure and organization to your content. Within your overall content model

ContentModelはコンテンツの構造のことです。
例えばブログを書くのであれば「タイトル」「画像」「内容」などの項目が設定されると思います。
その項目に関する仕様のことです。

ここでは content type(=モデル名) を設定します。
設定方法: 「左上にあるAdd content type」>「モーダルの項目を記述」

f:id:okinawanpizza:20211021005855p:plain

モデリンクに関するリファレンス
https://www.contentful.com/help/content-modelling-basics/

Field

f:id:okinawanpizza:20211021010056p:plain

Fieldは「タイトル」「サムネ」「記事本文」などといった
コンテンツ内の項目のことです。

設定方法:
「add field」>「モーダルに表示される9つの型を選択」>「ラベル名や詳細の設定」

Content

f:id:okinawanpizza:20211021010457p:plain

Contentでは、実際にモデルで設定した仕様に従ってコンテンツを作成することができます。

おしまい

以上がContentfulの設定になります。
最初調べた時は2~3時間くらいかかったのですが
まとめてみると意外と手順が少なくてびっくりしました。
そういった手軽さも従来のCMSと比べて良いですね!

次は少し気になったHeadless CMS と 従来のCMS の具体的な違いについて
自分なりにまとめてみようと思います。

おしまい