Docsyの適用

ゴール

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

前提

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

適用方法

Visual Studio Codeでテーマ本体, テーマ設定/コンテンツを変更

1. Visual Studio Codeで管理するHugoリポジトリ資産の/.gitlab-ci.yml以外を削除します。

2. ブラウザでDocsyのサンプルプロジェクトを開き、すべてのファイルをダウンロードして、Visual Studio Codeで管理するHugoリポジトリ資産の/にコピーします。

   Hugoリポジトリ資産
   ├ assets           ← ダウンロードしたものをコピー
   ├ content          ← ダウンロードしたものをコピー
   ├ layouts          ← ダウンロードしたものをコピー
   ├ hugo.yaml        ← ダウンロードしたものをコピー
   ├ go.mod           ← ダウンロードしたものをコピー
   ├ go.sum           ← ダウンロードしたものをコピー
   └ .gitlab-ci.yml
   

   なお、テーマ本体/themesはHugoリポジトリ資産として登録しません。 後続のCI/CD設定変更により、ビルド時に動的に取り込まれます。

3. Visual Studio Codeで/hugo.yamlを開き、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:extsが指定されていることを確認し、THEME_URLをDocsyに変更して、PostCSSのインストール記述を追加します。

   ...
   image: hugomods/hugo:exts                            ← 確認
   
   variables:
     HUGO_ENV: production
     THEME_URL: "github.com/google/docsy"               ← 変更
   
   default:
     before_script:
       - hugo mod get -u $THEME_URL
       - npm install postcss postcss-cli autoprefixer   ← 追加
   ...
   

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

変更した資産をGitLabへアップロードします。

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

ビルド/公開結果を確認します。