非Jekyll/Create React App构建的React项目部署Github Pages后页面空白求助

我明白你现在的困扰——把React项目部署到GitHub Pages后页面一片空白，仓库已经改成了davez01d.github.io，用的master分支，index.html也放在根目录，但网上的方案大多针对Jekyll或者create-react-app生成的项目，确实不太适配你的情况。结合我自己踩过的坑，给你几个具体的排查和解决方向：

1. 确保部署的是编译后的静态产物 #

如果你不是用create-react-app搭建的项目，千万不要直接把React源码推到仓库里！GitHub Pages只能解析静态的HTML/CSS/JS文件，没法帮你编译React代码。你需要先在本地把项目打包：

• 用你项目对应的打包工具执行命令，比如webpack的npm run build或者vite的npm run build
• 把打包生成的dist（或build）文件夹里的所有文件，复制到仓库的根目录下，再提交推送到master分支

2. 检查index.html里的资源路径 #

打开根目录的index.html，看看里面引入的JS、CSS文件路径是不是相对路径：

• 如果写的是绝对路径（比如/static/js/main.xxx.js），改成相对路径（./static/js/main.xxx.js），因为GitHub Pages部署在你的域名根目录下，绝对路径可能会导致资源找不到
• 同时确认这些资源文件确实存在于仓库对应的路径里，有没有漏传

3. 关闭GitHub Pages的Jekyll自动处理 #

GitHub Pages默认会用Jekyll来构建页面，但Jekyll会忽略以下划线开头的文件夹，而且可能干扰静态文件的解析。你可以在仓库根目录新建一个空的.nojekyll文件，提交推送后，GitHub Pages就会跳过Jekyll的处理，直接加载你的静态文件。

4. 查看浏览器控制台的错误提示 #

打开你的页面按F12，进入开发者工具的控制台，看看有没有报错：

• 如果是404错误，说明某个资源文件路径不对或者没传上去
• 如果是JS运行时错误，那就是你的React代码在生产环境有问题，需要回到本地排查调试

5. 确认GitHub Pages的部署源设置 #

进入仓库的Settings页面，找到Pages选项，仔细检查：

• 部署源是不是选择了master分支
• 分支对应的文件夹是不是根目录（/root）
  有时候不小心选错分支或者路径，也会导致部署的内容不对，页面自然空白

内容的提问来源于stack exchange，提问作者davmex