ReactをGitHub Pagesにデプロイしようとしたら詰まった話

詰まったポイント

React + typescript でアプリを作成し、GitHub Pagesにデプロイしても真っ白になる問題に遭遇しました。
開発者ツールで確認したところ404: Errorでした。(<= そもそもサイトの読み込めていない)

解決方法

GitHub PagesではサブディレクトリがベースURLとなり公開されているので、リソースの読み込みが絶対パスなのを修正するだけでした。(私はこの解決方法を知るのに1時間かかりました)

index.htmlのリソース読み込みは以下のように変更してください。

<!-- 「/static/js/...」を「static/js/...」等に変更-->
<script defer="defer" src="static/js/main.f290cddc.js"></script>
<link href="static/css/main.073c9b0a.css" rel="stylesheet">

ちなみに下記のように書いてもできるらしいです(未検証)。

<script defer="defer" src="/IF/static/js/main.f290cddc.js"></script>
<link href="/IF/static/css/main.073c9b0a.css" rel="stylesheet">

おまけ

ここで解説記事の少ない、windows OSにおけるReactプロジェクトのGitHub Pageへのデプロイ方法を残しておきます。

1. npm run buildでbuildする
2. \buildの名称を\docsに変更する

あとはいつも通り（Git＆GitHubでの管理ワークフロー)で大丈夫です。
GitHubのリポジトリにてPagesの設定も忘れずに！

build内容を更新したい場合(再Buildする場合)は上書き、もしくはgit rm -r docsで削除、そしてコミット。
その後、再度1～2のワークフローで再デプロイをオススメします。

Unix系(Macを含む)の解説は下記リンクが参考になると思います。(Reactでのデプロイ方法のメイン解説はこちら)
https://qiita.com/tat_mae084/items/745761eee6cd1d42949d