GitHub Pagesを使って無料でSSL付きのサイトを公開する

デザイナーでもできるはじめてのHugoの2回目になります。
前回（デザイナーでもできるはじめてのHugo #01）はHugoのインストールから公開の方法までを説明しました。
今回は前回作成したページをGitHub Pagesを使って公開してみたいと思います。

GitHub Pages用の設定ファイルを作成

GitHub PagesはGitHubにあるコンテンツを静的ページを公開する機能です。
SSLまでついているので、非常に便利です。

公開用のファイルは.github/workflows/gh-pages.ymlというYAML形式のファイルになります。

name: Hugo

on:
  push:
  # schedule:
    # - cron: '*/10 * * * *'

jobs:
  gh-pages:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      # https://github.com/marketplace/actions/github-pages-action
      - name: Setup
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_branch: gh-pages

nameはGitHubでのActionsに表示される名前です。
今回は公開用としてgh-pagesというブランチにわけています。ここおらへんはお好みで設定してください。
hugoでテーマを使っている場合はsubmodules: trueとする必要があります。
また、Hugoで更新日をGitの日付と合わせたい場合はfetch-depth: 0として、Gitの履歴を取得するようにしましょう。

GitHub Pagesの設定

GitHub PagesのURLはhttps://ユーザまたは組織名.github.io/リポジトリ名となります。
GitHubでリポジトリを作成する際に「ユーザまたは組織名.github.io」とすると「https://ユーザまたは組織名.github.io」とすることができます。

まずはさきほどのファイルを含めてサイト全体をGitにアップして、gh-pagesというブランチが作られるのを待ちましょう。
その後に、setings > PagesにでGitHub Pagesの設定を行います。

Your GitHub Pages site is currently being built from the gh-pages branch
にあるBranchをgh-pagesに変更します。
設定は以上です。

Hugoの初期設定であればpublishDir: publicとなっているので、GitHub Pagesではpublicがルートディレクトリとして公開されます。
.gitignoreに「public」を除外するようにしておきましょう。

/public
/resources

最後に設定したURLへアクセスするとサイトが確認できると思います。

まとめ

GitHub Pagesを使えば、難しいサーバの設定などをすることなく、無料でSSL付きのサイトを公開することが可能です。
いくつかの制限はありますが、すごく便利な機能なのでみなさんもぜひ使ってみてはいかがでしょうか。

公開する際はパスワードなどの情報も一緒にアップしないよう、気をつけてください。

オススメの書籍