正式なドキュメントは英語版であり、この日本語訳はAI支援翻訳により作成された参考用のものです。日本語訳の一部の内容は人間によるレビューがまだ行われていないため、翻訳のタイミングにより英語版との間に差異が生じることがあります。最新かつ正確な情報については、英語版をご参照ください。

チュートリアル: GitLabでHugoサイトをビルド、テスト、デプロイする

このチュートリアルでは、Hugoサイトをビルド、テスト、およびデプロイするためのCI/CDパイプラインの作成について説明します。

このチュートリアルの終わりまでに、動作するパイプラインと、GitLab PagesにデプロイされたHugoサイトが完成します。

これから行うことの概要は次のとおりです:

  1. Hugoサイトを準備します。
  2. GitLabプロジェクトを作成します。
  3. HugoサイトをGitLabにプッシュします。
  4. CI/CDパイプラインを使用してHugoサイトをビルドします。
  5. GitLab Pagesを使用してHugoサイトをデプロイします。

はじめる前

  • GitLab.comのアカウント。
  • Gitに精通していること。
  • Hugoサイト（まだお持ちでない場合は、Hugoクイックスタートに従ってください）。

Hugoサイトを準備する

まず、HugoサイトをGitLabにプッシュする準備ができていることを確認します。コンテンツ、テーマ、およびHugo設定ファイルが必要です。

GitLabがサイトをビルドするため、サイトをビルドしないでください。実際、後で競合が発生する可能性があるため、publicフォルダーをアップロードnot（しない）ことが重要です。

publicフォルダーを除外する最も簡単な方法は、.gitignoreファイルを作成し、public/をテキストとして新しい行を追加することです。

これは、Hugoプロジェクトの最上位レベルで次のコマンドを使用して実行できます:

echo "public/" >> .gitignore

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

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

GitLabプロジェクトを作成する

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

空のプロジェクトをGitLabに作成するには:

  1. 左側のサイドバーの上部で、新規作成（ plus ）を選択し、新規プロジェクト/リポジトリを選択します。
  2. 空のプロジェクトの作成を選択します。
  3. プロジェクトの詳細を入力します:
    • プロジェクト名フィールドに、プロジェクトの名前を入力します。名前は、小文字または大文字（a-zA-Z）、数字（0-9）、絵文字、またはアンダースコア（_）で始まる必要があります。ドット（.）、プラス記号（+）、ダッシュ（-）、またはスペースも使用できます。
    • プロジェクトslugフィールドに、プロジェクトへのパスを入力します。GitLabインスタンスは、このslugをプロジェクトへのURLパスとして使用します。slugを変更するには、最初にプロジェクト名を入力し、次にslugを変更します。
    • 表示レベルは、PrivateまたはPublicのいずれかです。Privateを選択した場合でも、Webサイトは公開されていますが、コードはプライベートのままです。
    • 既存のリポジトリをプッシュするため、リポジトリを初期化しREADMEファイルを生成するのチェックを外します。
  4. 準備ができたら、プロジェクトを作成を選択します。
  5. この新しいプロジェクトにコードをプッシュする手順が表示されます。次の手順では、これらの手順が必要になります。

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

HugoサイトをGitLabにプッシュする

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

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

それ以外の場合は、ローカルGitリポジトリのリモートオリジンがGitLabプロジェクトと一致することを確認してください。

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

git push origin main

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

次の手順では、CI/CDパイプラインを使用してサイトをビルドし、そのpublicフォルダーを再作成します。

CI/CDパイプラインを使用してHugoサイトをビルドする

GitLabでHugoサイトをビルドするには、まず、CI/CDパイプラインの指示を指定するための.gitlab-ci.ymlファイルを作成する必要があります。これを以前に行ったことがない場合は、気が遠くなるように聞こえるかもしれません。ただし、GitLabには必要なものがすべて用意されています。

以下に示す.gitlab-ci.ymlファイルを使用するには、hugo.tomlファイルも一致するテーマパスを示していることを確認してください。以下のhugo.tomlファイルの例は、GitLab PagesプロジェクトのbaseURL設定も示しています。

baseURL = 'https://<your-namespace>.gitlab.io/<project-path>'
languageCode = 'en-us'
title = 'Hugo on GitLab'
[module]
[[module.imports]]
  path = 'github.com/adityatelange/hugo-PaperMod'

