GitHub Pages下拉菜单调出方法及React部署后仅显示Readme.md问题求助

第一步：确保正确构建并推送React静态文件 #

如果你的项目是用create-react-app创建的，先按以下步骤操作：

• 安装gh-pages工具：

  npm install gh-pages --save-dev
  

• 在项目根目录的package.json中添加两个关键配置：
  1. 顶部添加homepage字段，替换成你的仓库地址：

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

  2. 在scripts中添加部署相关命令：

     "scripts": {
       // 保留原有脚本
       "predeploy": "npm run build",
       "deploy": "gh-pages -d build"
     }
     

• 运行部署命令，自动生成gh-pages分支并推送静态文件：

  npm run deploy
  

如果是用Vite构建的React项目，只需把deploy命令改成gh-pages -d dist即可，其他步骤一致。

第二步：排查发布源选项不显示的问题 #

完成第一步后，回到GitHub仓库的「Settings」→「Pages」页面，应该就能看到gh-pages分支的选项了。如果还是看不到，检查以下几点：

• 确认gh-pages分支存在：去仓库的「Branches」页面查看，该分支下必须有index.html和静态资源文件夹（比如static或assets），空分支或仅含README的分支不会被识别为可发布源。
• 检查仓库权限：如果你是仓库所有者，确保没有权限限制；如果是组织仓库，需要确认组织管理员开启了GitHub Pages功能。
• 若想从主分支（比如main）发布：需要在主分支下创建docs文件夹，把构建后的静态文件放入其中，此时设置页面会出现main / docs的选项。

第三步：验证部署结果 #

当你选择正确的发布源（比如gh-pages分支）并保存后，等待几分钟让GitHub Pages完成部署，刷新你的网站地址，应该就能看到React项目的内容，而不是README了。

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