如何直接从master分支在GitHub用户页面部署React应用？

GitHub用户页面和项目页面的核心区别在于：用户页面要求仓库名必须为{你的GitHub用户名}.github.io，且默认从仓库的默认分支（master/main）根目录部署，不需要依赖gh-pages分支。以下是直接从React项目构建产物部署到master/main分支的步骤：

1. 创建正确的用户页面仓库 #

在GitHub上创建一个新仓库，仓库名必须严格为{你的用户名}.github.io（比如你的用户名是cheese-berry，仓库名就是cheese-berry.github.io）。创建后将仓库克隆到本地。

2. 配置React项目的package.json #

打开你的React项目根目录下的package.json，添加或修改homepage字段（确保路径是用户页面的顶级域名）：

"homepage": "https://{你的用户名}.github.io"

3. 构建React应用 #

在React项目根目录执行构建命令，生成静态产物：

npm run build
# 如果你用yarn，执行 yarn build

构建完成后，所有静态文件会生成在build文件夹中。

4. 部署到用户页面仓库 #

将build文件夹内的所有文件复制到你克隆的{你的用户名}.github.io仓库根目录（注意保留仓库的.git文件夹，不要覆盖），然后执行以下Git命令提交并推送：

git add .
git commit -m "Deploy React app to user page"
git push origin master # 如果你的仓库默认分支是main，替换为 git push origin main

替代方案：用脚本一键部署 #

如果你不想手动复制文件，可以在React项目的package.json中添加一个部署脚本，直接将构建产物推送到用户页面仓库：

"scripts": {
  "deploy": "npm run build && cd build && git init && git add . && git commit -m 'Deploy React app' && git push git@github.com:{你的用户名}/{你的用户名}.github.io.git master --force"
}

执行npm run deploy即可完成一键部署（注意替换命令中的用户名和分支名，如果默认分支是main就把master改成main）。

内容的提问来源于stack exchange，提问作者cheese-berry