Edited at

Gatsby のサイトを GitHub Actions で GitHub Pages にデプロイ

Gatsby.js で構築しているブログ・サイトの GitHub Pages へのデプロイを GitHub Actions を利用して自動化する話です。


Gatsby のプロジェクトを用意

この記事では gatsbyjs/gatsby-starter-blog: Gatsby starter for creating a blog を例として用います。


GitHub Actions の設定

最新の情報は Action のリポジトリにて確認してください。

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

peaceiris/actions-gh-pages - GitHub


トークンの登録

上の記事を参考に ACTIONS_DEPLOY_KEY を設定します。


Workflow の追加

以下のワークフローを作って master ブランチへ Push すると自動的にサイトのビルドとデプロイが始まります。


.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 node
uses: actions/setup-node@v1
with:
node-version: '10.x'

- name: Cache dependencies
uses: actions/cache@v1
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-

- name: install
run: npm install

- name: format
run: npm run format

- name: test
run: npm run test

- name: build
run: npm run build

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



Project pages

User and Organization リポジトリ (username/username.github.io) の場合は GitHub Actions の workflow を追加するだけで十分です。一方で Project pages (username/project_name 形式のリポジトリ) の場合はいくつかの修正が必要です。

サイトは https://username.github.io/project_name/ 形式の URL で公開されます。


gatsby-config.js

module.exports = {

pathPrefix: `/project_name`
}


package.json

"scripts": {

"build": "gatsby build --prefix-paths"
}