React应用部署至GitHub Pages后仅显示ReadMe文件问题求助

• GitHub Pages部署源配置错误：默认将部署源设置为main/master分支的根目录时，GitHub会优先读取根目录下的README.md文件作为页面内容，而非React项目的静态入口文件。
• 未正确上传React打包产物：React项目需要执行打包命令生成包含入口index.html的静态资源文件夹，未将该文件夹内容上传到对应部署分支时，就会触发README的展示逻辑。
• 未配置项目路径前缀：你当前的站点是GitHub Pages的子路径站点，未在package.json中配置homepage字段时，打包后的资源路径会出错，也可能导致页面 fallback 展示README。

1. 首先在项目package.json文件的顶层添加homepage字段，指定你的部署站点地址：

"homepage": "https://vivekbhardwaj-1201.github.io/invictus/"

2. 安装gh-pages部署工具，执行命令：
   npm install gh-pages --save-dev
3. 在package.json的scripts字段中新增两条部署相关命令：

"scripts": {
  // 保留原有其他scripts命令，新增以下两行
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

4. 本地执行部署命令：
   npm run deploy
   执行完成后工具会自动将打包后的build文件夹内容推送到你仓库的gh-pages分支。
5. 进入GitHub仓库的Settings -> Pages页面，将Build and deployment下的Source设置为Deploy from a branch，Branch选项选择gh-pages，目录选择/(root)，保存配置后等待3-5分钟，清理浏览器缓存后重新访问站点即可正常展示React应用。

内容的提问来源于stack exchange，提问作者Vivek bhardwaj ZheygTvyim