GitHub PagesでReact App - MBP(はてな)

https://hiroyuki12.github.io/react-pages/

GitHubからcloneした後は、
.envファイルのバックアップをプロジェクトのルートフォルダにコピー。デプロイ時は.envファイルを削除して、プラットフォームのキー管理システムを使用する。
APIキーを非表示にする方法 - Qiita

プロジェクトのルートフォルダで
$ npm install
$ npm run build
$ npm run start

$ npx create-react-app react-pages
$ cd react-pages
$ git remote add origin git@github.com:hiroyuki12/react-pages.git
$ git branch main
$ git push -u origin main で Permission deniedになるので、公開鍵をGitHubにアップする

$ cd ~/.ssh
$ ssh-keygen -t rsa
公開鍵をGitHubにアップする
titleは任意の文字列
$ pbcopy < ~/.ssh/id_rsa.pubでKeyをコピーできる

GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~ - Qiita

remoteのURLを変更する場合は
$ git remote set-url origin {new url} {}は不要
gitのremote urlを変更する(レポジトリ移行時) - Qiita

再度
$ git push -u origin main でプッシュできる

$ vi package.json して、
homepageとdeployの行を追加

  "homepage": "http://hiroyuki12.github.io/react-pages",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build"
  },

gh-pagesをインストール
$ yarn add -D gh-pages

$ npm run deploy すると、buildフォルダが無いためエラー
$ npm run build
$ npm run deploy でデプロイできる

https://hiroyuki12.github.io/react-pages/

デプロイの進捗と結果確認
Actions · hiroyuki12/react-pages · GitHub

GitHub Pages でReact Appを公開 - Qiita

github pagesにreactアプリをデプロイして少しハマった話 - forza alex

App.jsを変更して、$ npm run build して、$ npm run deploy して少し待つと、
https://hiroyuki12.github.io/react-pages/
が更新される。

iPhoneのsafariで開いて、共有メニューのAdd to Home Screenを選択すると、ホームスクリーンに追加され、アプリのように使うことができる