はじめに

ブログの公開にあたっては，Hugo で生成した静的ファイル群を対象の Web サーバのドキュメントルート下へ配置するだけ，と非常に明快です (他のジェネレータも同様でしょうけど)．

私の環境の場合，次のような手順になります:

1. 静的ファイルを生成する
2. 以前より借りてるサーバの特定場所へ rsync する

これだけですが，エントリを追加したり内容を修正したりする度に手動で実行するのは手間なので，そこを自動化するお話です．

GitHub Actions

エントリの元データを含むコード自体は GitHub で管理しているので，GitHub Actions を使ってみます．

次のような流れの実現を目指します:

1. コードを GitHub に push する
2. GitHub Actions にて，master ブランチの内容を基に，静的ファイル群生成処理とWebサーバへの同期処理が走る
3. 変更した内容が公開側に反映されている

ワークフローファイル

YAMLで記述したワークフローファイルを .github/workflows/ 下に保存してコミット，これを GitHub へ push することで処理が自動的に走るようになります．(実際には on の内容によりますが…)

今回の要件に対しては次のような内容を記述しました:

# .github/workflows/deploy.yml
name: 'Generate and deploy'

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      # コードをチェックアウトする
      - name: Checkout Repo
        uses: actions/checkout@master
        with:
          submodules: true

      # hugo で静的ファイル群を生成する
      - name: Build Site
        uses: chabad360/hugo-actions@master

      # 生成したファイルをWebサーバへ同期する
      - name: rsync deployments
        uses: burnett01/rsync-deployments@5.1
        with:
          switches: -avzr --delete
          path: public/
          remote_path: ${{ secrets.DEPLOY_PATH }}
          remote_host: ${{ secrets.DEPLOY_HOST }}
          remote_port: ${{ secrets.DEPLOY_PORT }}
          remote_user: ${{ secrets.DEPLOY_USER }}
          remote_key: ${{ secrets.DEPLOY_KEY }}

秘密情報をセットする

各種秘密情報 (コードとしてコミットすべきでない情報) を，GitHub 上のリポジトリ設定から設定しておきます:

できた

要件を満たせるようになりました．

おわりに

GitHub Actions を利用して，静的ファイル群の生成とそれらのWebサーバへのデプロイを自動化したお話でした．今後はコードを push するだけで変更内容が公開側に反映されるようになりますとさ．

おまけ: Hugo 覚え書き

テーマ

現在適用しているテーマは Mainroad．

開発サーバ

起動オプションあれこれ:

# 下書き状態も表示
$ hugo server -D

# 公開期限切れも表示 (公開期限は `expiryDate` をセット)
$ hugo server -E

# 未来のエントリも表示 (デフォルトでは現在時刻以前のものしか表示されない)
$ hugo server -F

ショートコード

HTML5 の figure タグで画像を差し込むためのショートコード:

{{ < figure src="..." title=".." caption="..." >}}
# 実際には `{` と `<` の間はスペースなし

詳細や他のショートコードについては Shortcodes | HUgo にて．