Universalの適用

Hugoのテーマ「Universal」の適用方法を紹介します。

ゴール

下記は、Hugo + GitLab Pagesによるブログ環境の構成要素です。 ここでは、GitLabのHugoテーマ/コンテンツリポジトリに含まれるテーマ本体をUniversalに変更し、テーマ設定/コンテンツをUniversalサンプルに入れ替え、CI/CD設定をUniversal向けに変更して、サンプルサイトをビルド/公開することをゴールとします。

Hugo + GitLab Pagesによるブログ環境 : Hugoテーマ/コンテンツリポジトリのポジションとファイル構成
Hugo + GitLab Pagesによるブログ環境 : Hugoテーマ/コンテンツリポジトリのポジションとファイル構成

前提

GitLab Pages/Hugoテンプレートによるサーバ環境, Visual Studio Codeによる開発クライアント環境がある前提で説明します。

適用方法

Visual Studio Codeでテーマ本体, テーマ設定/コンテンツを変更
  1. Visual Studio Codeで管理するHugoリポジトリ資産の/.gitlab-ci.yml以外を削除します。

  2. 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
    
  3. Visual Studio Codeで管理するHugoリポジトリ資産の/themes/hugo-universal-theme/exampleSite/*/にコピーします。

    Hugoリポジトリ資産
    ├ content          ← exampleSiteからコピー
    ├ data             ← exampleSiteからコピー
    ├ static           ← exampleSiteからコピー
    ├ themes
    ├ .gitlab-ci.yml
    ├ .gitmodules
    └ config.toml      ← exampleSiteからコピー
    
  4. Visual Studio Codeで/config.tomlを開き、baseurlサンプルサイトのルートURLに変更します。

注意
テーマを適用すると「Error: failed to load modules:…」が発生する」の対処が必要になるかもしれません。
Visual Studio CodeでCI/CD設定をテーマに合わせて変更
  1. Visual Studio Codeで管理するHugoリポジトリ資産の/.gitlab-ci.ymlを削除します。

  2. ブラウザでGitLab Pages/Hugoテンプレートの.gitlab-ci.ymlを開き、ダウンロードして、Visual Studio Codeで管理するHugoリポジトリ資産の/にコピーします。

  3. Visual Studio Codeで/.gitlab-ci.ymlを開き、imagehugo: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へアップロードします。

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.tomlthemesDirの誤り。値が"../.."となっています。

対処

config.tomlthemesDirの値を"themes"に修正します。

	...
	themesDir = "themes"
	...