ヘッドレスCMSのContentfulをHugoと連携してGithub Pagesで公開する(2)

# 概要

[Contentful](https://www.contentful.com/)と[Hugo](https://gohugo.io/)を連携させてサイト公開を行う方法の二回目。

前回Hugoの設定を説明したので今回はContentfulの設定を解説する。

# Contentfulの設定

まずContentfulに[ログイン](https://be.contentful.com/login)する。
必要に応じてアカウントを作成する。

`Contentful`の`Space`と呼ばれるプロジェクトでコンテンツを管理する。
`Space`は`Community`プラン(フリープラン)では1個しか作れないので(以前は2つだったような気がする)デフォルトの`The example project`をそのまま使うことにする。

![FireShot Capture 064 - Space home — The example project — Contentful - app.contentful.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/de412d41-746f-5443-1737-df6621af225a.png)

画面上部のメニューにある`Content Model`がモデル設計、いわゆるデータベースでいうとテーブル設計に相当し、`Content`が作成したモデルのデータ、つまりコンテンツを作成するものとなる。

## Content Modelの作成

今回のサイトはブログ形式のものとする。そのため3つの`Content Model`を作成する。

* ブログの本文
* ブログのカテゴリー
* ブログのタグ

まず、カテゴリーとタグから作る。

`Content Model`の画面右`Add content type`をクリック。
フォームが表示されるので`Name`に`Category`など好みの名前で入力(表示例では`HugoContentfulCategory`とした)。
`Api Identifier`は必須項目だが自動的に補完されるので特に問題なければそのまま使う。
`Create`ボタンをクリック。

![FireShot Capture 069 - Content Model — website — Contentful - app.contentful.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/9137a2c8-74f7-1153-3718-277d58f63fa1.png)

フィールド定義の画面になるので右の`Add field`をクリック。
`Text`を選択。

![FireShot Capture 071 - HugoContentfulCategory — Content Model — website — Contentful_ - app.contentful.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/4a043e22-8d07-7585-e660-ea28c12a8d96.png)

`Create and configure`をクリック(`Create`して後で`Settings`で修正してもよい)
`This field represents the Entry title`にチェック。
`Validation`タブから`Required field`(必須とする場合)、`Unique Field`にチェック。

![FireShot Capture 072 - HugoContentfulCategory — Content Model — website — Contentful_ - app.contentful.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/eee1cc88-a0af-6d3f-8956-a045e15c6f85.png)

最後に`Save`をクリックすると以下のように作成される。

![FireShot Capture 067 - Category — Content Model — website — Contentful - app.contentful.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/a7121ea1-0321-66ce-9cdf-9981181e4c7a.png)

タグも同様に作る(`Name`は`HugoContentfulTag`とした)。

![FireShot Capture 068 - Tag — Content Model — website — Contentful - app.contentful.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/359f11d3-c97d-83e6-e1de-d7834c6c69e7.png)

最後にブログの本文を作る。
`Name`は`HugoContentfulPost`とし以下のフィールドで構成した(`* Required`)。

* title(Short text)`*`: タイトル(`Entry title`にしておく)
* slug(Short text)`*`: スラグ(`Unique`もチェック)
* pub_date(Date & time)`*`: 投稿日
* body(Long Text)`*`: 本文
* eyecatch(Media): カバー写真
* categories(Many Reference)`*`: カテゴリー
* tags(Many Reference): タグ

`body`はPreview閲覧可能なRich Textを選びたくなるがHugoとの連携を想定した場合、Makrdown形式(`Long Text`>`Appearance`>`Markdown`)の方が望ましい。
Rich Textにしたい場合はHugo側でhtmlタグを処理する設定を追加すればよい([Hugo v0\.60以上を使うと、Markdown中のHTMLタグが「raw HTML omitted」となって消えてしまう \- My External Storage](https://budougumi0617.github.io/2020/03/10/hugo-render-raw-html/))


![FireShot Capture 076 - HugoContentfulPost — Content Model — The example project — Contentful_ - app.contentful.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/b4a38c43-8f17-4707-23b5-085eb2e83f92.png)

`eyecatch`に関しては以下の設定を行い画像のみの登録とした。

![FireShot Capture 073 - HugoContentfulPost — Content Model — website — Contentful_ - app.contentful.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/3a96e6ed-89ed-c74d-fc15-047b236d797e.png)

カテゴリーは単一でしか使わない場合は`One Reference`でよいのだが、`Hugo`がデフォルトでリストで要求する、つまり複数を想定しているのでそれにならう(単一で指定しておいてHugoにリストの1要素として渡す方法でもよい)。
後、`author`のような投稿者のフィールドは今回は自分しか投稿しないので割愛した。
最後に`Save`をクリック。

![FireShot Capture 075 - HugoContentfulPost — Content Model — The example project — Contentful_ - app.contentful.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/ad501cb0-4edb-908b-713b-ee6e272b5a66.png)

説明が前後したが`Entry title`つまり`This field represents the Entry title`にチェックすることでコンテンツ一覧の表示項目となる。

**注記**

モデル定義においてフィールドタイプの再定義をしたい場合はフィールドを削除して追加となるが、Contentful側の処理が即時に行われない場合がある、というより一定時間かかる。
コンテンツがまったくない状態のモデルならばモデルごと削除してお作り直す方が得策かもしれない。
(と思ったけど単に`Save`のクリックし忘れかもしれない。。。未検証)

# Contentfulのコンテンツ作成

準備が終わったのでコンテンツを作成する。
画面上メニュー`Content`>`Add Entry`>`HugoContentfulPost`(自分でつけたブログ本文のコンテントタイプ名)を選択

eyecatchやcategories, tagsは事前に作成しておいてもよいし、その場で登録してもよい。  
適当に作るとこんな感じになる。

![FireShot Capture 077 - 初めての投稿 — Content — The example project — Contentful - app.contentful.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/476f7cbe-6f62-ec8e-3473-c7954a075667.png)

今回はContentfulでのコンテンツ作成を解説した。
次回Hugoとの連携について説明する。