Gatsby で作ったブログを Github Pages で公開する

December 04, 2020

Gatsby で作ったブログを GitHub Pages で公開したい。以下のドキュメントの通り進める。

https://www.gatsbyjs.com/docs/how-gatsby-works-with-github-pages

（手順の中でサブディレクトリの設定もあるので前回の記事いらなかった・・・）

まずは空の gh-pages ブランチを作成する。ここに build 後のファイルを deploy していくことになります。

$ git checkout --orphan gh-pages
$ git checkout --orphan gh-pages
$ git commit --allow-empty -m "root commit"

npm パッケージのインストール。deploy するのに使います。

$ npm install gh-pages --save-dev

gatsby-config.js の設定変更。（前回実施済みだが）

module.exports = {
  pathPrefix: "/blog",
}

package.jsonの修正。

  "scripts": {
    "deploy": "gatsby build --prefix-paths && gh-pages -d public"
  }

上記の設定をすることで簡単に deploy できるようになる。

$ npm run deploy

せっかくなので push したら deploy されるように Github Actions の設定もする。

デフォルトの yml ファイルに、このあたりを追加しました。

      - name: deploy gh-pages
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          git config --global user.email "paleapricot.asakuchi@gmail.com"
          git config --global user.name "asakuchi"
          git remote set-url origin https://${GITHUB_ACTOR}:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
          npm ci
          npm run deploy