此文目的：
提供两种将 create-react-app 创建的项目部署到 Github Pages 的方法，因为其中有坑，此文或许能帮到一些朋友。
前提须知：
- 你已经通过
create-react-app创建了一个 react 项目， 并通过npm run start能在线下环境正确运行。 - 当然是在 github 上已经创建了一个与你本地代码同步的仓库啦～
- 我的项目名为
qier-player-demo，以下操作基于这个项目。（打个广告，我自己写了一个轻量且精致、基于 React 的播放器组件，名为qier-player，感兴趣的朋友点以下链接了解一下，给个 star 什么的最感谢啦）
方法一：官方方案
抱怨：这里不得不说，官方的方案是真的有坑，按照步骤来，发现根本无法成功， 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 识别。
