ヘッドレス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で自動ビルドまで説明したかったが、長くなったので次回に回す。
Author And Source
この問題について(ヘッドレスCMSのContentfulをHugoと連携してGithub Pagesで公開する(4)), 我々は、より多くの情報をここで見つけました https://qiita.com/higebobo/items/8ea447e990efb528a3fb著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .