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 master
29行目には,<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 public
41,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
のタブでは以下のように表示されると思います.