GitHub ActionsでGitHub Pagesへポートフォリオサイトを自動デプロイ
はじめに
以前に自分のポートフォリオサイトをHugoでGitHub Pagesへサクッとデプロイという記事を書きました。
この記事の中ではGitHub PagesへのデプロイはローカルのMacからデプロイ用のスクリプトを走らせることでやっていましたがGitHub Actionsでできた方がイケてる!ということでやってみました。
やってみたところなかなかハマったので共有します。
GitHub Pagesにはこんなサイトがあがっています。
前提
- 静的サイトジェネレータにHugoを使います。
- Hugo公式にあるHost on GitHub | GitHub User or Organization PagesにてInstructionがある、HugoのレポジトリにGitHub Pages(github.io)のレポジトリをgit submoduleとして組み込んで使っていくやり方に則っています。
サイトジェネレータ(Hugo)用レポジトリ リンク https://github.com/momotaro98/hugo-bio
GitHub Pagesレポジトリ リンク https://github.com/momotaro98/momotaro98.github.io
Main Contents
Workflowファイルとデプロイ用スクリプト
.github/workflows.main.yml
on:
push:
branches:
- master
jobs:
publish:
runs-on: ubuntu-latest
steps:
- name: Fix up git URLs # ポイント3 submoduleの扱い
run: echo -e '[url "https://github.com/"]\n insteadOf = "[email protected]:"' >> ~/.gitconfig
- uses: actions/checkout@v1
with:
submodules: true # ポイント3 submoduleの扱い
- name: Read environment variables # ポイント1 Hugoのビルドと環境変数の受け渡し
id: env
run: |
. ./.env
echo "::set-output name=HUGO_VERSION::${HUGO_VERSION}"
echo "::set-output name=THEME_NAME::${THEME_NAME}"
- name: Setup Hugo # ポイント1 Hugoのビルドと環境変数の受け渡し
uses: peaceiris/actions-hugo@v2
with:
hugo-version: '${{ steps.env.outputs.HUGO_VERSION }}'
- name: Build
run: hugo -t '${{ steps.env.outputs.THEME_NAME }}'
- name: Deploy the artifact onto hosting service
env: # ポイント2 Secretsの扱い
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
EMAIL_ADDRESS: ${{ secrets.EMAIL_ADDRESS }}
run: ./deploy.sh
deploy.sh
#!/bin/bash
set -eu
echo 'Deploying updates to GitHub...'
user_name="momotaro98"
echo 'Set Git configurations'
git config --global user.name $user_name
git config --global user.email ${EMAIL_ADDRESS}
echo 'Start deploying onto hosting service'
cd public # ポイント3 submoduleの扱い
# Check if there's change in the generated artifact
if [[ ! `git status --porcelain` ]]; then
echo 'No change in artifact then finishing this deploying workflow'
exit 0
fi
# ポイント2 Secretsの扱い
git remote set-url origin https://$user_name:${DEPLOY_TOKEN}@github.com/$user_name/$user_name.github.io.git
git checkout master
git add .
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
git commit -m "$msg"
git push origin HEAD
echo 'Deploy done'
echo 'Start doing git commit to master itself'
cd ..
# ポイント2 Secretsの扱い
git remote set-url origin https://$user_name:${GITHUB_TOKEN}@github.com/$user_name/hugo-bio.git
git checkout master
git add public
git commit -m "Deploy public `date`"
git push origin HEAD
echo 'Git commit done'
ポイント1 Hugoのビルドと環境変数の受け渡し
on:
push:
branches:
- master
jobs:
publish:
runs-on: ubuntu-latest
steps:
- name: Fix up git URLs # ポイント3 submoduleの扱い
run: echo -e '[url "https://github.com/"]\n insteadOf = "[email protected]:"' >> ~/.gitconfig
- uses: actions/checkout@v1
with:
submodules: true # ポイント3 submoduleの扱い
- name: Read environment variables # ポイント1 Hugoのビルドと環境変数の受け渡し
id: env
run: |
. ./.env
echo "::set-output name=HUGO_VERSION::${HUGO_VERSION}"
echo "::set-output name=THEME_NAME::${THEME_NAME}"
- name: Setup Hugo # ポイント1 Hugoのビルドと環境変数の受け渡し
uses: peaceiris/actions-hugo@v2
with:
hugo-version: '${{ steps.env.outputs.HUGO_VERSION }}'
- name: Build
run: hugo -t '${{ steps.env.outputs.THEME_NAME }}'
- name: Deploy the artifact onto hosting service
env: # ポイント2 Secretsの扱い
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
EMAIL_ADDRESS: ${{ secrets.EMAIL_ADDRESS }}
run: ./deploy.sh
#!/bin/bash
set -eu
echo 'Deploying updates to GitHub...'
user_name="momotaro98"
echo 'Set Git configurations'
git config --global user.name $user_name
git config --global user.email ${EMAIL_ADDRESS}
echo 'Start deploying onto hosting service'
cd public # ポイント3 submoduleの扱い
# Check if there's change in the generated artifact
if [[ ! `git status --porcelain` ]]; then
echo 'No change in artifact then finishing this deploying workflow'
exit 0
fi
# ポイント2 Secretsの扱い
git remote set-url origin https://$user_name:${DEPLOY_TOKEN}@github.com/$user_name/$user_name.github.io.git
git checkout master
git add .
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
git commit -m "$msg"
git push origin HEAD
echo 'Deploy done'
echo 'Start doing git commit to master itself'
cd ..
# ポイント2 Secretsの扱い
git remote set-url origin https://$user_name:${GITHUB_TOKEN}@github.com/$user_name/hugo-bio.git
git checkout master
git add public
git commit -m "Deploy public `date`"
git push origin HEAD
echo 'Git commit done'
サイトをビルドするにはGitHub ActionsのランナーにHugoをインストールしてあげる必要があります。
今回 @peaceiris さんが作成したActionモジュールを利用しました。
また、レポジトリページのREADMEのTipsをそのまま拝借しました。
HUGO_VERSION=0.59.1
THEME_NAME=resume
# 環境変数をファイルから読み込み設定
. ./.env
echo "::set-output name=HUGO_VERSION::${HUGO_VERSION}"
echo "::set-output name=THEME_NAME::${THEME_NAME}"
.
.
# 設定された環境変数を取得
hugo-version: '${{ steps.env.outputs.HUGO_VERSION }}'
このようにすることで環境変数をStep間で受け渡すことができます。
ポイント2 Secretsの扱い
- name: Deploy the artifact onto hosting service
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
EMAIL_ADDRESS: ${{ secrets.EMAIL_ADDRESS }}
今回、3つのシークレットの値を使っています。
1つ目のsecrets.GITHUB_TOKEN
が特別です。
From 公式ドキュメント
GitHubは、ワークフローで利用するGITHUB_TOKENシークレットを自動的に生成します。 このGITHUB_TOKENは、ワークフローの実行内での認証に利用できます。
GitHub Actionsを有効化すると、GitHubはリポジトリにGitHub Appをインストールします。 GITHUB_TOKENシークレットは、GitHub Appインストールアクセストークンです。 このインストールアクセストークンは、リポジトリにインストールされたGitHub Appの代わりに認証を受けるために利用できます このトークンの権限は、ワークフローを含むリポジトリに限定されます。
GITHUB_TOKEN
はデフォルトで用意されておりworkflowが置かれるレポジトリスコープ内で有効です。
今回はデプロイスクリプトにて最後にsubmodule更新分をコミットしmasterにPushするために利用しています。
DEPLOY_TOKEN
とEMAIL_ADDRESS
は以下スクショのようにレポジトリのSettingから入力し設定します。
DEPLOY_TOKEN
はGitHub PagesのレポジトリにPushするために必要なトークンで個人のPersonal access tokensのページから生成したものです。
ポイント3 Git submoduleの扱い
ハマりました。
標準のactions/checkout@v1のアクションモジュールを利用していましたがこれは下記のようにsubmodules: true
を入れてあげないとsubmoduleの実体がディレクトリ下に現れません。
- uses: actions/checkout@v1
with:
submodules: true
このフラグを入れたあともこのissueと同じエラーが出てしまいました。
fatal: Could not read from remote repository.
どうやら現状ではsubmoduleをCloneするのにgitプロトコルではNGでhttpsを使うようにしないといけないようです。
こちらの解決方法を拝借しジョブの一番はじめに
- name: Fix up git URLs
run: echo -e '[url "https://github.com/"]\n insteadOf = "[email protected]:"' >> ~/.gitconfig
このステップを入れることで無事Submoduleが取得されました。
デプロイの様子
master
ブランチに変更が入るごとにActionのページから確認できます。
補足 ローカルでのHugo起動はDockerで
GitHub ActionsとローカルでのHugoのバージョンが異なると困るので上述の.env
ファイルにあるバージョンをローカルでも利用するようにDockerを利用します。
こちらに関しても @peaceiris さんが作成したHugoのDockerのイメージを利用します。
Tipsにあるようにdocker-compose.yml
を設定すれば柔軟に環境変数でバージョンを指定できかつホットリロードで編集できるHugo環境ができます。
version: '3'
services:
hugo:
container_name: hugo
image: "peaceiris/hugo:v${HUGO_VERSION}"
# image: peaceiris/hugo:v${HUGO_VERSION}-mod # Hugo Modules
ports:
- 1313:1313
volumes:
- ${PWD}:/src
command:
- server
- --bind=0.0.0.0
- --buildDrafts
docker-compose up
をするだけでHugoサーバがhttp://localhost:1313
で立ち上がります。
参考
Author And Source
この問題について(GitHub ActionsでGitHub Pagesへポートフォリオサイトを自動デプロイ), 我々は、より多くの情報をここで見つけました https://qiita.com/momotaro98/items/b13236e2f8c619edada9著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .