はじめに

この記事はReactで制作したSPAサイトをgithub-pagesに初めて公開した超初心者向けの記事になっています。

github-pagesの公開までは、React公式のこちらの手順通りに進めていけば出来ます。

問題は、公開後です。いざ公開したら修正箇所が見つかることはよくあると思います。というより、そういうことだらけです。そんな時に慌てて修正しても更新方法がわかっていなければどうしようもありません。

公開までは丁寧に解説する記事があっても、更新する方法の記事が全然載っていなかったのでここに記します。

更新する

結論から先に言うと、

npm run deploy

これでOKです。

エディタ上で修正して、保存したら、公開時最後に行ったnpmコマンドを再度実行することで公開したサイトも更新されます。

こんな単純なことなので、誰も記事にしないわけですね。

※　私がここでつまった言い訳として、github-pagesでのサイト公開前にFirebase Hostingを用いてアプリを公開・更新していたので、頭の中でごちゃまぜになった結果長時間悩むことになりました。ちなみにReactとFirebase Hostingでの更新は、

npm run build

の後に、

firebase deploy

です。

このbuild、deployのコマンド実行場所を各サービスで使い分けることを意識しておかないと私のように時間を浪費してしまうので要注意です。

更新方法は上記方法で大丈夫なはずですが、それでも更新されない時があるかもしれません。そんな時に一番シンプルな方法は少し時間をおくことです。

更新しても反映までに時間がかかることがあるので、10分程度何も触らずに待ってからもう一度公開されたサイトのリンクへ飛んでみてください。意外とこれで解決することもあります。

修正箇所がある場合、たいてい急いで更新が反映されるのを確認したくなりがちで、上手く反映されていないとまた修正してすぐに確認してと負のループに陥ることがあります。その結果、本当は最初の修正で上手くいっていたのに、無駄に時間を使ってしまうことになりかねないです。なので、待ちましょう。

ただし、もし30分以上待ったのに何も更新されていない場合、それはgithub側の問題ではなくあなた自身の問題（記述ミス、コマンドミス、修正箇所の誤り）の可能性が高いです。今一度コードを見直しましょう。

はじめにで言った通り、超初心者向けの解決策です。ですが、初心者は本当に単純な見落としでつまづいて、時間を浪費してしまうものなのです。そう言った人達と自分のために、この記事を残します。少しでも役に立てたなら幸いです。