GitHub Pages部署后页面白屏，静态资源404求助

核心原因分析 #

从你的错误截图和仓库情况来看，问题大概率是静态资源路径配置错误。GitHub Pages部署时，资源路径会关联仓库名称，本地开发的路径和线上路径不匹配，导致资源无法被找到。

具体解决步骤 #

• 针对React项目（从项目名称robofriends判断）的配置调整

  1. 在项目根目录的package.json中添加homepage字段，值为你的GitHub Pages访问地址：

     "homepage": "https://Monikitta.github.io/robofriends"
     

  2. 重新执行打包命令生成正确路径的静态资源：

     npm run build
     

  3. 推荐使用gh-pages工具简化部署流程：
     先安装依赖：

     npm install gh-pages --save-dev
     

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

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

     最后执行npm run deploy，工具会自动把build文件夹部署到gh-pages分支，之后在仓库的Settings -> Pages中选择该分支作为Source即可。

• 检查GitHub Pages分支配置
  进入仓库的Settings -> Pages页面，确认Source选项选择的是正确分支：如果用gh-pages工具部署就选gh-pages分支；如果直接上传打包产物，选master分支并设置目录为/build。

• 修正项目内资源引用路径
  项目中引用静态资源时，不要使用硬编码的绝对路径（比如/static/build/xxx.js），改用相对路径，或是在React项目中通过process.env.PUBLIC_URL拼接路径：

  <link rel="stylesheet" href={`${process.env.PUBLIC_URL}/css/main.css`} />
  

额外注意事项 #

• 不要直接上传本地的static/build文件夹，应该部署打包后生成的根目录下的build文件夹。
• 部署完成后等待几分钟，GitHub Pages可能需要时间同步资源。

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