こんにちは！開発現場の裏側で、日夜パイプラインの最適化や自動化に奔走しているシニアエンジニアです。
今回は、バージョン管理からCI/CD、ホスティングまでをシームレスに繋げてくれる強力なツール、「GitLab Pages」について徹底解説します。
「静的サイトのホスティングならGitHub Pagesで十分じゃない？」
そう思っているあなたこそ、この記事を最後まで読んでみてください。GitLabが持つ圧倒的なCI/CDの統合力を知れば、あなたの開発ワークフローの概念がガラリと変わるはずです。
これをマスターすれば、ドキュメントの公開やポートフォリオサイトの立ち上げ、さらにはプレビュー環境の構築まで、毎日の作業が劇的に楽になりますよ。さあ、一緒にその扉を開けていきましょう！
—
1. なぜGitLab Pagesなのか？ GitHub Pagesとの決定的な違い
まず、「なぜGitLab Pagesを使うのか」という本質的な話をさせてください。
もちろんGitHub Pagesも素晴らしいサービスですが、GitLab Pagesには「最初から強力なCI/CD（GitLab CI/CD）がフルパワーで組み込まれている」という圧倒的なアドバンテージがあります。
- 任意のCI/CDパイプラインが使える: GitHub PagesもGitHub Actionsでビルドできますが、GitLab PagesはGitLabの標準機能として組み込まれており、設定のハードルが低いです。
- 高度なアクセス制御（Enterprise/SaaSの機能）: プライベートプロジェクトであっても、閲覧制限をかけた状態でPagesを公開できます（チーム内だけのドキュメント共有に最強です）。
- 独自のドメインやHTTPS対応の柔軟性: Let’s Encryptを使ったSSL証明書の発行が完全に自動化されています。
要するに、「コードを書いて、ビルドして、公開する」までの距離が、GitLabを使うと驚くほど短いのです。
—
2. GitLab Pagesの基本概念と仕組み
GitLab Pagesを動かす仕組みは極めてシンプルです。
1. あなたがMarkdownや静的サイトジェネレータ（HugoやJekyllなど）を使って原稿を書く。
2. GitLabにプッシュする。
3. GitLab CI/CDが自動で立ち上がり、静的ファイル（HTML/CSS/JS）をビルドする。
4. ビルドされた成果物を `public` という特定のディレクトリ に出力する。
5. GitLabが自動的にそれをWeb上に公開してくれる！
これだけです。サーバーの選定も、面倒なデプロイ作業も一切必要ありません。すべては `.gitlab-ci.yml` という1つの設定ファイルによって自動化されます。
—
3. 実践！Hugoを使った超高速サイト構築とCI/CD設定
今回は、爆速で動作する静的サイトジェネレータとして大人気の Hugo を使って、実際にGitLab Pagesへデプロイする環境を作ってみましょう。
初心者の方でも迷わないよう、ステップ・バイ・ステップで解説します。
ステップ1: リポジトリの作成
まずはGitLabで新しいプロジェクト（リポジトリ）を作成します。ここではプライベートでもパブリックでも構いません。
ステップ2: ローカルでのプロジェクト準備
お使いのPCでHugoのプロジェクトを初期化します（※Hugoがインストールされている前提で進めます）。
新規サイトの作成
hugo new site my-gitlab-pages-site
cd my-gitlab-pages-site
テーマの導入（例としてAnankeテーマを使用）
git init
git submodule add https://github.com/thegeeklab/hugo-ivory.git themes/ivory
echo “theme = ‘ivory'” >> hugo.toml
サンプル記事の作成
hugo new content content/posts/hello-world.md
ステップ3: 魔法のレシピ `.gitlab-ci.yml` の作成
ここが今回の核心です。プロジェクトのルートディレクトリに `.gitlab-ci.yml` というファイルを作成し、以下のコードを貼り付けてください。
この設定ファイルこそが、GitLabに「どうやってビルドして公開するか」を伝える指示書になります。
==========================================
GitLab Pages CI/CD Configuration for Hugo
==========================================
使用するDockerイメージ（Hugoの公式拡張イメージを指定）
image: registry.gitlab.com/pages/hugo:latest
ジョブのステージ定義
stages:
- build
Pages公開用の標準ジョブ名（必ず ‘pages’ にする必要があります）
pages:
stage: build
script:
# Hugoコマンドを実行して public/ ディレクトリにHTMLを生成する
- hugo –minify
artifacts:
paths:
# このディレクトリに含まれるファイルがGitLab Pagesとして公開されます
- public
rules:
# デフォルトブランチ（main や master）へのプッシュ時のみ実行する
- if: ‘$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH’
コメントの解説
- `image: …`: ビルド環境として、Hugoがあらかじめインストールされた公式コンテナを使います。これで環境構築の手間がゼロになります。
- `script: – hugo –minify`: これだけでソースコードが美しいHTMLに変換されます。
- `artifacts: paths: [public]`: GitLab CI/CDでは、ジョブ間でデータを引き渡すために「アーティファクト」という仕組みを使います。`public`フォルダを指定するのがGitLab Pagesのお作法です。
—
4. 動作確認：世界に自分だけのページを公開しよう！
設定ができたら、いよいよGitLabへコードを送り込みます。
git add .
git commit -m “feat: 初めてのGitLab Pages設定”
git branch -M main
git remote add origin <あなたのGitLabリポジトリのURL>
git push -u origin main
プッシュが完了したら、GitLabのプロジェクト画面を開いてみてください。
左側メニューの 「Build（ビルド）」 > 「Pipelines（パイプライン）」 をクリックすると、先ほど設定したCI/CDが緑色のアイコンで「Passed（成功）」に向かって走っているのが確認できるはずです。
パイプラインが無事に完了したら、今度は 「Deploy（デプロイ）」 > 「Pages」 を開いてみてください。
そこには、あなた専用のURL（例: `https://
—
5. シニアからのアドバイス：さらに使いこなすためのハック
無事にサイトが公開できたら、ぜひ次のステップにも挑戦してみてください。
1. Merge Request（MR）ごとのプレビュー環境（Review Apps）:
GitLab Pagesは、実はデフォルトの `pages` ジョブ以外にも動的に環境を作ることができます。機能追加のテストを本番公開前にプレビューで確認できるようになると、チーム開発の品質が劇的に向上します。
2. 独自ドメインの設定:
「Settings > Pages」から、企業のドメインや個人で購入したドメイン（例: `example.com`）を無料で紐付けることができます。Let’s EncryptによるSSL化もボタン一つで完了します。
まとめ
今回は、GitLab Pagesの基本からHugoを用いた具体的なCI/CDパイプラインの設定方法までを解説しました。
- GitLab Pagesは、CI/CDとの強力な統合によって、コードのプッシュから公開までを完全に自動化してくれる。
- 設定は `.gitlab-ci.yml` に数行書くだけで完了する。
- 無料かつセキュアに、個人ブログから社内ドキュメントまで運用できる。
「自動化」の心地よさを知ると、もう手動でのデプロイには戻れなくなります。ぜひ今日からあなたのプロジェクトにも取り入れて、開発をよりエキサイティングで快適なものにしてくださいね！