チュートリアルGitLab を使って Hugo サイトをビルド、テスト、デプロイしましょう

このチュートリアルでは、CI/CD パイプラインを作成して Hugo サイトをビルド、テスト、デプロイする手順を説明します。

このチュートリアルが終わるころには、パイプラインが動作し、Hugo サイトが GitLab Pages にデプロイされていることでしょう。

ここでは、これから行うことの概要を説明します：

  1. Hugoサイトの準備
  2. GitLabプロジェクトを作成します。
  3. HugoサイトをGitLabにプッシュします。
  4. CI/CDパイプラインでHugoサイトを構築しましょう。
  5. GitLab Pagesを使ってHugoサイトをデプロイし、表示します。

前提条件

Hugoサイトの準備

まず、Hugo サイトが GitLab にプッシュできる状態になっていることを確認しましょう。コンテンツ、テーマ、設定ファイルが必要です。

サイトの構築はGitLab がやってくれます。実際、public フォルダをアップロードしないことが重要です。後でコンフリクトを引き起こす可能性があります。

public フォルダを除外する最も簡単な方法は、.gitignore ファイルを作成し、そこにpublic フォルダを追加することです。

これは、Hugoプロジェクトのトップレベルで次のコマンドを実行することでできます：

echo "/public/" >> .gitignore

これは、/public/ を新しい.gitignore ファイルに追加するか、既存のファイルに追加します。

GitLab プロジェクトを作成したら、Hugo サイトをプッシュする準備ができました。

GitLab プロジェクトの作成

まだ作成していない場合は、Hugo サイト用に空の GitLab プロジェクトを作成します。

空のプロジェクトを作るには、GitLab で

  1. 左サイドバーの上部にある「新規作成({plus})」と「新規プロジェクト/リポジトリ」を選択します。
  2. 空白プロジェクトの作成」を選択します。
  3. プロジェクトの詳細を入力します：
    • プロジェクト名フィールドにプロジェクト名を入力してください。名前は小文字または大文字 (a-zA-Z)、数字 (0-9)、絵文字、アンダースコア (_)で始まる必要があります。また、ドット（.）、プラス（+）、ダッシュ（-）、スペースを含めることもできます。
    • Project slugフィールドには、プロジェクトのパスを入力します。GitLabインスタンスはスラッグをプロジェクトへのURLパスとして使用します。スラッグを変更するには、まずプロジェクト名を入力し、次にスラッグを変更します。
    • Visibility Levelは非公開か公開のどちらかを選びます。非公開を選択した場合、ウェブサイトは公開されますが、コードは非公開のままです。
    • 既存のリポジトリをプッシュするので、リポジトリの初期化（Initialize repository with a README）のチェックを外してください。
  4. 準備ができたら、プロジェクトの作成を選択します。
  5. この新しいプロジェクトにコードをプッシュするための指示が表示されるはずです。次のステップでは、この説明が必要になります。

これで、Hugoサイトのホームができました！

HugoサイトをGitLabにプッシュしましょう

次に、ローカルの Hugo サイトをリモートの GitLab プロジェクトにプッシュする必要があります。

前のステップで GitLab プロジェクトを新規作成した場合は、リポジトリの初期化とコミット、ファイルのプッシュの手順が表示されます。

そうでない場合は、ローカルの Git リポジトリのリモートオリジンが GitLab プロジェクトと一致していることを確認しましょう。

デフォルトのブランチをmain とすると、次のコマンドで Hugo サイトをプッシュできます：

git push origin main

プッシュすると、public フォルダ public以外のすべてのコンテンツが表示されます。public この publicフォルダは.gitignore ファイルによって除外されました。

次のステップでは、CI/CDパイプラインを使ってサイトをビルドし、public フォルダを再作成します。

Hugoサイトの構築

GitLab で Hugo サイトを構築するには、まず.gitlab-ci.yml ファイルを作成して CI/CD パイプラインの指示を指定する必要があります。これをやったことがなければ、難しく感じるかもしれません。しかし、GitLabは必要なものをすべて提供してくれます。

設定オプションの追加

