React代码推送到GitHub main后GitHub Pages仍显示create-react-app默认初始页

常见原因及对应解决方法 #

• 修正package.json中的homepage配置
  你当前的配置存在两处典型错误：一是字段名首字母大写了，必须为全小写的homepage；二是缺少HTTPS协议头，不要用www开头的无协议格式，正确配置参考：

  "homepage": "https://<你的GitHub用户名>.github.io/<仓库名>/"
  

  注意末尾的斜杠不要遗漏。

• 本地验证构建产物
  先在本地执行npm run build，完成后直接打开build目录下的index.html，确认显示的是你开发的页面而非React初始模板。如果本地构建结果就不对，说明你当前本地的代码未更新，检查是否有未提交/未保存的代码变更。

• 检查GitHub Pages部署源配置
  进入对应GitHub仓库的「Settings」→「Pages」页面，在「Build and deployment」板块的「Source」项，确认部署分支为gh-pages，部署目录为/(root)，保存配置后等待2-3分钟再访问页面。

• 清理缓存重新部署
  先清除浏览器缓存（按Ctrl+Shift+R/Cmd+Shift+R强制刷新，或用无痕模式访问）排查是否是本地缓存问题。如果还是异常，可删除本地gh-pages分支后重新执行部署：

  git branch -D gh-pages
  npm run deploy
  

  执行部署时注意终端输出，排查是否有权限类报错导致gh-pages分支内容未更新。

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