ヘッドレスCMSのContentfulをHugoと連携してGithub Pagesで公開する(1)
概要
Contentfulは近年流行りのヘッドレスCMSの中でも恐らく最もポピュラーなものであろう。
NuxtやGatsby等との連携はよく行われている。
一方、同様のサイトジェネレータの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との連携を解説する。
Author And Source
この問題について(ヘッドレスCMSのContentfulをHugoと連携してGithub Pagesで公開する(1)), 我々は、より多くの情報をここで見つけました https://qiita.com/higebobo/items/fb3a7d268e017f97cefe著者帰属:元の著者の情報は、元の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 .