Beautiful Hugoの適用

ゴール

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

前提

「Hugo + GitLab Pagesブログサーバ」, 「VSCode開発クライアント」を実施し、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配下に、Beautiful Hugoリポジトリへのシンボリックリンクを作成します。

   > cd (Gitプロジェクトのルートディレクトリ)
   > mkdir themes
   > git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo
   

3. Visual Studio Codeで管理するHugoリポジトリ資産の/themes/beautifulhugo/exampleSite/*を/にコピーします。

   Hugoリポジトリ資産
   ├ content           ← exampleSiteからコピー
   ├ layouts           ← exampleSiteからコピー
   ├ static            ← exampleSiteからコピー
   ├ themes
   ├ .gitlab-ci.yml
   ├ .gitmodules
   └ config.toml       ← exampleSiteからコピー
   

4. Visual Studio Codeで/config.tomlを開き、baseurlをサンプルサイトのルートURLに変更します。

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を開き、imageを非hugo_extendedに変更し、hugo modの記述をコメントアウトして、git submoduleの記述を追加します。

   ...
   image: registry.gitlab.com/pages/hugo:latest                   ← 変更
   
   variables:
     HUGO_ENV: production
     #THEME_URL: "github.com/theNewDynamic/gohugo-theme-ananke"   ← コメントアウト
   
   default:
     before_script:
       - apk add --no-cache go curl bash nodejs
       - git submodule update --init --recursive                  ← 追加
       #- hugo mod get -u $THEME_URL                              ← コメントアウト
       ## Uncomment the following if you use PostCSS...
       #- npm install postcss postcss-cli autoprefixer
   ...
   

Visual Studio Codeで行った変更を、GitLabへアップロード

「Visual Studio Codeで変更したHugoリポジトリ資産をGitLabへアップロード - VSCode開発クライアント」を実施します。

GitLabで自動的に行われたビルド/公開結果を確認

「GitLabで自動的に行われたビルド/公開結果を確認 - VSCode開発クライアント」を実施します。