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

# 概要

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

前回Contentfulからデータを取得してHugoのコンテンツを生成する方法を説明した。
今回はGithub ActionsでのビルドそしてGithub Pagesでの公開までの流れについて説明する。

# Github Actions + Github Pagesによるコンテンツ公開

Hugoで作成したコンテンツはGithub Pagesを利用して公開できる。
これにはいくつかの方法があるけれどもGithub Actionsを利用してコンテンツのビルドを行うのが一番効率がよい。

Hugo用のAction作成者の[peaceirisさんのところ](https://qiita.com/peaceiris/items/d401f2e5724fdcb0759d)を参考にして`.github/workflows/gh-pages.yml`を設置する。
Hugo単体ならそのままコピペでいけるが、Contentfulからデータを取得するので.envに設定した環境変数を登録しておく必要がある。
`Github`ダッシュボート>`Settings`>左サイドバー`Secrets`をクリックして以下を登録。

![FireShot Capture 099 - Actions secrets - github.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/041e0c5b-8e02-24c6-7844-d7498b601749.png)


そして以下が今回の.github/workflows/gh-pages.yml

```yaml
name: GitHub Pages

on:
  push:
    branches:
      - main  # Set a branch name to trigger deployment
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 14.x
      - run: npm ci

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: npm run build
        env:
          CONTENTFUL_SPACE: ${{ secrets.CONTENTFUL_SPACE }}
          CONTENTFUL_TOKEN: ${{ secrets.CONTENTFUL_TOKEN }}

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

```

Hugoのバイナリは本体のみと拡張機能つきのものがあるので`extended: true`にして拡張機能ありを利用するのがいろんなテーマに対応できて望ましい。
おおまかに解説するとmainブランチにpushされたらActionsが発火しpublicディレクトリの成果物をgh-pagesブランチに書き出すというもの。
なのでブランチ名や出力ディレクトリ名が上記と異なる場合は適時変更すること。
あとはNode.jsのライブラリを使っているのでそのセットアップとContentfulの環境変数設定も忘れずに。

準備ができたら上記ファイルをレポジトリにプッシュする。そうするとActionsのパイプラインが動き始める(Actionsタブで確認)。
問題なく終了すれば(グリーンライト)OK。

![FireShot Capture 092 - add gh-pages.yml · higebobo_hugo-contentful-blog@a45de7c - github.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/301cc180-68dc-e62d-08ab-a0604a751336.png)

さてこのままではgh-pagesブランチにhtmlが作成されるだけなので次に公開設定を行う。
`Github`ダッシュボート>`Settings`>左サイドバー`Pages`をクリック
`Source`のところのブランチを`gh-pages`に変更して`Save`をクリック(忘れずに)

![FireShot Capture 093 - Pages - github.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/f6ffc77f-e1d6-ce2a-f7c6-c342630669cd.png)

公開ページのリンクが表示されるのでそこをクリックして

たらーーーーん。

![FireShot Capture 096 - Site not found · GitHub Pages - higebobo.github.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/2cdd3124-d99c-9b91-95aa-12de7ca934ac.png)

あれっ。

となるが、残念ながら公開まで少し時間がかかる。
本当にビルドできたかどうかは`gh-pages`ブランチを確認すればわかる。

![FireShot Capture 095 - higebobo_hugo-contentful-blog at gh-pages - github.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/6579a520-2d61-a58a-8a56-918925c9e642.png)

ルートにindex.htmlなどがあればよい。
さてしばらくして確認して、えーっと、よしっ。

![FireShot Capture 100 - Hugo Contentful Blog - higebobo.github.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/58ce9a51-bd95-0d62-a5cc-1bdddbc62bfb.png)

あれっ。

はいHugoの設定ですね。`baseURL`がデフォルトの`example.com`とか適当だったので自分のところに合わせる。

config.toml

```toml
baseURL = "https://higebobo.github.io/hugo-contentful-blog/"
```

ちなみに汎用性をもたせるならbaseURLは指定せずに相対的リンクを用いる方法もある(URLが変更された場合のソース改修が不要のため)。

```toml
baseURL = ""
relativeURLs = true
```

こちらのほうがオススメだがHugoのレイアウトで絶対URL表記を使っていない前提となる。
今回のBlondeは一部のcssが絶対URL表記なのでそこを直す必要があるので取り敢えずパスする。

(2021/9/11追記)
ローカル環境やデプロイ先で柔軟にサイト公開したい場合`baseURL=""`にしておいてビルド時に動的に設定するほうが望ましい。
そのため`baseURL=""`にしておいてActionsでのビルドコマンドの引数 `--baseUrl=https://higebobo.github.io/hugo-contentful-blog/` と渡す方法を最終的にはこちらを採用した。
package.jsonで環境変数を渡してもよいが、直接contentful-hugoを呼び出すようにした。
その場合は明示的にパスを指定しないとビルドに失敗する。

```diff
-        run: npm run build
+        run: ./node_modules/.bin/contentful-hugo && hugo --minify --baseUrl="https://higebobo.github.io/hugo-contentful-blog/"
```

URLは環境変数(Secrets)で`BASE_URL`などと設定して`--baseUrl="${BASE_URL}"`でもよい。


再度プッシュして完成。

![FireShot Capture 102 - Hugo Contentful Blog - higebobo.github.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691494/9db92f68-3010-fdda-7388-c63c0e676f6c.png)

実際のサイトはこちら　→　[Hugo Contentful Blog](https://higebobo.github.io/hugo-contentful-blog/)

# まとめ

Github Actionsを用いたビルドとGithub Pagesでの公開まで説明した。
ContentfulからのWebhookで自動ビルドまで説明したかったが、長くなったので次回に回す。

[今回のソース](https://github.com/higebobo/hugo-contentful-blog/releases/tag/v1.2)