開発者コラム

開発者コラム

SmartBee開発エンジニアが、
業界の最新動向や技術について
コラムでご紹介します。

開発メモ

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 をクリックして内容を確認。

無事表示されたら終了。


それでは、また次回。

開発者コラム一覧に戻る開発者コラム一覧に戻る

お問い合わせはこちら月曜日~金曜日9:00~17:30
(ただし祝日、弊社休業日を除く)

SmartBee 紹介資料(PDF)のダウンロード