React.js项目部署GitHub Pages：根域名访问配置咨询

要把你的React作品集部署到https://Shubhayu-Das.github.io/（用户级GitHub Pages根域名），需要调整配置和部署策略——因为用户/组织专属仓库（格式为username.github.io）的规则和普通项目仓库略有不同，之前你遇到的README.md显示问题，是因为GitHub Pages优先加载仓库根目录的index.html，如果没有正确部署React构建产物，才会 fallback 到 README。

下面是具体的操作步骤：

1. 明确部署目标仓库 #

你需要将React项目的构建产物推到Shubhayu-Das.github.io这个仓库，而不是portfolio仓库。用户级仓库的根地址就是你的个人域名，所以所有构建文件要直接提交到这个仓库的主分支（通常是main或master），而非普通项目常用的gh-pages分支。

2. 调整React项目的package.json #

在你的portfolio项目中修改以下配置：

• 设置homepage为根路径（两种写法都可以）：

  "homepage": "https://Shubhayu-Das.github.io/"
  

  或者用相对路径（本地开发和部署都兼容）：

  "homepage": "./"
  

• 修改部署脚本，指定推送到用户仓库的主分支：
  在scripts中添加/修改deploy命令：

  "scripts": {
    "build": "react-scripts build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -b main -d build -r git@github.com:Shubhayu-Das/Shubhayu-Das.github.io.git"
  }
  

  解释一下参数：
  • -b main：指定要推送的目标分支是用户仓库的main分支
  • -d build：指定要部署的目录是React项目的构建产物目录build
  • -r：指定远程仓库地址（如果你的React项目仓库和用户仓库是分开的，需要关联这个远程地址）

3. 确保依赖安装 #

如果还没安装gh-pages工具，先执行：

npm install gh-pages --save-dev

4. 执行部署 #

在React项目目录下运行：

npm run deploy

这个命令会先执行predeploy脚本构建项目，然后把build文件夹里的所有内容推送到Shubhayu-Das.github.io仓库的main分支。

5. 检查GitHub Pages设置 #

登录GitHub，进入Shubhayu-Das.github.io仓库：

• 点击顶部的Settings选项卡
• 左侧导航选择Pages
• 确认Source部分选择的是main分支，目录为/ (root)
• 如果之前设置了其他分支或目录，修改后保存

常见问题排查 #

• 页面仍显示README.md：确保Shubhayu-Das.github.io仓库的main分支根目录下存在index.html（来自React的构建产物），GitHub Pages会优先加载index.html而非README.md。如果需要保留README，可以将它放在React项目的public文件夹中，构建后会自动复制到根目录。
• 部署后页面空白：打开浏览器控制台检查静态资源加载路径，用"./"作为homepage可以避免路径错误；另外确保构建过程没有报错。
• 权限问题：如果推送失败，检查本地Git是否配置了正确的GitHub SSH密钥，或者改用HTTPS地址作为远程仓库地址（https://github.com/Shubhayu-Das/Shubhayu-Das.github.io.git）。

这样操作后，你的React作品集就能通过https://Shubhayu-Das.github.io/直接访问了！

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