Torihaji's Growth Diary

Little by little, no hurry.

React プロジェクトをGithubPagesに投稿する方法(gh-pages未使用)

はじめに

みなさん、こんにちは 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.リモートリポジトリにプッシュする

CLIGUIクライアントを使うかは任せます。

今回は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ライフを。

create-react-app.dev