Universalの適用
ゴール
下記は、Hugo + GitLab Pagesによるブログ環境の構成要素です。 ここでは、GitLabのHugoテーマ/コンテンツリポジトリに含まれるテーマ本体をUniversalに変更し、テーマ設定/コンテンツをUniversalサンプルに入れ替え、CI/CD設定をUniversal向けに変更して、サンプルサイトをビルド/公開することをゴールとします。
前提
GitLab Pages/Hugoテンプレートによるサーバ環境, Visual Studio Codeによる開発クライアント環境がある前提で説明します。
適用方法
Visual Studio Codeでテーマ本体, テーマ設定/コンテンツを変更
Visual Studio Codeで管理するHugoリポジトリ資産の
/.gitlab-ci.yml
以外を削除します。Visual Studio Codeのターミナルで下記を実行し、Visual Studio Codeで管理するHugoリポジトリ資産の
/themes
配下に、Universalリポジトリへのシンボリックリンクを作成します。> cd (Gitプロジェクトのルートディレクトリ) > mkdir themes > git submodule add https://github.com/devcows/hugo-universal-theme.git themes/hugo-universal-theme
Visual Studio Codeで管理するHugoリポジトリ資産の
/themes/hugo-universal-theme/exampleSite/*
を/
にコピーします。Hugoリポジトリ資産 ├ content ← exampleSiteからコピー ├ data ← exampleSiteからコピー ├ static ← exampleSiteからコピー ├ themes ├ .gitlab-ci.yml ├ .gitmodules └ config.toml ← exampleSiteからコピー
Visual Studio Codeで
/config.toml
を開き、baseurl
をサンプルサイトのルートURLに変更します。
- 注意
- 「テーマを適用すると「Error: failed to load modules:…」が発生する」の対処が必要になるかもしれません。
Visual Studio CodeでCI/CD設定をテーマに合わせて変更
Visual Studio Codeで管理するHugoリポジトリ資産の
/.gitlab-ci.yml
を削除します。ブラウザでGitLab Pages/Hugoテンプレートの.gitlab-ci.ymlを開き、ダウンロードして、Visual Studio Codeで管理するHugoリポジトリ資産の
/
にコピーします。Visual Studio Codeで
/.gitlab-ci.yml
を開き、image
をhugo:std
に変更し、hugo mod
の記述をコメントアウトして、git submodule
の記述を追加します。... image: hugomods/hugo:std ← 変更(hugo:extsでもOK) ... default: before_script: # - hugo mod get -u $THEME_URL ← コメントアウト - git submodule update --init --recursive ← 追加 ...
Visual Studio Codeで行った変更を、GitLabへアップロード
GitLabで自動的に行われたビルド/公開結果を確認
ビルド/公開結果を確認します。
トラブルシューティング
テーマを適用すると「Error: failed to load modules:…」が発生する
現象
/themes/hugo-universal-theme/exampleSite/config.toml
を使用してテーマを適用すると、下記エラーが発生します。
: Error: failed to load modules: module "universal" not found in "/builds/universal"; either add it as a Hugo Module or store it in "/builds".: module does not exist
原因
config.toml
のthemesDir
の誤り。値が"../.."
となっています。
対処
config.toml
のthemesDir
の値を"themes"
に修正します。
...
themesDir = "themes"
...