【React】- React 怎麼做成 GitHub page？

前言

一般原生的 JS ，只要 push 到 GitHub 就可以直接在 Settings -> Pages 的地方設定要 push 的 branch。

但是像使用 React 等框架時，瀏覽器讀不懂 React 的語法。所以像是 create-react-app 有內建的 npm run build 可以封裝成瀏覽器讀得懂的 JS。

不過 npm run build 只是會生成 build 的封裝資料夾，GitHub page 還是會讀取 index.html ，所以要使用 GitHub 的 npm gh-pages ，去建立一個新的 gh-pages 分支，把 build 裡的資料放到 gh-pages 的分支裡。

步驟

首先一樣先把檔案全部都 push 到 GitHub 上：

1. 創建一個新的 repo
2. git add .
3. git commit -m '版本說明'
4. git remote add origin "網址"
5. git branch -M main （把分支名稱改成 main ，可以不用）
6. git push -u origin main （main 可替換成自訂的 branch 名稱）

再來就是 gh-pages 的部分：

1. 在上傳的資料夾底下輸入 npm install --save gh-pages ，這邊是使用 Git Bash。
   

2. 打開 package.json 的檔案，輸入：

   "homepage"："https://Username.github.io/app-name"
   

   Username 為你的 GitHub 名字。
   app-name 為你的 repo name。
   
   如果剛剛的 npm install gh-pages 有成功的話，也可在這邊的 dependencies 裡看到他的版本資訊。

3. 同樣在 package.json，到 scripts 的地方裡面加入

   "predeploy": "npm run build",
   "deploy": "gh-pages -d build",
   

   
   加完後儲存，就剩最後一個步驟拉！

4. 回到 Git Bash 輸入剛剛加入 scripts 的指令 npm run deploy ，就可以在 gh-pages 的分支放入 build 後的封裝檔案了。
   
   等他跑一下，最後出現 Published 就完成了！

5. 最後回到 GitHub 上，到 Settings -> Pages ，重新整理後，就會看到在 Branch 的地方多了一個 gh-pages，
   

選擇 gh-pages，然後按 Save，等一下下後就成功做成 GitHub pages 了！

參考

gh-pages
[Day 29 - 即時天氣] 寫網頁就是要炫耀啊，不然要幹麻？發布上 Github Pages 吧！