React appで作成したポートフォリオをGitHub Pagesでデプロイできた

React app(ポートフォリオサイト)をやっとデプロイできた

最終的に成功した時に参考にしたサイト

試した中でこのページ以外のやり方だと、なぜかエラーが出てデプロイできなかった。

エラーメッセージ

npm ERR! missing script: build

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/kakizakimanato/.npm/_logs/2021-06-07T14_05_58_985Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! portfolio@0.1.0 deploy: `npm run build && gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portfolio@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/kakizakimanato/.npm/_logs/2021-06-07T14_05_59_032Z-debug.log
kakizakimanato@kakiMacBook-Air portfolio % npm run deploy

> portfolio@0.1.0 deploy /Users/kakizakimanato/deploy/portfolio
> npm run build && gh-pages -d build

npm ERR! missing script: build

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/kakizakimanato/.npm/_logs/2021-06-07T14_06_57_636Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! portfolio@0.1.0 deploy: `npm run build && gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portfolio@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/kakizakimanato/.npm/_logs/2021-06-07T14_06_57_690Z-debug.log

まだ自分がデプロイできるかわからない時は、ファイルをコピーしてデプロイテスト用のディレクトリ内で試すといいかもしれません
(色々な方法試しているうちにpackage.jsonファイルなどぐちゃぐちゃになります...)

少し追加でやらないといけないこと

GitHubのアカウント情報を紐付ける

$ git remote add origin https://github.com/<GitHubアカウント名>/<GitHubリポジトリ名>.git

を実行する前に、GitHubアカウントの情報を設定する必要があった

$ git config --global user.name "[githubユーザー名]"
$ git config --global user.email "[githubで使用しているメールアドレス]"

これでgit remote add originができる

GitHub Pagesの設定

ソースブランチをmasterに設定し、rootファイルをdocsに変更し、["Save"]をクリック

数分待ってURLをクリックすると、成功していればWebサイトが見られるはず

次はファイルを編集後、再デプロイできるようになりたい