GitHub Actionsを使って，HUGOで作ったブログをGitHub Pagesで公開する方法
GitHub Actionsを使って，「HUGOのビルド」と「GitHub Pagesへのデプロイ」を自動化する方法をまとめます．
はじめに
GitHub Actionsを使って，「HUGOのビルド」と「GitHub Pagesへのデプロイ」を自動化する方法をまとめます．
現在，以下のようにしてHUGOのサイトをGitHub Pagesへ適用しています．
まず，ローカルリポジトリで記事を書きます．その後，記事などのソースコードを管理するプライベートリポジトリにアップロードします．次に，hugoコマンドを用いてhtmlなどを生成し，GitHub Pages(<username>.github.io)にアップロードしています．こうすることでブログのソースコードはプライベートリポジトリとなるようにしています．
この方法は記事を書く度にhtmlの生成をしたり，ディレクトリの移動をしたりと結構大変です．
そのため，GitHub Actionsを用いてプライベートリポジトリにあるブログのソースコードをビルドし，GitHub Pages（<username>.github.io）にアップロードするまでを自動化していこうと思います．
(追記 2020/06/23) GitHub Actionsをプライベートリポジトリで扱うには，Proアカウントにする必要があります．
手順
以下のような手順で設定を行い，GitHub Pagesへのアップロードを自動化していきます．
- GitHubのPersonal Access Tokenの作成
- プライベートリポジトリにPersonal Access Tokenの設定
- workflowの作成
GitHubのPersonal Access Tokenの作成
まず，プライベートリポジトリからGitHub Pages（<username>.github.io）にアップロードできるようにするために，GitHubのPersonal Access Tokenを設定します．これを設定することでアップロードの際のパスワードやユーザ名を省略し，プライベートリポジトリからアップロードできるようになります．
GitHubからSettingsをクリックします．
左メニューからDeveloper settingsをクリックします．
左メニューからPersonal access tokensをクリックし，Generate new tokenをクリックします．
Noteにわかりやすい名前をつけます．今回，Push pubilc repoという名前をつけました．
そして，repoにチェックを入れます．
最後に，下のほうにあるGenerate tokenをクリックすることでTokenを発行します．
発行されたTokenを後で使うためにメモしておきます．Tokenは後からでも発行することができます．
プライベートリポジトリにPersonal Access Tokenの設定
次に，プライベートリポジトリにPersonal Access Tokenの設定を行います．
プライベートリポジトリからSettingsのタブをクリックします．
左メニューからSecretsをクリックし，Add a new secretをクリックします．
Nameに適当な名前をつけます．今回，MY_GITHUB_ACCESS_TOKENという名前をつけました．そして，Valueのところに先ほどメモをしておいたTokenを貼り付けます．
以上で設定は終わりです．
workflowの作成
最後に，GitHub Actionsのworkflowの作成を行います．
まず，ブログのソースコードのルートに.github/workflowsディレクトリを作成します．そして，gh-pages.ymlというファイルを作成します．ディレクトリ構造は以下のようになると思います．
1│ config.toml
2│ README.md
3│
4├─.github
5│ └─workflows
6│ gh-pages.yml
7│
8├─archetypes
9├─content
10├─layouts
11├─static
12...
13└─themesそして，gh-pages.ymlに以下を追加します．編集する場所は，29行目，41,42行目です．
1name: github pages
2
3# PushされたときにGitHub Actionsを実行
4on:
5 workflow_dispatch:
6 push:
7 branches:
8 - master
9
10jobs:
11 build-deploy:
12 runs-on: ubuntu-latest
13 steps:
14 # リポジトリをCheckout
15 - uses: actions/checkout@v1 # v2 does not have submodules option now
16 with:
17 submodules: true
18
19 # Hugoのインストール
20 - name: Setup Hugo
21 uses: peaceiris/actions-hugo@v2
22 with:
23 hugo-version: '0.62.0'
24 # extended: true
25
26 # GitHub Pages(<username>.github.io)をクローン
27 - name: Setup public repo
28 run: |
29 echo "USERNAME=<YourUserName>" >> $GITHUB_ENV
30 export USERNAME="<YourUserName>"
31 git clone --depth 1 https://${USERNAME}:${{ secrets.MY_GITHUB_ACCESS_TOKEN }}@github.com/${USERNAME}/${USERNAME}.github.io.git public
32
33 # htmlの生成
34 - name: Build
35 run: hugo --gc --minify --cleanDestinationDir
36
37 # GitHub PagesへのPush
38 - name: Deploy
39 run: |
40 export MSG=`git log --format=%B -n 1 HEAD`
41 cd public
42 git config --local user.name "${{env.USERNAME}}"
43 git config --local user.email "<YourUserEmail@EMAIL.COM>"
44 git remote set-url origin https://${{env.USERNAME}}:${{ secrets.MY_GITHUB_ACCESS_TOKEN }}@github.com/${{env.USERNAME}}/${{env.USERNAME}}.github.io.git
45 git add .
46 git commit -m "${MSG}"
47 git push origin master29行目には，<YourUserName>の部分に自身のGitHubアカウントを入力します．
27 - name: Setup public repo
28 run: |
29 export USERNAME="<YourUserName>"
30 git clone --depth 1 https://${USERNAME}:${{ secrets.MY_GITHUB_ACCESS_TOKEN }}@github.com/${USERNAME}/${USERNAME}.github.io.git public41，42行目には，${{env.USERNAME}}にGitHubアカウントが入ります。<YourUserEmail>@EMAIL.COMにメールアドレスを入力します．
37 - name: Deploy
38 run: |
39 export MSG=`git log --format=%B -n 1 HEAD`
40 cd public
41 git config --local user.name "${{env.USERNAME}}"
42 git config --local user.email "<YourUserEmail>@EMAIL.COM"
43 git remote set-url origin https://${{env.USERNAME}}:${{ secrets.MY_GITHUB_ACCESS_TOKEN }}@github.com/${{env.USERNAME}}/${{env.USERNAME}}.github.io.git
44 git add .
45 git commit -m "${MSG}"
46 git push origin master以上で，workflowの作成の終了です．
まとめ
GitHub Actionsを使って，「HUGOのビルド」と「GitHub Pagesへのデプロイ」を自動化する方法をまとめました．
ローカルリポジトリを編集して，GitHub PagesにPushするとGitHub Actionsが実行されます．
うまく実行されるとActionsのタブでは以下のように表示されると思います．