GitHub Actionsでブログを自動デプロイするようにした
サブモジュールを使っているリポジトリ上でのHugo+Actionsの設定
Hugo GitHub Actions
Created at Updated at

1620 Words
History
⚠️

追記 (2020/01/29 03:00)

Actionのジョブを実行する際のタイムゾーンを指定するようにymlファイルを修正。

env:
  TZ: 'Asia/Tokyo'

前提

このブログは次のような状態で運用している（していた）。
「Hugoのデータを置いているリポジトリ」に「公開用のhtmlファイルが出力されるディレクトリ」や「テーマファイルが配置されたディレクトリ」がサブモジュールとして配置されている。

  1. suihan74/hugo_filesにMarkdownで記事を書く

    hugo new posts/2020/hogehoge.md

  2. Hugoでpublic/以下に静的ページ生成をしてpushする

    • public/はリポジトリsuihan74/suihan74.github.ioにpushする

    • public/と、テーマファイルを配置しているthemes/はそれぞれhugo_filesのサブモジュールとして配置している

  3. https://suihan74.github.io/に変更が反映される

今までは億劫がってCI的なことしていなかったので、記事を書くたびに「public/をsuihan74.github.ioにpushして」「hugo_filesをpushする」みたいな手間をかけていた。

やったこと

GitHub Actions を利用して、hugo_filesに記事をpushしたらGitHub側で勝手にpublic/を生成してsuihan74.github.ioにデプロイするようにした。

色々よしなにやってくれるActionが公開されているので使わせてもらう。神。

方法

1. 認証に必要なものを準備する

sshキーを使う方法と個人アクセストークンを使う方法、好きな方を選ぶ。なんか検索してよく出てくるのは前者。

sshキーを使う方法

  1. ローカル環境でssh-keygenを使って公開鍵と秘密鍵を生成する

    ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

  2. 秘密鍵をhugo_filesリポジトリのSecretsに追加する

    Settings > SecretsにNameを「ACTIONS_DEPLOY_KEY」として、Valueには秘密鍵の中身をコピペする。 Nameは後で記述する設定ファイルと整合していれば別に何でもいい。

  3. 公開鍵をsuihan74.github.ioリポジトリのDeploy keysに追加する

    Settings > Deploy keysに公開鍵の中身をコピペする。名前は別に何でもいい。

個人アクセストークンを使う方法

  1. アクセストークンを生成する

    https://github.com/settings/tokensにアクセスして以下の内容に従ってアクセストークンを生成する。

    コマンドライン用の個人アクセストークンを作成する - GitHub ヘルプ

  2. アクセストークンをhugo_filesリポジトリのSecretsに追加する

    Settings > SecretsにNameを「MY_GITHUB_ACCESS_TOKEN」として 1. で作成したアクセストークンを設定する。
    Nameは後で記述する設定ファイルと整合していれば別に何でもいい。

2. Actions用のディレクトリと設定ファイルを用意する

hugo_files/.github/workflows/main.ymlを作成する。GitHubのリポジトリページ上のメニューから作成するなりローカルで作ってpushするなりうまくやる。

ファイル名は別に何でもいい。

3. 設定ファイルを記述する

.github/workflows/main.yml

name: GitHub Pages

on:
  push:
    branches:
    - master

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
    - name: Fix up git URLs
      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git@github.com:"' >> ~/.gitconfig

    - name: Checkout
      uses: actions/checkout@v1
      with:
        submodules: true

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

    - name: Build
      run: hugo --gc --minify --cleanDestinationDir
      env:
        TZ: 'Asia/Tokyo'

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v2
      env:
        ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
       # 個人アクセストークンを使う場合
       #PERSONAL_TOKEN: ${{ secrets.MY_GITHUB_ACCESS_TOKEN }}
        EXTERNAL_REPOSITORY: suihan74/suihan74.github.io
        PUBLISH_BRANCH: master
        PUBLISH_DIR: ./public
        TZ: 'Asia/Tokyo'

結果

これで今後、記事の更新に関してはhugo_filesにpushするだけで自動的に更新が反映されるようになった。

やったぜ。

参考