設定オプションは.gitlab-ci.ymlという特別なファイルで指定します。.gitlab-ci.yml ：

  1. 左サイドバーで、コード > リポジトリを選択します。
  2. ファイルリストの上にあるプラスアイコン（+）を選択し、ドロップダウンリストから［新規ファイル］を選択します。
  3. ファイル名には.gitlab-ci.ymlと入力します。先頭のピリオドは省略しないでください。
  4. テンプレートを適用」ドロップダウンリストを選択し、フィルターボックスに「Hugo」と入力します。
  5. Hugoを選択すると、CI/CDを使用してHugoサイトを構築するために必要なすべてのコードがファイルに入力されます。

この.gitlab-ci.yml ファイルで何が起こっているのか、詳しく見てみましょう。

default:
  image: "${CI_TEMPLATE_REGISTRY_HOST}/pages/hugo:latest"

variables:
  GIT_SUBMODULE_STRATEGY: recursive

test:  # builds and tests your site
  script:
    - hugo
  rules:
    - if: $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH

pages:  # a predefined job that builds your pages and saves them to the specified path.
  script:
    - hugo
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
  environment: production
  • image は GitLab レジストリから Hugo を含むイメージを指定します。このイメージは、サイトを構築する環境を作るために使われます。
  • GIT_SUBMODULE_STRATEGY 変数を使うことで、GitLab が Git サブモジュールも参照するようになります。
  • test は、Hugo サイトをデプロイする前にテストを実行するジョブです。デフォルトブランチに変更をコミットする場合を除き、すべての場合にテストジョブが実行されます。script の下にコマンドを配置します。このジョブのコマンド -hugo- はサイトをビルドし、テストできるようにします。
  • pages は静的サイトジェネレータからページを作成するための定義済みのジョブです。このジョブでも、hugo コマンドを実行してサイトを構築します。そして、artifacts は、作成されたページがpublicというディレクトリに追加されるように指定します。rulesでは、このコミットがデフォルトブランチで行われたことを確認しています。通常、feature ブランチから本番サイトをビルドしてデプロイすることはないでしょう。

このファイルには何も追加する必要はありません。準備ができたら、ページの一番下にある変更をコミットを選択します。

これで、Hugoサイトを構築するためのパイプラインが起動しました！

Hugoサイトのデプロイと表示

GitLab がサイトをビルドしてデプロイするのを見ることができます。

左側のナビゲーションからBuild > Pipelines を選択します。

GitLab がtest とpages のジョブを実行したことがわかります。

サイトを表示するには、左側のナビゲーションでSettings > Pagesを選択します。

パイプラインのpages ジョブが、public ディレクトリの内容を GitLab Pages にデプロイしました。Access pages の下に、https://<your-namespace>.gitlab.io/<project-path> という形式でリンクが表示されているはずです。

まだパイプラインを実行していない場合は、このリンクは表示されません。

表示されたリンクを選択すると、サイトが表示されます。

最初にHugoサイトを表示したとき、スタイルシートは動作しません。心配しないでください。Hugo の設定ファイルを少し変更する必要があります。Hugo は GitLab Pages サイトの URL を知っている必要があります。これは、スタイルシートやその他のアセットへの相対リンクを構築するためです：

  1. ローカルの Hugo サイトで、config.yaml またはconfig.toml ファイルを開いてください。
  2. BaseURL パラメータの値を GitLab Pages の設定に表示される URL に合わせます。
  3. 変更したファイルを GitLab にプッシュすると、パイプラインが再び起動します。

パイプラインが終了すると、先ほど指定した URL でサイトが動いているはずです。

Hugo サイトが非公開リポジトリに保存されている場合は、Pages サイトが見えるように権限を変更する必要があります。そうしないと、作成したユーザーしか見ることができません。権限を変更するには

  1. 設定 > 一般 > 可視性、プロジェクト機能、権限に進みます。
  2. Pagesセクションまでスクロールダウンし、ドロップダウンリストからEveryoneを選択します。
  3. 変更を保存を選択します。

これで誰でも見ることができます。

GitLab を使って Hugo サイトを構築し、テストし、デプロイしました。すばらしい成果です！

サイトを変更して GitLab にプッシュするたびに、サイトは自動的にビルド、テスト、デプロイされます。

CI/CD パイプラインについてもっと知りたい方は、複雑なパイプラインの作り方についてのチュートリアルをご覧ください。また、さまざまな種類のテストについても学ぶことができます。