🥨 GitHubPagesについて
作成日: 2021/12/29
2

FireBaseやフリーサーバーでデプロイしたことはあるものの、
初めて使ったデプロイ方法なのでメモメモモモ・・・

  • まずはgh-pagesをインストールする
yarn add -D gh-pages
若しくは
npm add -D gh-pages
  • package.jsonが更新される
},
   "devDependencies": {
     "gh-pages": "^3.1.0"
  • 続いてpackage.jsonにhomepage属性を追加する
"name": "hooks-snake-game",
   "version": "0.1.0",
   "private": true,
   "homepage": "https://<username>.github.io/<hooks-snake-game>/",   <<<これ!!
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",

<username>にはGitのusernameを入れる <hooks-snake-game>にはリポジトリ名を入れる

このhomepage属性のurlは既にリモートリポジトリにプロジェクトがアップされている場合、
リポジトリ>設定>pagesにURLがここだよ!と書いてある
2021-12-30_00h10_38.png

が、一応公式ルールだと.github.ioのリポジトリを作れとか書いてあるので注意。
.github.ioのリポジトリ名じゃなくても大丈夫!
また、リポジトリはprivateではなく、public設定にしておく。

  • さらにpackage.jsonのスクリプトにビルド用のコマンド登録する
"scripts": {
     .......//
     "eject": "react-scripts eject",
     "predeploy": "yarn run build",  若しくは "npm run build"
     "deploy": "gh-pages -d build"
   },
"scripts": {
  "[コマンドのエイリアス]": "[コマンド]"
}
  • この登録により、以下のコマンドでデプロイできるようになる
yarn run deploy
若しくは
npm run deploy
  • buildされて最後がこんな感じでERRORが出ていなければ成功!
...........
Find out more about deployment here:

  bit.ly/CRA-deploy

$ gh-pages -d build
Published
✨  Done in 23.57s.

  • これにより、buildされたソースがgh-pagesというブランチでリモートに上がるため、
    最後にGit>リポジトリ>設定>Pages のSourceでブランチをgh-pagesに変更する。

2021-12-30_00h26_36.png


  • デプロイ後最大10分ほど繁栄に時間がかかるらしいけれど、すぐURL先に飛んで反映されていた。
    2021-12-30_00h31_53.png