はじめに

つい最近、Hugoという静的サイトジェネレータ（Static Site Generator、以降SSG）を使って、とあるサイトを動かし始めました。このサイトもHugoを使って作られています。

SSGなので、サイトを公開する前にビルドしてHTMLを出力する必要があります。しかし、記事を更新するたびに手元でビルドし、ちまちまアップロードするのは面倒です。

そこで、GitHub Actionsを用いて、サイトのビルドからSFTP経由のデプロイを自動化したいと思います。

GitHub Actions

GitHub Actionsは、GitHubで管理しているソースコードに対して、コンパイルやビルド、デプロイ、リリースなどの作業を、GitHubのサーバーにやってもらう機能です。

指定されたフォーマットで手順を書くことで、ソースコードのpush時などに上記の作業を自動で実行することができます。

YAMLを書く

GitHub Actionの手順はYAMLという形式で書いていきます．

結果から先に言ってしまうと，以下のような内容をdeploy.ymlに書いて，Hugoプロジェクトの./.github/workflows/deploy.ymlを配置すればOKです．

mainリポジトリに変更をpushすると、ビルド・デプロイが自動で実行されます。

name: Hugo Build and Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Check out code
        uses: actions/checkout@v2

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

      - name: Download Theme
        run: git clone https://github.com/MateChan/etch themes/etch

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: Creepios/[email protected]
        with:
          host: ${{ secrets.FTP_SERVER }}
          port: ${{ secrets.FTP_PORT }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          localPath: ./public/
          remotePath: /htdocs/diary/

Hugoをセットアップする

GitHub Actionsは、OSだけ入ったPCが貸し与えられるような感じなので、ビルドに必要な環境のセットアップも手順に含める必要があります。

また、決まった作業をテンプレート化したものが公開されており、Hugoをセットアップするには、peaceiris/actions-hugoというテンプレートを使います。

Hugo setup · Actions · GitHub Marketplace

with: hugo-version: latestで、最新版のHugoをセットアップすることができます。また、extended: trueとすることで、HugoのExtended版を入れられます。一部のテーマはExtendedでないと動作しないことがあります。

テーマ落とす＆ビルド

テーマを別リポジトリで管理しているので、ビルドの前にテーマを落とす手順が必要です。

git clone テーマのリポジトリのURL themes/テーマ名で問題ないです。

ビルドはhugo --minifyです。./publicにビルドした結果が出力されます。

SFTP用のAction

私が利用しているホスティングサービスは、SFTP経由で特定のディレクトリにhtmlを配置することでサイトを公開します。

SFTPでファイル転送するActionのテンプレートは複数あるのですが、色々試した結果、以下のものが良さそうでした。

SFTP SSH Action · Actions · GitHub Marketplace

withで、SFTP接続に必要な以下の情報を与える必要があります。

• host
• port
• username
• password
• localPath
• remotePath

このうち、host, port, username, passwordは、接続に関するシークレットな情報です。

GitHubリポジトリの Settings → Secrets and variables → Actions と進み、設定します。

ビルドしたファイルは./publicに出力されているので、localPathは./publicにします。

remotePathは人によって異なりますが、matechan.comは/htdocs/配下に置いたファイルが配信され、かつ/diaryをベースURLにしたいので、/htdocs/diaryとします。

おわりに

これで自動でビルド・デプロイが可能となりました。

HugoをGitHubで管理している人はぜひ使ってみてください。