這幾天我們已經學習了許多 React 的技術，是時候部屬 React 的作品到 github 上了！如果不是大型的網站，只是要展示自己的作品或寫一個部落格的話，可以直接架設在 github page 上，簡單又方便。

gh-page 介紹

一般的靜態網站，只需要用 git 將網站 push 到 github 上，再點選 github 的 page，選擇 branch 架設即可，過個幾分鐘就完成架設。
不過我們使用的技術是 React ，跟單純 HTML 的網站不太相同，因此我們需要使用一個套件：gh-pages。
gh-pages 可以幫助我們架設 React 的程式在 github page 上，是個非常方便好用的套件。
這幾天我們已經學習了許多 React 的技術，是時候部署 React 的作品到 github 上了！如果不是大型的網站，只是要展示自己的作品或寫一個部落格的話，可以直接架設在 github page 上，簡單又方便。

gh-page 介紹

一般的靜態網站，只需要用 git 將網站 push 到 github 上，再點選 github 的 page，選擇 branch 架設即可，過個幾分鐘就完成架設。
不過我們使用的技術是 React ，跟單純 HTML 的網站不太相同，因此我們需要使用一個套件：gh-pages。
gh-pages 可以幫助我們架設 React 的程式在 github page 上，是個非常方便好用的套件。

安裝

在安裝前，需要先將專案 push 上 repo，push 完後再照著下面做，將網頁放到 page 上。

首先先安裝，可以使用 npm 或 yarn：

npm install --save gh-pages

or

yarn add gh-pages 

設定

接著，要來設定使用 gh-pages 的指令。

打開 package.json，並且新增 homepage 和網址：

{
  "name": "realtime-weather-app",
+  "homepage": "https://<username>.github.io/<appname>",
  // ...
}

把 <username> 替換成你 github 的使用者名稱，<appname> 替換成 github 上建立的 repo 名稱。
要注意，如果你的使用者名稱有大寫字母，需要全部轉為小寫，像這樣:

MyAccount => myaccount

接著，在 scripts 裡面新增兩條指令，predeploy 和 deploy：

{
  "scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    // ...
  }
}

這樣就設定完成了！

發布

要發布也很簡單，剛剛我們有新增兩個指令，只需要執行 deploy 即可：

npm run deploy

or

yarn deploy

這樣他就會執行我們新增的兩個指令（predeploy 和 deploy），將網站發布上去。

查看 github

到 github 的 repo 看看，如果有成功發布，應該會發現 repo 多了一個 branch：gh-pages，這個 branch 會是部署在 github page 上的資料來源。
接著到 page 頁查看，應該可以看到網站已經被部署，並且資料來源的 branch 是 gh-pages：

如果這邊都沒有問題，那網站已經被正常的部署到 github page 上了，可以點選 visit site 查看自己的網站了！

參考資料
gh-pages - npm
[Day 29 - 即時天氣] 寫網頁就是要炫耀啊，不然要幹麻？發布上 Github Pages 吧！
[Git Note] — React 部署至 GitHub Page 超級淺入遷出