ReactをGitHub Pagesで表示する！

はじめに

Reactで作成したページをGitHub Pagesで表示する手順についての備忘です。
下記のページを参考にしました。
https://qiita.com/tat_mae084/items/745761eee6cd1d42949d

手順

package.jsonの修正

ほぼ参考ページのままですが、表示したい内容がmainブランチにマージ前だったので、
push先は開発中のブランチを設定しました。

package.json

{
~ 省略 ~
"homepage": "https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/",
~ 省略 ~
  "scripts": {
    ~ 略 ~
    "rm": "rm -rf docs",
    "mv": "mv build docs",
    "git": "git add . && git commit && git push origin <対象のブランチ名>",
    "deploy": "npm run rm && npm run build && npm run mv && npm run git"
  },
}

deployの実行

terminal

npm run deploy

コミットメッセージの設定画面が立ち上がるので、メッセージを書いてコミットを行う。

GitHub Pagesの設定

pushしたブランチを選択、docsを選択、saveを押下

少し時間をおいて再読み込みすると表示されるので、visit siteを押下

ページの表示