GitLab設定オプションを追加する

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

Hugoテンプレートを使用して.gitlab-ci.ymlファイルを作成するには:

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

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

default:
  image: "hugomods/hugo:exts"

variables:
  GIT_SUBMODULE_STRATEGY: recursive
  THEME_URL: "github.com/adityatelange/hugo-PaperMod"

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

create-pages:  # a user-defined job that builds your pages and saves them to the specified path.
  script:
    - hugo
  pages: true  # specifies that this is a Pages job
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
  environment: production
  • imageは、Hugoを含むGitLabレジストリからのイメージを指定します。このイメージは、サイトがビルドされる環境を作成するために使用されます。
  • GIT_SUBMODULE_STRATEGY変数は、GitLabがGitサブモジュールも検索するようにします。これらは、Hugoテーマに使用されることがあります。
  • testは、デプロイする前にHugoサイトでテストを実行できるジョブです。テストジョブは、デフォルトブランチへの変更をコミットする場合を除き、すべての場合に実行されます。scriptの下にコマンドを配置します。このジョブのコマンド-hugo-サイトをビルドしてテストできるようにします。
  • deploy-pagesは、静的サイトジェネレーターからページを作成するためにユーザーが定義したジョブです。繰り返しますが、このジョブはユーザー定義のジョブ名を使用し、hugoコマンドを実行してサイトをビルドします。次に、pages: trueはこれがページジョブであることを指定し、artifactsはこれらの結果のページがpublicというディレクトリに追加されることを指定します。rulesを使用すると、このコミットがデフォルトブランチで行われたことを確認できます。通常、別のブランチからライブサイトをビルドおよびデプロイすることはお勧めしません。

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

Hugoサイトをビルドするためのパイプラインをトリガーしたばかりです。

GitLab Pagesを使用してHugoサイトをデプロイする

手際が良ければ、GitLabがサイトをビルドしてデプロイするのを確認できます。

左側のナビゲーションから、ビルド > パイプラインを選択します。

GitLabがtestおよびdeploy-pagesジョブを実行したことがわかります。

サイトを表示するには、パイプラインが完了したら、左側のナビゲーションで、デプロイ > Pagesを選択して、ページWebサイトへのリンクを見つけます。

Hugo設定オプションを追加する

最初にHugoサイトを表示すると、スタイルシートは機能しません。心配しないでください。Hugo設定ファイルで小さな変更を行う必要があります。Hugoは、スタイルシートやその他のアセットへの相対リンクをビルドできるように、GitLab PagesサイトのURLを知る必要があります:

  1. ローカルのHugoサイトで、最新の変更をプルし、config.yamlまたはconfig.tomlファイルを開きます。
  2. BaseURLパラメータの値を、GitLab Pages設定に表示されるURLと一致するように変更します。
  3. 変更したファイルをGitLabにプッシュすると、パイプラインが再度トリガーされます。

GitLab PagesのURLを見つける

パイプラインが完了したら、デプロイ > Pagesに移動して、Pagesウェブサイトへのリンクを見つけます。

パイプラインのpagesジョブは、publicディレクトリのコンテンツをGitLab Pagesにデプロイしました。ページへアクセスの下に、https://<your-namespace>.gitlab.io/<project-path>形式でリンクが表示されます。

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

表示されたリンクを選択して、サイトを表示します。Hugo設定でBaseURL設定を変更して、GitLabデプロイURLと一致させる必要があります。

GitLab Pagesの表示レベルを設定する

Hugoサイトがプライベートリポジトリに保存されている場合は、ページサイトが表示されるようにアクセス許可を変更する必要があります。それ以外の場合は、プロジェクトメンバーのみに表示されます。サイトのアクセス許可を変更するには:

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

これで、全員がURLでサイトを表示できます。

GitLabでHugoサイトをビルド、テスト、デプロイしました。素晴らしい出来栄えです。

サイトを変更してGitLabにプッシュするたびに、.gitlab-ci.ymlファイルのルールを使用して、サイトが自動的にビルド、テスト、デプロイされます。

CI/CDパイプラインの詳細については、複雑なパイプラインを作成する方法に関するこのチュートリアルをお試しください。利用可能なさまざまな種類のテストの詳細についても学ぶことができます。