Reactポートフォリオをgh-pagesでGitHub Pagesに公開するまで

社会人2年目の僕がReactポートフォリオをGitHub Pagesで公開するまでの話。

大まかな流れ

1. ビルドする
2. gh-pagesをインストール
3. package.jsonを編集
4. BrowserRouterにbasename={process.env.PUBLIC_URL}を追記
5. gh-pagesを実行
6. 公開完了

環境

何を書いておけばいいのかイマイチ分かりませんが参考までに。
Windows 10 Pro
Visual Studio Code
Node.jsをnvm-windowsでインストール
npmでyarnをインストール

ビルドする

サーバーにReactのフォルダを放り込んだら表示されるのかなと思っていましたが表示されません。
ビルドっていうのをしてReactのファイル達をWeb上で表示する用に変換しないといけないみたいです。

Git Bash

yarn build

実行するとbuildというフォルダができます。
これをアップロードすればいいんですね、すごく簡単。
早速build内のファイル達をGitHubにアップロードしページを確認。
、、、真っ白。

gh-pagesをインストール

ページが真っ白な原因を調べていると便利そうなものを発見。
どうやらGitHub Pagesに公開するまで手順を簡単にするものらしい。
npmでパッケージをインストールする。

Git Bash

npm install gh-pages --save-dev

package.jsonを編集

gh-pagesを使うにあたって2か所追記が必要だそうです。

package.json

"homepage": "https://自分のGitHubユーザー名.github.io/自分のGitHubリポジトリ名"

nameやversionと同じ並びにhomepageを追記。

package.json

"scripts": {
  "predeploy": "npm run build",
  "deploy": "yarn build && gh-pages -d build"
}

scriptはすでに記載されていたのでその中のstartやbuildの並びに2行追記。

#BrowserRouterにbasename={process.env.PUBLIC_URL}を追記
BrowserRouterで画面遷移させている人はこれをしないと404エラーで画面が真っ白だったり404ページが表示されてしまうようです。
自分の場合も画面が真っ白だった時開発者ツールにたくさんの404エラーが出ていました。

<BrowserRouter basename={process.env.PUBLIC_URL}>
  ...
</BrowserRouter>

これを書くことでpackage.jsonに書いたhomepageが参照されてどうにかなるらしいです。

gh-pagesを実行

Git Bash

git add .
git commit -m'first commit'
git remote origin add https://自分のGitHubユーザー名.github.io/自分のGitHubリポジトリ名.git 
git push origin master

1度実行しないとエラーで進めませんでした。
理由は分かりませんがgit remoteなんたらをやる必要があるみたいです。
これで準備完了ということで実行コマンドを入力します。

Git Bash

yarn deploy

最初はPowerShellでコマンド実行していたのですがなにかとエラーが多かったのでGit Bashがおすすめです。
無事実行出来たらGitHubでリポジトリを確認します。
masterとは別にgh-pagesというブランチができていてそこにbuildフォルダの中身がアップロードされているのが確認できます。
GitHub Pagesを確認。
表示されていました、、、
感動。

さいごに

ざっくり書いてみたのですがいかがでしたでしょうか。
同じような環境で躓いてしまった人の情報の足しになれば幸いです。
ちなみに僕は今回書いたGitHub Pagesでポートフォリオを公開にあたって5時間近くかかりました。
初学者はこれの繰り返しですよね。
今回は備忘録として書いてみました。
見てくださった方々ありがとうございました。