React应用部署GitHub Pages遇404：仅显示README而非应用求助

核心问题排查与修复步骤 #

• 确认GitHub Pages部署源
  进入仓库设置的「Pages」页面，将部署分支设置为gh-pages，而非默认的main分支。npm run deploy会把React打包后的静态资源推送到gh-pages分支，若源选错，就会展示主分支的README文件。

• 完善package.json配置

  1. 安装gh-pages依赖：

     npm install gh-pages --save-dev
     

  2. 在package.json的scripts中添加部署脚本：

     "scripts": {
       "predeploy": "npm run build",
       "deploy": "gh-pages -d build",
       // 保留原有其他脚本（如start、build等）
     }
     

  3. 你的homepage配置无需修改，是正确的：

     "homepage": "https://ashishjaswal2002.github.io/Breaking_Bad"
     

• 重新执行部署流程

  1. 清理旧build文件（可选）：

     rm -rf build
     

  2. 执行部署命令：

     npm run deploy
     

  3. 部署完成后等待1-5分钟，待GitHub Pages同步完成后再访问页面。

• 验证build文件夹有效性
  执行npm run build，检查项目根目录是否生成完整的build文件夹，里面必须包含index.html及所有静态资源。若build失败，需先排查项目编译错误。

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