【Hugoデプロイ編3】GitHub Actionsを使ったサイト自動更新(CI/CD)の設定手順

+++

さあ、デプロイ編の最大の山場でありクライマックスです！
ここまで前回の記事で「コマンドを叩いての手動デプロイ」環境を構築してきましたが、これを現代のWeb開発でスタンダードとなっている 「全自動（CI/CD）」 に進化させます。

この設定が完了すると、
「ローカルで記事を書いて、GitHubにPush（保存）して、あとは画面を閉じる」
たったそれだけで、数分後にはクラウド上のボットが自動でビルドを走らせてサイトが更新されている…という、最高に快適でスマートな執筆環境が手に入ります。

1. 自動化の仕組み

「GitHub Actions（ギットハブ・アクションズ）」という機能を使います。

graph LR User[あなた] --記事をPush--> GitHub GitHub --更新を検知--> Actions[GitHub Actions] Actions --サイトを生成--> Hugo[Hugo Build] Hugo --公開--> Firebase[Firebase Hosting] Firebase --閲覧--> Public[読者]

この流れを一度だけ設定してしまえば、あとはGitHubが全てやってくれます。

2. 設定手順 (firebase init)

手動デプロイの時にも使った firebase init コマンドを、もう一度実行します。
（これが一番設定ファイルの作成が楽だからです！）

プロジェクトのルートフォルダで実行してください。

firebase init hosting

質問への回答は少し変わります（太字が重要ポイント）：

Please select an option:
Use an existing project (さっき作ったプロジェクトを選ぶ)
What do you want to use as your public directory?:
public (前回と同じ)
Configure as a single-page app…?:
No
Set up automatic builds and deploys with GitHub?:
👉 Yes (Yを入力！ここが今回の主役です)
For which GitHub repository would you like to set up a GitHub workflow?:
[ユーザー名]/[リポジトリ名] を入力します (例: yourname/my-hugo-blog)。
※ 初回はブラウザでGitHub認証が求められます。
Set up the workflow to run a build script before every deploy?:
👉 Yes
What script should be run before every deploy?:
👉 hugo --minify と入力してEnter。
（コマンドラインでビルドする時のコマンドを指定します）
Set up automatic deployment to your site’s live channel when a PR is merged?:
👉 Yes (メインブランチに変更があったら本番公開する設定です)
What is the name of the GitHub branch associated with your site’s live channel?:
main (通常は main です)

これで、.github/workflows/firebase-hosting-merge.yml というファイルが自動生成されました！

3. 【超重要】Hugoを使えるようにする

実は、これだけでは動きません。
GitHubのコンピュータには Hugoがインストールされていないから です。

自動生成された設定ファイルを少し修正して、「Hugoをインストールしてね」と教えてあげる必要があります。

修正するファイル

.github/workflows/firebase-hosting-merge.yml

修正内容

エディタで開いて、steps: の部分に Hugoのセットアップ（Setup Hugo の部分） を挿入します。

    steps:
      - uses: actions/checkout@v4

      # ▼▼▼【ここから追加】▼▼▼
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: 'latest'
          extended: true
      # ▲▲▲【ここまで追加】▲▲▲

      - run: hugo --minify
      - uses: FirebaseExtended/action-hosting-deploy@v0
        ...

これで、GitHubくんが「あ、Hugoが必要なんだな」と理解してインストールしてくれるようになります。

4. いざ、実践！

設定は全て終わりました。テストしてみましょう！

この記事（content/posts/92-github-actions.md）のどこかを少し編集して保存します。

変更をGitHubに送ります。

git add .
git commit -m "Enable auto deployment"
git push

GitHubのリポジトリページを開き、「Actions」タブ を見てみましょう。
黄色い丸（処理中）が回って、しばらくして緑のチェックマーク✅になれば成功です！
実際のサイトを見て、更新が反映されているか確認してください。

自動デプロイで執筆活動に専念する環境を手に入れる

Actionsの実行結果が緑色のチェックマーク（Success）になり、新しい記事が本番サイトに反映されているのを確認できましたか？
これでもう、黒い画面で毎回毎回面倒な hugo や firebase deploy のコマンドを打つ必要は永遠にありません。

これからは 「記事を書く、GitHubに送る、終わり」 という極めてシンプルなフローになります。サイト運用が圧倒的に楽になり、コンテンツ制作そのものに集中できる最高のHugoライフを楽しんでください！✨