背景

docsディレクトリをGitHubPagesで公開。
- エラーが出て正しく動かなかった（カウンターの数字が増えなかった）。
開発環境と本番環境でサイトパスが違うのが原因と思われる。
- 開発環境：http://localhost:8000/hello
- 本番環境：https://maiamea.github.io/portfolio/hello/
サイトURLがhttps://maiamea.github.io/portfolio/hello/でも正しく動くようにしたい。

開発環境でのサイトの起点：http://localhost:8000/
本番環境でのサイトの起点：https://maiamea.github.io/portfolio/

GitHubではパスにリポジトリ名が入ってくるのでルートがずれてしまう。

開発環境：プロトコル://サーバー/
本番環境：プロトコル://サーバー/リポジトリ/

対処法

gatsby-config.js

module.exports = {
  pathPrefix: `/portfolio`,
}

ビルド時にgatsby build --prefix-pathsで実行するように設定。

package.json

{
  "scripts": {
    "build": "gatsby build --prefix-paths"
  },
}

開発環境でのサーバー起動は今まで通りnpm run developを実行すればOK。

無事ボタンをクリックしたらカウンターの数字が増えた。