はじめに
みなさん、こんにちは torihaziです
最近Reactを学んでいて、それをGithub Pagesにあげようと
していたのですが、なんだかいつもやっていたやり方ではダメらしく。
それならこの際記事にしようということで作ってみることにしました。
目次
環境
MacOS npm -v : 10.7.0 node -v : v20.14.0 Docker
やり方
1. Github上にリモートリポジトリを作成する
2. リモートリポジトリをクローンする
作成手順に関しては他記事を参考にしてください。
GitHub でリモートリポジトリ作成からプッシュまでの流れ #初心者 - Qiita
3.Reactプロジェクトを作成する
ブランチは必要に応じて切ってください。
以下はdev
ブランチとして作業をします。
Reactプロジェクト作成はコマンド1個叩くだけなので簡単に。
作業ディレクトリに移動して # npx react-create-app .
このコマンドを実行するだけで、
publicやら色々なディレクトリが作成されると思います。
4. Reactプロジェクトを編集する
この項目については各々の作業次第となるので割愛します。
5.package.jsonを編集する
結論から言うと下記項目をpackage.jsonに追加してください。
{ ~~ "homepage": "https://torihazi.github.io/react_todo_list", ~~~ "scripts": { ~~~~ "rm": "rm -rf docs", "mv": "mv build docs", "deploy": "npm run rm && npm run build && npm run mv" }, ~~~ } }
それぞれ説明します。
- homepage について
ここについては以下の書き方です
https://{Githubのユーザ名}.github.io/{リポジトリ名}
と言う名称です。
- scripts内の追加項目について
大事なのは npm run build
した結果、作業ディレクトリにできる
build
ディレクトリをdocs
ディレクトリにリネームすることです。
なぜよりによってdocs
かは後ほどわかります。
とにかく今は そう言うものなんだと理解してください。
6.リモートリポジトリにプッシュする
今回はdevブランチなので以下は例です。
git add . git commit -m "fin react-project" git push origin dev
とでもすればOKです!
7 Github Pagesの表示を設定する
Githubを開いて、Settingsを開きます。
画面左側タブにあるPagesを開きます。
赤マル内の箇所において (ブランチ名) /docs と選択する
※先ほど buildディレクトリを docsにリネームしたのはこのためです。
以上が終わってしばらく経つとURLが表示されます。
クリックしてうまく表示されていれば成功です!
お疲れ様でした!!
以下は私の例です!
終わりに
普通のHTMLとかであれば、docsとかbuildとか考えなくてもよかったのですが
Reactとなると話が別でこんがらがりました。
また公式は"gh-pages"というものをインストールしてやれよ
というふうに言っていますが、やっていることは本記事と同内容です。
ネットを調べて回ってみてもそのやり方をしている人もいれば
好きなブランチ名でやっている人もいるので好みではないでしょうか。
参考程度に公式は下記です!
それでは良いReactライフを。