Edited at

GitHub Actions による GitHub Pages への自動デプロイ

GitHub Actions の登場により GitHub Pages へのデプロイがとても簡単になりました。デプロイキー・トークンを登録し、手順を書いた YAML ファイルを Push するだけでビルド・デプロイの CI/CD を構築できます。この記事では GitHub Actions を用いて GitHub Pages へのデプロイを自動化する方法を紹介します。


Hugo のブログ・サイトの場合

具体的には以下のような YAML ファイルを master ブランチに .github/workflows/gh-pages.yml として Push するだけで GitHub Pages へのデプロイが始まり、サイトが公開されます。


.github/workflows/gh-pages.yml

name: github pages

on:
push:
branches:
- master

jobs:
build-deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@master

- name: Setup Hugo
uses: peaceiris/actions-hugo@v2.0.0
with:
hugo-version: '0.58.2'

- name: Build
run: hugo --gc --minify --cleanDestinationDir

- name: Deploy
uses: peaceiris/actions-gh-pages@v2.3.1
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
PUBLISH_BRANCH: gh-pages
PUBLISH_DIR: ./public


上記は GitHub プロジェクトリポジトリ (名称が username/project_name 形式のリポジトリのこと) で Hugo を使って生成したブログ・サイトを GitHub Pages で公開する例です。


使用している公開 Action

最新の情報は各 Action のリポジトリにて確認してください。Issue, Pull Request, GitHub Star など、フィードバックをお待ちしてます。

👇 peaceiris/actions-gh-pages: GitHub Actions for deploying to GitHub Pages with Static Site Generators



👇 peaceiris/actions-hugo: GitHub Actions for Hugo extended and Modules

ちなみに上記のカードは nwtgck/gh-card: GitHub Repository Card for Every Web Site で生成できます。


デプロイトークンの設定

ACTIONS_DEPLOY_KEY もしくは PERSONAL_TOKEN のいずれかを設定する必要があります。

GITHUB_TOKEN について

現在 GitHub Actions の GITHUB_TOKEN を使った GitHub Pages へのデプロイに問題があるので ACTIONS_DEPLOY_KEY もしくは PERSONAL_TOKEN のいずれかを作成・登録してください。


ACTIONS_DEPLOY_KEY の設定

以下のコマンドにより公開鍵と秘密鍵のペアを生成します。

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

gh-pages.pub (公開鍵) はリポジトリ設定の Deploy keysAllow write access にチェックを入れて登録してください。 秘密鍵の gh-pages はリポジトリ設定の SecretsACTIONS_DEPLOY_KEY という名前で登録してください。


PERSONAL_TOKEN の設定

Personal Access Tokens で生成できるトークンを PERSONAL_TOKEN でサポートしています。

ACTIONS_DEPLOY_KEY ではなくこちらを使いたい場合は、リポジトリ設定の SecretsPERSONAL_TOKEN という名前でトークンを登録し、YAML ファイルを以下のように書き換えてください。


.github/workflows/gh-pages.yml

- ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}

+ PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}


User and Organization リポジトリの場合

username/username.github.io リポジトリの場合は master ブランチに GitHub Pages で公開するファイルを配置する必要がありますので、YAML ファイルを少し修正して Push する必要があります。

例えば source ブランチを作ってデフォルトブランチとして利用し、そこでソースとなる Markdown ファイルなどを管理する場合の YAML ファイルは以下のようになります。


.github/workflows/gh-pages.yml

on:

push:
branches:
- source # default branch

PUBLISH_BRANCH: master # deploying branch



その他 Static Site Generator の例

Hugo プロジェクトの例を既に紹介しましたが、他の静的サイトジェネレーターでも同様に使えます。


Node.js (JavaScript) 系

Node.js (JavaScript) 製の静的サイトジェネレーターの場合は以下のような YAML にすればオッケーです。依存関係は package.jsonpackage-lock.json で管理されているものとします。

next.js, nuxt.js, gatsby, hexo, gitbook, vuepress, react-static, gridsome, etc.

Gatsby の例を以下記事で解説しています。

Vue.js, Nuxt.js の例を以下記事で解説しています。

React.js, Next.js の例を以下記事で解説しています。


.github/workflows/gh-pages.yml

name: github pages

on:
push:
branches:
- master

jobs:
build-deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@master

- name: build
uses: actions/setup-node@v1
with:
node-version: '10.16'
- run: |
npm install
npm run build

- name: deploy
uses: peaceiris/actions-gh-pages@v2.3.1
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
PUBLISH_BRANCH: gh-pages
PUBLISH_DIR: ./public



Python 系

Python 製の静的サイトジェネレーターの場合は以下のような YAML にすればオッケーです。依存関係は requirements.txt で管理されているものとします。

pelican, MkDocs, sphinx, etc.


.github/workflows/gh-pages.yml

name: github pages

on:
push:
branches:
- master

jobs:
build-deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v1

- name: Set up Python
uses: actions/setup-python@v1
with:
python-version: '3.6'
architecture: 'x64'

- name: Install dependencies
run: |
pip install --upgrade pip
pip install -r ./requirements.txt

- name: Build
run: mkdocs build

- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v2.3.1
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
PUBLISH_BRANCH: gh-pages
PUBLISH_DIR: ./site