React App 部署到 GitHub Pages 上
建立 React App
在 GitHub 上建立一個新的 Repo
- 建立一個新的 Repo
把 Repo clone 到本機端
- 複製 Repo 的 link
- 開啟終端機，進到想要存放 Repo 的資料夾，然後輸入以下指令
git clone <repo_link>
安裝 Node
- 根據 Create React App 的 官方文件 (opens in a new tab)，首先需要安裝 Node.js，可以到 Node.js 官網 (opens in a new tab) 下載並安裝
- 檢查 Node 是否安裝成功，版本需大於 14
node --version
- 檢查 Npm 是否安裝成功，版本需大於 5.6
npm --version
建立 React App
- 使用
npx指令建立 React App（npx不是拼寫錯誤，是 Npm 5.2 以上的一個套件執行工具）npx create-react-app <app_name>
確認 React App 是否正常運作
- 進到 React App 的資料夾
cd <app_name>
- 啟動 React App
npm start
- 打開瀏覽器，輸入
http://localhost:3000，應該可以看到 React App 的畫面
安裝 gh-pages 套件
- 進到 Repo 的資料夾下，並安裝
gh-pages套件npm i gh-pages
更新 package.json 檔案
- 在
package.json檔案中，加上predeploy和deploy的指令"predeploy": "npm run build","deploy": "gh-pages -d build"
- 在
package.json檔案中，加上homepage的 link"homepage": "https://<github_user_name>.github.io/<repo_name>"
- 把更新後的
package.json檔案 commit 到 GitHub Repo 上git add .git commit -m "feat: Add homepage link & deploy scripts"git push
部署 React App 到 GitHub Pages
- 在 Repo 的資料夾下，輸入以下指令進行部署
npm run deploy
設定 GitHub Pages
- 到 Repo 的設定頁面，找到 GitHub Pages 的設定，並選擇
gh-pagesbranch
完成
- 打開瀏覽器，輸入
https://<github_user_name>.github.io/<repo_name>，應該可以看到 React App 的畫面
