ReactアプリをGithub Pagesにデプロイ（ライブラリ不使用）

Reactアプリをgh-pages ライブラリを使わずにgithub Pagesに公開する方法をまとめました。

開発環境

• npm v8.19.2
• node v19.0.1
• react v18.2.0

デプロイ方法

アプリの作成

npx create-react-app my-app 

• my-appディレクトリ配下にReactアプリの雛形が作成されます。
  コードを書いてアプリを作成してください。

package.jsonの編集

"homepage": "https://(アカウント名).github.io/(リポジトリ名)",
"scripts": {
    ~ 略 ~
    
    "rm": "rm -rf docs", 
    "mv": "mv build docs",
    "deploy": "npm run rm && npm run build && npm run mv"
},

• package.jsonに上記を追加してください。
• rm,mvのスクリプトは、gitignoreファイルのbuildの部分をコメントアウトすれば必要ないと思います。
  しかし、以下の記事を参考に今回はやってみました。専用のブランチではなく、ソースコードと同じブランチを使うのでbuildファイルをdocsに名称を変えています。

: https://engawapg.net/software-development/2393/github-pages-branch/

デプロイコマンドの実行

npm run deploy 　//docsが作成されます

GitHubにpush

git add .
git commit -m 'コミットメッセージ'
git push origin (作業ブランチまたはmain)

GitHub Pages の設定

• SettingsタブからPagesを選択
• Branchとdocsディレクトリを選択して保存

• デプロイ状況はActionsタブから見れます
• URLをクリックして完了です！