在GitHub Pages中快速部署React项目

为了做一个自己方便使用的工具类网页，第一反应是把它部署在GitHub pages上，然后google之后马上发现了react-gh-pages这个建立在create-react-app基础上针对GitHub Pages自动化发布工具，非常方便的实现了在GitHub Pages上的推送和部署功能。

但是它的文档上的使用说明并不是针对免费账号和个人项目的，在使用和配置上与它自己的描述有一些出入，我是在issue里面找到了解决的办法，现在把使用流程在下面分享下：

1. 准备工作，创建一个以 {username}.github.io为名称的项目，GitHub会默认把这个项目当作GitHub Pages的目录，默认的地址为 {username}.github.io， 其中username是你GitHub的昵称，请自行替换。

2. 使用create-react-app创建一个React项目；

// 本地项目可以随便命名，这里以github-pages为例
create-react-app  github-pages

2. 安装一个名为gh-pages的依赖；

$ cd github-pages
$ npm install gh-pages --save-dev

3. 打开package.json，在scripts项中增加推送部署配置

"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build -b master"
}

注：文档上这一步的deploy命令与此处不同，它的命令会新建一个gh-pages分支并将编译生成的代码推送到该分支上，但在GitHub项目的setting -> options -> Github Pages设置项下可以看到，个人用户的页面只能部署在master分支上，见下图：

4. 本地git配置；

$ git init
$ git git remote add origin https://github.com/{username}/{username}.github.io.git

5. 执行构建推送命令：

$ npm deploy

当看到命令行结尾出现如下输出时，代表构建完毕的项目已经推送到GitHub项目的master分支：

现在在浏览器输入{username}.github.io地址应该就能看到部署好的网页，如下图所示：

6. 将本地代码推送到当前项目的其他分支

// 我使用的是dev分支
git checkout -b dev
git add *
git commit "......"
git push origin dev

7. 后续代码更新之后，再次执行npm deploy即可部署完毕，然后将更新的代码同步到创建的分支即可，非常的方便。

参考项目地址：https://github.com/gitname/react-gh-pages