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

概要

ContentfulとHugoを連携させてサイト公開を行う方法の四回目。

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

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

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

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

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

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。

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

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

たらーーーーん。

あれっ。

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

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

あれっ。

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

config.toml

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

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

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を呼び出すようにした。
その場合は明示的にパスを指定しないとビルドに失敗する。

-        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}"でもよい。

再度プッシュして完成。

実際のサイトはこちら　→　Hugo Contentful Blog

まとめ

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

今回のソース