アルパカのメモ

HugoとGitHub ActionsでGitHub Pagesを自動デプロイ

calendar_today
label Hugo GitHub Actions

前提条件

  • Windows 10
  • Hugo v0.74.3(Windows版)がPCにインストール済み

はじめに

GitHub Pagesは所定のリポジトリをJekyllで変換して公開してくれるが、これをHugoを使って公開するようにしたい。 ローカルでHugoのパブリッシュを実行してコミット…という風に手動でやるのは面倒くさいので、mdファイルをコミット＆プッシュしたら、自動的にGitHub Pagesで公開されてほしい。

GitHub Pagesの公開先は<user>.github.ioとする。

Hugoの使い方については、下記参照。
【Hugo】静的Webサイトを作る

GitHubにリポジトリを作成する

<user>.github.ioという名前のpublicリポジトリを作成する。自動的にGitHub Pagesのユーザーページ元リポジトリとなる。

リポジトリをクローン

PCにて、作成したリポジトリをクローンする。

Hugoで新しいサイトを作る

クローンしたフォルダの親フォルダで下記コマンドを実行。

hugo new site [リポジトリのフォルダ名] --force

既存フォルダに対してのnew siteなので、フラグの--forceが必要。 Hugoのフォルダやファイルが作成される。

その後、テーマを設定しておく。

GitHub Actionsを設定

GitHub Actions による GitHub Pages への自動デプロイ - Qiita
上記記事を参考に、ローカルリポジトリで.github/workflows/gh-pages.ymlを作成し、サンプルをコピペする。

name: github pages

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.74.1'

      - name: Build
        run: hugo --minify

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

その後コミット＆プッシュする。

プッシュ後GitHubを見に行くと、Actionsが動いたことが分かる。

また、gh-pagesという名前のブランチが出来ていて、ここにビルド後のファイルが置かれているのが分かる。

※ サンプルのスクリプトにpublish_dir: ./publicの記述があるが、ビルド後のファイルはブランチ直下に置かれている。

公開元ブランチの変更

既定ではmasterブランチがGitHub Pagesへ公開されるが、これをgh-pagesへ変更する。

リポジトリの設定画面へ行き、GutHub Pagesの欄を探す。 Sourceのブランチをgh-pages、フォルダはルートにしてSaveを押す。

少し待つとGitHub Pagesの内容が置き換わっている。 表示が変わらない場合はキャッシュが残っている可能性があるので、ブラウザの更新ボタンを押してみるとよい。