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

概要

今回のソース

Contentfulは近年流行りのヘッドレスCMSの中でも恐らく最もポピュラーなものであろう。
NuxtやGatsby等との連携はよく行われている。

一方、同様のサイトジェネレータのHugoで使う方法はないかと探していたらこんなのがあったので紹介する。

ModiiMedia/contentful-hugo

環境

• Hugo: v0.71.0-DEV/extended
• Node.js: v14.15.4

上記はあくまでも現在のローカル環境である。
最終的にGithub Actionsを用いて公開する場合は異なるバージョンを用いる。

Hugoによるサイト構築

Hugoのインストールについては割愛する(オフィシャルガイドはこちら→Install Hugo | Hugo)。

サイト作成

hugo new site hugo-contentful-sample

レポジトリ初期化

cd hugo-contentful-sample
git init
echo '*~' >> .gitignore
echo '*.bak' >> .gitignore
echo '*.orig' >> .gitignore
echo '.env' >> .gitignore
echo 'public' >> .gitignore
echo 'resources' >> .gitignore

テーマの導入

次にテーマを導入する。
自分で作成することもできるが、既存のテーマを使うのが手っ取り早い。
今回はBlondeを用いる。

git submodule add https://github.com/opera7133/Blonde.git themes/blonde

コピーでもよいのだが、上記例ではgitのサブモジュールとして導入している。
自分の経験上、オリジナルレイアウトにまったく手をつけないシチュエーションは少ないのでレイアウトをオーバライドしてカスタマイズするようにしている(もちろんこの方法はテーマのレポジトリが大幅に改修された場合に対応がいる場合がある)。

次に設定ファイルやサンプルコンテンツをコピーする

cp -pr themes/blonde/exampleSite/{config.toml,content,package.json} .

BlondeはpostcssというNode.jsのCSS Processorを使っているためパッケージのインストールが必要となる(ほとんどのテーマはNode.jsを要求しないので以下のインストール作業は不要)

パッケージのインストール

npm install
echo 'node_modules' >> .gitignore

設定ファイルの修正(themeのところが重要)

--- config.toml.orig	2021-08-16 07:50:27.071038402 +0900
+++ config.toml	2021-08-16 08:12:05.769485895 +0900
@@ -2,9 +2,10 @@
 title = "Blonde"
 author = "wamo"
 languageCode = "en"
-DefaultContentLanguage = "en"
+DefaultContentLanguage = "ja"
 enableInlineShortcodes = true
-theme = "Blonde"
+themesDir = "./themes"
+theme = "blonde"
 enableRobotsTXT = true

上記設定はあくまでも取り敢えず動くことを目的としているので今後必要に応じて修正していく。

サービス起動

ここまでできたのでサービスを起動する。

hugo serve

デフォルトでは http://localhost:1313 で公開されるので確認する。

トップ画面

ブログ本文

今回はここまで。(今回のソース)
次回Contentfulとの連携を解説する。