因為最近要回去當前端了，投履歷發現自學的 react.js 少了火力展示，所以就花了點時間製作了 What-Can-We-Eat React Project，希望可以讓公司覺得我雖然離開前端三年，但還是誠意十足、學習熱誠滿點。(拜偷
什麼是 Github Pages 呢？
Github Pages 是 Github 推出使用 repository 建置靜態網頁的服務，算是免費的虛擬主機。我們不用另外買網域跟 server，建置好 github page 後， Github 會幫把以上準備好（網址可另外設定）。通常我們會指定 branch gh-pages 來當頁面檔案來源，所以人稱之為 gh-pages。
那麼好的事情，一定會有些限制。例如頁面一定是公開、不支援 server-side code，如：PHP、Python，或是有儲存空間上的限制。但對於一般使用 JavaScript、CSS、HTML 製作的 project，gh-pages 是我們 demo 的好選擇！
開始使用
1.準備 React Project 並有指定的 Github repository.
建議先製作指定的 Github repo，用非常方便的建置 React 神器 “create-react-project” 在指定的路徑底下建置後把兩者綁定。
流程大致如下：先在 Github 新增一個 repo (這裏命名為 react-gh-pages-demo)，新增一個與 repo name 一樣的 folder 在電腦裡，並且在 folder 的上層開始輸入指令。
$ npm create-react-app react-gh-pages-demo
$ cd react-gh-pages-demo
// 初始化 react-app
$ npm start
// 初始化 git
$ git init
// 綁定 react-app 到指定的 github
$ git remote add origin git@github.com:[你的 github 帳號]/react-gh-pages-demo.git以上步驟，需要先有 Github 帳號，把 commard-line Git安裝在 client 裡面，然後會要有一點 linux/npm sense。如果不清楚我在說什麼的 Google 是你的好朋友QQ
2. 完成 Your React APP
此步驟說起來簡單卻不簡單，全部的心血跟困難都在這句裡面。加油！
create-react-app 內有指令可協助在 localhost中運行網頁並除錯，所以不用急建置 gh-pages。
3. 下載並安裝 gh-pages 套件
仿間有很多建置 gh-pages 的方法，我選擇直接下載現成的工具。該套件會協助我們新增 gh-pages branch 外，也會幫我們把程式碼打包好.
$ npm install gh-pages --save-dev安裝完後，會在 package.json 的 scripts 資料中發現新增了一些指令。
"scripts": {
...
"predeploy": "npm run build", // bundles React in production mode
"deploy": "gh-pages -d build" // do gh-pages things
}4. 在 package.json，把 homepage 指定到 gh-pages 的網址。
（該網址就是 app 的 demo site 網址）
{
"name": "react-gh-pages-demo",
"version": "0.1.0",
"private": true,
"homepage": "https://[你的 github 帳號].github.io/react-gh-pages-demo"
...
}5. 用 gh-pages 套件開始建置。and wish good luck
$ npm run deploy跑完沒有錯誤後，可上 Github 看是否有新增 gh-pages branch 成功，並查看上述的 homepage url 是否有成功出現 React App 喔！
6. 解決 gh-pages 上使用 React-Router 問題
在神秘的魔力下，React-Router 在 gh-pages 上切換網址會有轉導錯誤的問題。該網誌上有解答，只要在 <BrowserRouter> 設定 basename可解決。
<BrowserRouter basename={ process.env.PUBLIC_URL }>
<Route path="/" exact component={ Bcomponent }></Route>
<Route path="/show-all" component={ Ccomponent }></Route>
<Route path="/create-rest" component={ Acomponent }></Route>
</BrowserRouter>process.env.PUBLIC_URL 會在 npm run build時，取代成指定的 URL，在我們 case 上就是 /react-gh-pages-demo ，可確保 router 轉導不會跑掉。
以上，希望有幫助到大家，也讓我也紀錄筆記與回顧 :-)
References:
1. Deploying React Applications to Github Pages. Author: Oluwaseun
2. gitname/react-git-page.
3. React-router problem with gh-pages. Author: Ngoc Vuog
