GitHub Pagesでサイトを公開する

Reactで作成したサイトをGitHub Pagesで公開する。
前提条件として、公開するプロジェクトはすでにGitHubのリポジトリにアップロードされていることとします。

1. gh-pagesをインストール

$ npm install gh-pages --save-dev

2. package.jsonファイルに設定を追加

{
  ...
  "homepage": "https://{github_username}.github.io/profile", // 追加
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build", // 追加
    "deploy": "gh-pages -d build" // 追加
  },
  ...

3. GitHubへのデプロイ

$ npm run deploy

4. リポジトリの公開設定

下記のパスのページへアクセスし、Source項目で「gh-pages」ブランチを選択してSaveボタンを押してください。

https://github.com/{github_username}/{repository_name}/settings/pages

5. サイトの確認

下記のパスでサイトが公開されます。

https://{github_username}.github.io/{repository_name}/