[React] 安裝 vite 及 react 發佈至個人 github page

「想讓全世界看到我的網頁」，那就來把 react 上到 github page 吧！

1. 透過 vite 快速安裝 react (比 webpack 快，比 CRA 瘦)

2. 安裝 gh-pages 來快速發佈至 github page

3. 修改 base path 完成發佈

1. 透過 vite 快速安裝 react

這邊會建立一個「home」資料夾，並快速安裝 react

yarn create vite home --template react

如果沒裝 yarn 也可以使用 npm 來安裝

npm create vite@lateset home -- --template react

裝好 vite 接著在來把依賴套件裝起來

yarn install

那我們可以先看看資料夾內容，應該差不多，不過接著的 HMR 及運行速度才是重點

vite、react

那就來試用看看這個 vite build tool run 起來 react 的狀況吧！

yarn dev

我這邊是 0.3s 就運行起來，然後自己嘗試更改一些程式可以發現 HMR 快得驚人．．．

http://localhost:3000/

2. 安裝 gh-pages 來快速發佈至 github page

我們先連接至自己 github 上的 repository，並把專案推上去

git init
git branch -M main
git add .
git commit -m 'first commit'
git remote add origin https://github.com/你的帳號/你的repo.git
git push -u origin main

再來把 gh-pages 套件安裝起來

yarn add gh-pages

安裝好後，把 homepage、script 指令寫上去

package.json

接著就部署啦！

yarn deploy

3. 修改 base path 完成發佈

理論上這樣到自己的 github page 其實就有檔案存在，不過因為 dist 內的檔案位置有些不正確，應該說不知道 github page 的位置，所以需要稍微修改一下

有些人說要透過 react-router-dom 來將路徑導回至正確位置就好，這聽起來可以，不過並非正確做法

vite 官方文檔：https://vitejs.dev/guide/build.html#browser-compatibility

參考後可以得知，修改 build 那邊的指令即可

修改完後重新 deploy 一次，上自己的 github page 啦！！

yijay