HugoとGitHub Actionsを使ってWebページを配置する方法

Tips
目次

概要

Hugoを使った静的なWebサイトを作る機会がありました。

その際に作ったWebサイトをどこかのサーバーでホスティングしたかったのですが、静的なWebサイトということと、気軽に使えるということでGitHub Pagesを利用することにしました。

ここでは、HugoのWebページをGitHub Actionsを利用して自動でGitHub Pagesに配置する方法を紹介します。

環境

  • Hugo 0.88.1

GitHub Pagesを選んだ理由

GitHub Pagesは、GitHubが提供しているHTMLファイルなどをホスティングして、誰もがアクセスできるWebサービスを提供するサービスです。HTMLファイルなどの静的なファイルを提供するだけなので、サーバーで何らかの処理を行うような動的なWebアプリケーションを実現することはできませんが、Hugoのような静的なファイルのみを出力し利用するような場合では適当なサービスです。

独自ドメインやHTTPS対応などもすることができるため、昨今のWebサイトに求められる必要十分な機能は揃っています。

GitHub Actionsでのデプロイ

GitHub Pagesへの配置は、手動でファイルをアップロードするということもできますが、できればHugoのプロジェクトの変更をGitHubのリポジトリにプッシュしたら自動で反映される方が楽で良いです。

GitHub Pages自体には、Jekyllというツールを用いた場合の自動デプロイの機能はありますが、Hugoにはないため、今回はGitHub Actionsを利用することで、自動デプロイを実現することにしました。

今回作成したGitHub Actionsの設定ファイルは次になります。

name: GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-20.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
          cname: example.com

このGitHub Actionsでは、mainブランチにプッシュされた場合にHugoでHTMLファイルを作成し、その作成したファイルをGitHub Pagesにデプロイしています。

また、独自ドメインを利用することを想定して、cname: example.comとしています。ここは適当なドメインで置き換える必要があります。もし独自ドメインを使わない場合は、この行は削除します。

Setup Hugoのextended: trueは、Hugoのextendedバージョンを使うというものです。必要がない場合は削除します。

これで、自動でのデプロイの設定ができました。

注意点として、最初だけですがHugoで出力したファイルは、gh-pagesというブランチにコミットされているので、リポジトリのGitHub Pagesの設定から、gh-pagesブランチの内容を表示するように変更する必要があります。

さいごに

HugoとGitHub Pagesの組み合わせは、とても簡単にWebサイトを作れるので、とても気に入っています。

みなさんももし良ければ、利用を検討してみてください。