如何将 React 项目部署到 github 的 gh-pages 分支上
# 部署方案一
# 1、第一步
验证我们的项目能否在 React 搭建的环境下正常运行，如果可以，则执行下面的第二步，否则修改项目代码。
# 2、第二步
需要在项目的 package.json 中的 script 字段下添加如下代码：
{
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
2
3
4
# 3、第三步
在我们自己的 GitHub 上新建仓库，然后将我们的项目 git push 到我们的新建的仓库下，之后在本地新建 gh-pages 分支 , 然后切换到 gh-pages 分支，执行 npm run build 然后将里面的所有内容删除 只留下 .git 、.gitignore 和 build 文件夹下的所有内容(不需要 build 文件夹)
# 3.2、删除之前仓库内部内容如下:
# 3.3、删除之后仓库内部内容如下:
# 4、第四步
git 三步 更新 gh-pages
git add .
git commit -m'describe'
git push origin gh-pages
2
3
# 5、第五步
打开浏览器，在地址栏输入： https://zllugithub.github.io/react-cat-dom 就可以访问上传的项目了。
注意
注意：如果 homepage 填写错误，想要更改的话，需要先到 mster 分支更新 package.json 的 homepage，然后执行 npm run build 将 build 内的 文件拷贝，再然后切换到 gh-pages 分支，将拷贝的内容粘贴到这里。最后更新 gh-pages 分支。
# 部署方案二
# 1、第一步
在方案一的第二步完成的基础上，在项目下，安装 gh-pages 包 , 命令如下：
npm i -D gh-pages
安装完 gh-pages 之后在 package.json 中的 script 字段下添加如下内容：
{
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
2
3
4
# 2、第二步
在我们自己的 GitHub 上新建仓库，然后将我们的项目 git push 到我们的新建的仓库下，之后在本地新建 gh-pages 分支 , 然后切换到 gh-pages 分支，执行 npm run build 然后将里面的所有内容删除 只留下 .git 、.gitignore 和 build 文件夹下的所有内容(不需要 build 文件夹)，删除之前仓库内部内容如下:
删除之后仓库内部内容如下:
网上新建仓库将我们的项目传到网上，然后执行:
npm run deploy
# 3、第三步
git 三步 更新 gh-pages
git add .
git commit -m'describe'
git push origin gh-pages
2
3
# 4、第四步
打开浏览器，在地址栏输入： https://zllugithub.github.io/react-cat-dom 就可以访问上传的项目了。
# 部署方案三
将 react 项目部署到 netlify 免费服务器
1、将我们的项目上传到
github仓库2、到
netlify网站上点击New sit from Git，选择GItHub，点击你要部署的仓库名3、
Branch to Deploy选择master分支，Build command填写npm run build,Publish directory填写build/4、最后点击
Deploy site，在弹出的页面等待几分钟就部署成功了。
注意
该方案 package.json 下不需要添加 homepage 字段。