GitHub Pagesでウェブサイトをホスティング

今回のポスティングでは、github pages に deploy する方法について紹介したいと思います。
gh-pages を利用したら簡単に自分のウェブサイトを作ることができます。
このポスティングでは、これらの設定プロセスを段階的に説明します。

① gh-pages とは？

完成したコードを github pages にアップロードできるようにするパッケージ

github pages は、github が提供する無料サービスです。
html、css、javascrip をアップロードすると、
それをウェブサイトにして全世界に無料で配布してくれます。

インストールするために、コマンド入力

npm i gh-pages

② build

package.json にある scripts を確認

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

package.json には build という script がある
build を実行すると、ウェブサイトの production ready code が生成される
実行するため、コマンド入力

npm run build

完了すると、プロジェクトに build というフォルダが作成される

③ homepage url 作成

プッシュする前に URL を作成しなければならない
package.json で最後に部分で

“homepage”: "https://GitHub の username.github.io/コードが入っている github repository"

github repository の確認方法

git remote-v

④ package.json に script を追加

deploy 追加
deploy は gh-pages を実行させ、build というディレクトリを持つ

"deploy": "gh-pages -d build”

predeploy 追加 deploy を実行する前に build を実行

"predeploy": "npm run build”

結果

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "deploy": "gh-pages -d build",
  "predeploy": "npm run build"
},

⑤ コマンドで deploy 実行

 npm run deploy

deploy 実行前に build を実行する

build が終了すると gh-pages-dbuild が実行される

⑥ deploy 確認

5 番を実行した後、5 分後に deploy になる
package.json に入力した homepage アドレスを入力