初心者のプログラミング日記

プログラミング初心者の日記

プログラミングに関することを書いていきます。

Reactで作ったアプリをGitHub Pagesで公開する。

まず下記記事を参考に、Gitをインストールして名前とメールアドレスを設定しておいてください。
https://eng-entrance.com/git-install
次に、GitHubリポジトリを作っておきます。

次に公開したいプロジェクトの中でgh-pgaseをインストールします。

npm install gh-pages --save-dev
npm install gh-pages

グローバルでもローカルでもかまいません。

そしたら、package.jsonの中身をを変更します。

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build", //追加
    "deploy": "gh-pages -d build" //追加
  },
   .........
   "homepage": "https://ユーザー名.github.io/リポジトリ名/", //追加

homepageの所は自分に合わせてください。

次にデプロイして終わりです。

git init
git remote add origin https://github.com/githubユーザー名/リポジトリ名.git
npm run deploy

git initは必要ないかもしれません。
git remoteのURLは下記画像の赤枠の所をコピーで大丈夫です。
f:id:nasubiFX:20200518152740p:plain

デプロイするとGIthubにログインする画面が出てくろのでログインして、何もエラーが起きなければ成功です。

終わったらリポジトリに移動し、確認してみると以下のようになっているかと思います。
f:id:nasubiFX:20200518153250p:plain

自分初めて見たとき、失敗しとるやんけーと思いましたがこれで成功です。
説明文は後から付け足したので気にしないでください。

そしたらSettingに行き以下の画像の赤枠のURLをクリックして画面が表示されれば成功です。
f:id:nasubiFX:20200518153613p:plain

その下のSourceの所もgh-pages branchにしといてください。
自分の場合反映には少し時間がかかったので、何も表示されない場合は時間をおいてまた確認してみてください。

何かエラーがでたらbuild ->node_modules ->gh-pages ->.cacheを削除すれば治るかもしれません。

自分が今回この手順で公開したアプリが以下のTodoアプリです。
作ったのが結構前のやつなので適当です。
https://matsudasan.github.io/Todo/

このURLがpackage.jsonのhomepageで設定したURLになります。

最後に1つだけわからない所があって、プロジェクトを書き換えた場合って自働的にGitHub Pagesに反映されるんですかね?
よくわからないんで自分はnpm run deployをやると反映されるんでこの方法でやっています。

参考記事
https://qiita.com/jesuissuyaa/items/0e2a0d5adeeb9b8a86b3
https://uxbear.me/react-githubpages/