eclipseweb项目如何部署_如何部署create-react-app项目到Github pages步骤

此文目的：

提供两种将 create-react-app 创建的项目部署到 Github Pages 的方法，因为其中有坑，此文或许能帮到一些朋友。

前提须知：

• 你已经通过 create-react-app 创建了一个 react 项目， 并通过 npm run start 能在线下环境正确运行。
• 当然是在 github 上已经创建了一个与你本地代码同步的仓库啦～
• 我的项目名为 qier-player-demo ，以下操作基于这个项目。（打个广告，我自己写了一个轻量且精致、基于 React 的播放器组件，名为 qier-player ，感兴趣的朋友点以下链接了解一下，给个 star 什么的最感谢啦）

一款轻量且精致的、基于React的H5播放器​zhuanlan.zhihu.com

方法一：官方方案

抱怨：这里不得不说，官方的方案是真的有坑，按照步骤来，发现根本无法成功， npm run build 之后页面空白， npm run deploy 之后一直卡在终端，几个小时也不动。由于设备原因，我也无法排除是不是自身电脑或网络的问题，我暂且把官方的方法给大家理一下，可以一试。

1.安装 gh-pages

在我的项目之下打开终端，输入以下命令安装

npm install gh-pages --save-dev

2.修改 package.json

修改"homepage" 和 "scripts"

{
  // ...
  "homepage": "./",
  "dependencies": {
    // ...
  },
  "scripts": {
    // ...
    "deploy": "gh-pages -d build"
  },
}

这里请注意了，官方介绍是"homepage"的值要设置为 http://{username}.github.io/{repo-name} ，比如我当前的就是 http://vortesnail.github.io/qier-player-demo ，但是这样操作会在 build 打的包会在所有文件路径前加上 qier-player-demo ，比如 index.html 文件中对同等目录下的文件引用应该是 src='./index.css' ，结果会变成 src='./react_demo/index.css' ，这样部署后肯定无法访问，所有资源都找不到。

3.开始部署

Github Pages 无法识别 React 代码，只能识别 html,css,js，故你需要先打包编译你的项目：

npm run build

你会发现你的项目目录多了一个 build 文件夹，这就是要部署的文件夹，终端执行以下代码：

npm run deploy

这时 github 上项目就多出了一个gh-pages的branch，在设置中Github Pages处选择gh-pages分支保存，部署完成。过几分钟你再点击生成的链接即可访问你的页面，与线下环境下的页面相同即成功。详情如下：

方法二：利用 git subtree

上面介绍的官方方法对我或者有些小伙伴并不管用，不是空白就是卡住，那我们换个思路也可以做到。 我们不需要安装 gh-pages ，也只需要修改 package.json 中 "homepage": "./", 即可。

1.打包编译当前项目

与之前一样，我们需要先打包：

npm run build

2.提交代码到 github 远程仓库

常用三连～

git add .
git commit -m "test gh-pages"
git push origin master

3.生成 gh-pages 分支

这时候我们的远程仓库的 master 分支下有了 build 这个文件夹，里面就是打包编译之后的文件。我们接着在终端输入以下命令：

git subtree push --prefix=build origin gh-pages

上面这个命令的意思是将master分支下某个文件（如：build）复制一份到 gh-pages 这个新分支下。 这时候通过 setting 与方法一截图操作一样就可以了，最终效果都是一样的，不过你的代码每次迭代之后，都需要手动在部署一下，才能达到线上线下一致。

总结：

其实两个方法都是一样的，都是生成新的分支 gh-pages ，并在这个分支下的文件为我们打包编译之后的文件，便于 github pages 识别。