首先登录到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
