【React】GithubでSPAサイトを公開するまで

#経緯
JavaScriptの学習を進めていく中で、React Routerを使用したSPAサイトの作成を学び、そのアウトプットとして自身のポートフォリオがてら、サーバー代も痛いのでGithubで無料で公開可能とのことなので、取り組んでみました。
今回はSPAサイトをGithubで公開するにあたっての経験を元に記して行ければと思います。
参考サイト
・https://create-react-app.dev/docs/deployment/#github-pages-https-pagesgithubcom

#条件
既にnode.js,React.jsの環境構築とGithubの登録ができていることを前提に進めていきます。

node.js公式サイト
React.js環境構築記事
ディレクトリ内構造（node_modules, public,src, README.md, package.json, package-lock.json）

#手順
1.Githubでリポジトリの作成
2.package.jsonの編集
3.Github Pagesへの公開

#1.Githubでレポジトリの作成

Githubにログインして、マイページからリポジトリに移動して、新規で作成するのでNewボタンをクリックし、説明に沿って好きなリポジトリ名で作成します。

#2.package.jsonの編集

"nameプロパティ"の下に"homepageプロパティ"を作成してURLを記入する。

package.json

{
  "name": "repository",
  "homepage": "https://komosyu4649.github.io/repository",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "gh-pages": "^2.1.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

・"homepageプロパティ"のURLを以下の要領で記入します。

homepageプロパティ

"homepage": "https://自分のGithubアカウント名.github.io/リポジトリ名",

・"gh-pagesプロパティ"をインストールします。
ーターミナル内で"npm install gh-pages"のコマンドを入力すると、"gh-pageプロパティ"がインストールされます。

gh-pageプロパティ

"gh-pages": "^2.1.1",

・scriptに"predeployプロパティ"、"deployプロパティ"の順で追加します。

scripts

 "predeploy": "npm run build",
 "deploy": "gh-pages -d build",

#3.Github Pagesへの公開
ここまでで準備が整いました。
最後に、ターミナル内に"npm run deploy"のコマンドを入力し、GithubのURLが出力されれば成功です。
終わったら、Githubに戻りリポジトリを確認し、"gh-pages"ブランチができたことを確認しましょう。
無事表示されていれば問題ありません。
Githubにて無料でサイトを公開することができるようになるはずです^^