部署 React App 成 gh-pages

Deploying a React App* to GitHub Pages

參考文章

GitHub - gitname/react-gh-pages: Deploying a React App (created using create-react-app) to GitHub PagesGitHub

前置步驟

• 建立 React App 專案

• 存入 GitHub

關鍵步驟一：React App 專案部份

安裝 gh-pages 套件

pm install gh-pages --save-dev

在 package.json 加入 homepage 位置

{
  "name": "my-app",
  "version": "0.1.0",
+ "homepage": "https://gitname.github.io/react-gh-pages",
  "private": true,

在 package.json 加入部署指令

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

執行 gh-pages 部署指令

npm run deploy

部署成功的話會在 GitHub 看到多一個叫 gh-pages 的分支(branch)。此分支放 build 好的 react app。再將此 branch 設定成部署出去的 GitHub Pages 就完成了。

關鍵步驟二：GitHub Pages 設定部份

進入 GitHub 該專案的 Settings\Pages指定 Build and deployment 的參數：

Source ： Deploy from a branch ------ 部署來源為 branch (分支)。

Branch ：gh-pages ------ 部署 gh-pages 分支。

設定好部署並 Save 後可能要十幾秒後才會生效，應該是在排隊。

(EOF)