チュートリアルGitLab を使って Hugo サイトをビルド、テスト、デプロイしましょう
このチュートリアルでは、CI/CD パイプラインを作成して Hugo サイトをビルド、テスト、デプロイする手順を説明します。
このチュートリアルが終わるころには、パイプラインが動作し、Hugo サイトが GitLab Pages にデプロイされていることでしょう。
ここでは、これから行うことの概要を説明します:
- Hugoサイトの準備
- GitLabプロジェクトを作成します。
- HugoサイトをGitLabにプッシュします。
- CI/CDパイプラインでHugoサイトを構築しましょう。
- GitLab Pagesを使ってHugoサイトをデプロイし、表示します。
前提条件
- GitLab.comのアカウント。
- Gitに精通していること。
- Hugoサイト(まだお持ちでない方は、Hugoクイックスタートに従ってください。)
Hugoサイトの準備
まず、Hugo サイトが GitLab にプッシュできる状態になっていることを確認しましょう。コンテンツ、テーマ、設定ファイルが必要です。
サイトの構築はGitLab がやってくれます。実際、public
フォルダをアップロードしないことが重要です。後でコンフリクトを引き起こす可能性があります。
public
フォルダを除外する最も簡単な方法は、.gitignore
ファイルを作成し、そこにpublic
フォルダを追加することです。
これは、Hugoプロジェクトのトップレベルで次のコマンドを実行することでできます:
echo "/public/" >> .gitignore
これは、/public/
を新しい.gitignore
ファイルに追加するか、既存のファイルに追加します。
GitLab プロジェクトを作成したら、Hugo サイトをプッシュする準備ができました。
GitLab プロジェクトの作成
まだ作成していない場合は、Hugo サイト用に空の GitLab プロジェクトを作成します。
空のプロジェクトを作るには、GitLab で
- 左サイドバーの上部にある「新規作成({plus})」と「新規プロジェクト/リポジトリ」を選択します。
- 空白プロジェクトの作成」を選択します。
- プロジェクトの詳細を入力します:
-
プロジェクト名フィールドにプロジェクト名を入力してください。名前は小文字または大文字 (
a-zA-Z
)、数字 (0-9
)、絵文字、アンダースコア (_
)で始まる必要があります。また、ドット(.
)、プラス(+
)、ダッシュ(-
)、スペースを含めることもできます。 - Project slugフィールドには、プロジェクトのパスを入力します。GitLabインスタンスはスラッグをプロジェクトへのURLパスとして使用します。スラッグを変更するには、まずプロジェクト名を入力し、次にスラッグを変更します。
- Visibility Levelは非公開か公開のどちらかを選びます。非公開を選択した場合、ウェブサイトは公開されますが、コードは非公開のままです。
- 既存のリポジトリをプッシュするので、リポジトリの初期化(Initialize repository with a README)のチェックを外してください。
-
プロジェクト名フィールドにプロジェクト名を入力してください。名前は小文字または大文字 (
- 準備ができたら、プロジェクトの作成を選択します。
- この新しいプロジェクトにコードをプッシュするための指示が表示されるはずです。次のステップでは、この説明が必要になります。
これで、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
:
- 左サイドバーで、コード > リポジトリを選択します。
- ファイルリストの上にあるプラスアイコン(+)を選択し、ドロップダウンリストから[新規ファイル]を選択します。
- ファイル名には
.gitlab-ci.yml
と入力します。先頭のピリオドは省略しないでください。 - テンプレートを適用」ドロップダウンリストを選択し、フィルターボックスに「Hugo」と入力します。
- 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 を知っている必要があります。これは、スタイルシートやその他のアセットへの相対リンクを構築するためです:
- ローカルの Hugo サイトで、
config.yaml
またはconfig.toml
ファイルを開いてください。 -
BaseURL
パラメータの値を GitLab Pages の設定に表示される URL に合わせます。 - 変更したファイルを GitLab にプッシュすると、パイプラインが再び起動します。
パイプラインが終了すると、先ほど指定した URL でサイトが動いているはずです。
Hugo サイトが非公開リポジトリに保存されている場合は、Pages サイトが見えるように権限を変更する必要があります。そうしないと、作成したユーザーしか見ることができません。権限を変更するには
- 設定 > 一般 > 可視性、プロジェクト機能、権限に進みます。
- Pagesセクションまでスクロールダウンし、ドロップダウンリストからEveryoneを選択します。
- 変更を保存を選択します。
これで誰でも見ることができます。
GitLab を使って Hugo サイトを構築し、テストし、デプロイしました。すばらしい成果です!
サイトを変更して GitLab にプッシュするたびに、サイトは自動的にビルド、テスト、デプロイされます。
CI/CD パイプラインについてもっと知りたい方は、複雑なパイプラインの作り方についてのチュートリアルをご覧ください。また、さまざまな種類のテストについても学ぶことができます。