将React网站发布到GitHub Pages后仅显示空白页，如何解决？

• 检查package.json配置
  确认根目录下package.json中配置了正确的homepage字段：

  "homepage": "https://sarahacollins.github.io/PortfolioWebsite"
  

  字段值不要多写末尾斜杠，也不要写错仓库名。
• 检查部署脚本配置
  如果你使用官方推荐的gh-pages包完成部署，需要在package.json的scripts字段中添加以下配置：

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

  配置完成后执行npm run deploy即可自动完成打包、上传到gh-pages分支的操作，不要手动将index.html移动到根目录，该操作会导致页面无法关联对应的静态资源，反而出现白屏。
• 检查GitHub Pages仓库设置
  进入仓库Settings页面，找到Pages选项，在Build and deployment板块下确认：
  • Source选择Deploy from a branch
  • Branch选择gh-pages分支，目录选择/(root)
    配置修改完成后等待3-5分钟，待部署生效后再访问页面。
• 路由适配调整
  如果你项目中使用了BrowserRouter实现路由，GitHub Pages默认不支持单页应用的history路由模式，会导致页面加载失败，需要将路由组件替换为HashRouter即可解决。
• 控制台报错排查
  如果以上操作都完成后还是白屏，打开页面后按F12打开浏览器控制台，查看Console标签下的报错信息，可以快速定位是资源加载问题还是代码运行问题。

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