React で作成した App を 4Step で GitHub Pages に公開

  • SmartBee

最終更新⽇:

掲載⽇:

今回は少しずれる形となりますが
個人的な趣味嗜好の話。
SmartBee開発で少し詰まったところを似たものを例に備忘録として残します。

Step.1

# gh-pages ライブラリをinstall
GitHub Pages 用にbranchを作ってdeployしてくれるライブラリです。
開発環境用にインストールします。

```bash
npm install gh-pages --save-dev
```

Step.2

# package.json の設定
package.jsonにデプロイコマンドとホームページを登録してやります。

```package.json
{
...
  "scripts": {
  ...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
  },
  "homepage": "https://[github_id].github.io/[repository_name]"
...
}
```

Step.3

# デプロイ
デプロイコマンドを打ちます。

```
npm run deploy
```

`Published` が表示されたら成功.

Step.4

# 公開ブランチの設定
Github 上で設定します。

Setting -> Pages -> Branch にて、
branch を gh-pages に変更します。

![image.png](https;//qiita-image-store.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.png)



暫く待つとページ上部にリンクが表示されますので、
Visit Site をクリックして内容を確認。

無事表示されたら終了。


それでは、また次回。