React代码在GitHub仓库显示异常，src/public缺失且代码不可读

问题根源 #

你大概率是误把React打包后的build目录产物（也就是仓库里的static文件夹）推到了主分支，覆盖了原本的public、src等源码文件——新手跟着部署教程时很容易犯这个错。

解决步骤 #

1. 恢复主分支的源码 #

• 打开本地项目的终端，确保你在项目根目录（能看到public、src、package.json的文件夹）
• 检查当前分支：输入git branch，如果不在主分支（main或master），切换回去：git checkout main（如果你的主分支是master就写master）
• 把本地源码重新推送到GitHub主分支：

  git add .
  git commit -m "恢复源码：public、src及配置文件"
  git push origin main
  

  执行完这些操作后，GitHub主分支就会重新显示你的源码文件。

2. 正确部署可运行网站（不影响源码分支） #

要展示可访问的网站，别再动主分支，用专门的gh-pages分支来部署：

• 安装部署工具：npm install gh-pages --save-dev
• 打开项目的package.json，添加以下配置：

  "homepage": "https://Rohitkumar123github.github.io/random-suggestion-using-api",
  "scripts": {
    // 保留原有脚本，新增下面两行
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
  

• 运行部署命令：npm run deploy
• 部署完成后，去GitHub仓库的「Settings」→「Pages」页面，把部署分支设置为gh-pages，根目录选择/root，保存后等几分钟就能访问你的网站了。

3. 后续维护注意事项 #

• 主分支只用来推送源码（public、src、package.json这些），绝对不要把build产物推到这里
• 更新源码后，先推主分支：git add . && git commit -m "更新代码描述" && git push origin main
• 需要更新网站时，再运行npm run deploy，它会自动打包并把产物推到gh-pages分支

这样主分支能清晰展示源码给雇主，gh-pages分支负责运行网站，两者互不干扰。

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