Reactで作成したアプリをGithub Pagesへ公開

Reactを静的サイトとして公開できるらしい

ReactをGitHubPagesへ公開する手順書です。

[ソースコード]
https://github.com/saisai-web/Neko
[公開GitHub Pages]
https://saisai-web.github.io/Neko/

初めは公開ディレクトリ(/docs)とかで直接やる方を検討していたんですが、gh-pagesを使った
やり方の方がシンプルでやりやすかったのでそちらを記載します。

前提条件

・MacOS
・GitHubアカウント作成済み
・NodeJSインストール済み

手順

GitHubにリポジトリを作成する

Newから新しいリポジトリを作成してください。

リポジトリ名は任意で、CreateRepositoryできれば完了です。

作成したリポジトリは後で使用します。

TerminalでReactプロジェクトを作成

$ npx create-react-app プロジェクト名
$　　cd プロジェクト名

必要なパッケージ等もインストールする

Github-Pagesで公開する際に必要なライブラリをインストールします。

$ npm install gh-pages --save-dev
$　　npm install cross-env --save-dev

package.jsonを編集する

scripts欄の、buildは下記に変更し、deployは追記してください。

~/プロジェクト名/package.json

{
  ...,
  "scripts": {
    ...,
    "build": "cross-env PUBLIC_URL=/<リポジトリ名> react-scripts build",
    "deploy": "npm run build && gh-pages -d build"
  },
}

TerminalからGitHubへアクセス

deployする前に、初めに作成したgithubリポジトリを登録しておく

$ git remote add origin https://github.com/<Gitユーザー名>/<リポジトリ名>.git

deployして完了

$ npm run deploy

deployが完了すると作成したgithubリポジトリにgh-pagesブランチが作成されているのが確認できる

公開URLをクリック

github項目のActionから確認できる

deployの欄のurlから作成したアプリを閲覧できる