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は下記画像の赤枠の所をコピーで大丈夫です。
デプロイするとGIthubにログインする画面が出てくろのでログインして、何もエラーが起きなければ成功です。
終わったらリポジトリに移動し、確認してみると以下のようになっているかと思います。
自分初めて見たとき、失敗しとるやんけーと思いましたがこれで成功です。
説明文は後から付け足したので気にしないでください。
そしたらSettingに行き以下の画像の赤枠のURLをクリックして画面が表示されれば成功です。
その下の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/