首先登入到github，找到你要部署的倉庫，然後找到Settings 
選一下要部署的分支，save儲存一下
然後重新整理一下頁面，可以看到，已經出現了一個訪問的站點地址，說明你部署成功了。
打包問題
部署成功之後，上面的配置會預設找專案根(root)目錄下面的index.html載入，所以一定要保證你根目錄下有index.html，且必須是打包之後的，換句話說，你需要把你打包之後的檔案push到倉庫去，而不是原始碼。
靜態資源404
按照上面的配置，你的域名是這樣的https://使用者名稱.github.io/專案名/ 。如果你不做任何處理的話，頁面會白屏，因為沒有拿到對應的靜態資源，github pages 預設把我們的專案部署在 /專案名/ 這個子域名下，而不是https://使用者名稱.github.io/ 根域名，我們本地開發的時候，都是預設根域名，那如何解決這個問題呢？
修改配置檔案 vite.config.js
export default defineConfig({
base: "react-layout", // 專案名
plugins: [react()],
});
這樣修改的話，是沒有問題的。但是如果你專案裡面用到了location.pathname，在對pathname做split操作之後，會多了一層 react-layout，看起來很彆扭，為什麼伺服器的目錄地址，還要我在專案裡面做相容呢？彆着急，有辦法解決。
設定路由的basename
const App = () => {
return (
<BrowserRouter basename="react-layout">
...routes
</BrowserRouter>
);
};
找到你註冊路由的地方，將basename加上去，然後在專案裡面，不要直接用window.location，如果你是router v6版本，推薦使用useLocation()來獲取location，如果你是router v5版本，可以使用props.location（需要用withRouter包裹一下元件）。
透過react路由提供的方法獲取到的location.pathname，是不包含basename的。所以你可以完全不用被它所影響。
子路由重新整理404
到了這一步，基本上可以正常看到自己部署的專案內容，但當我訪問到某個子路由，一不小心重新整理了瀏覽器，就會出現404，為什麼會有這個問題呢？為什麼本地開發不存在呢？在github pages如何解決？真實專案線上伺服器又是如何解決的呢？
因為我用的是
history路由，所以當我瀏覽器url改變的時候，瀏覽器就會把我當前url地址看成後端的介面地址去請求（如果你配置的是hash路由，不會有這個問題）。很明顯，在這個域名下面，後端並沒有提供這個介面，所以404了。本地不會有這個問題是因為本地伺服器做了處理。如果沒有對應的後端介面，就會把
index.html檔案返回回來，有了index.html，就會執行前端路由，然後走前端路由的邏輯。知道了怎麼走到前端路由的邏輯，要解決這個問題就比較簡單了。把
index.html複製一份，然後改名為404.html，github pages如果找不到的話，會直接返回404.html，404.html裡面的內容其實就是index.html，然後走前端路由邏輯。真實專案一般都是用
nginx代理，所以需要在nginx裡面配置一下它的location
location / {
try_files $uri $uri/ /index.html;
}
作者：sensFeng
連結：https://juejin.cn/post/7436479025987452980
