Help us understand the problem. What is going on with this article?

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 のリポジトリにて確認してください。

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@v2

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

    - 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@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        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"
}
peaceiris
Hugo ʕ◔ϖ◔ʔ や GitHub Actions について書いています。こっち https://peaceiris.com/ に引っ越しましたので、今後 Qiita への新規投稿はしませんが記事のメンテはします。
https://peaceiris.com/
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away