GitHubPagesについて

🥨 GitHubPagesについて

作成日： 2021/12/29

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がここだよ！と書いてある

が、一応公式ルールだと.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に変更する。

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

Takeuchi