部署方案一

1、第一步

验证我们的项目能否在 React 搭建的环境下正常运行，如果可以，则执行下面的第二步，否则修改项目代码。

2、第二步

需要在项目的 package.json 中的 script 字段下添加如下代码：

{
    "predeploy": "npm run build", 
    "deploy": "gh-pages -d build"
}

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

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、第二步

在我们自己的 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

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 字段。