create-react-app项目部署到Github Pages

描述

本文讲解使用create-react-app建立的项目，如何部署GitHub Pages，以及这部署到过程当中遇到到坑。

建立项目

使用官网方式建立项目。

npx create-react-app my-app
cd my-app
npm install

弹出配置

npm run eject

Github Pages部署讲解

把项目部署成github pages，在github上点开项目到设置，翻到Github Pages设置处，能够看到Github Pages只能使用master、gh-pages分支或者master下面的docs文件夹。
咱们这里使用的是gh-pages分支的方式来建立。

安装gh-pages

npm install gh-pages --save-dev

经过gh-pages中间件能够把build文件下到文件推送到github，而且建立gh-pages branch。

修改package.json

增长homepage

"name": "react_demo",
  "version": "1.1.0",
  "private": true,
  "homepage": "./",  //加上这一句

注意： homepage不要设置成 github page上生成的那个连接路径，好比 https://username.github.io/react_demo/。
若是设置成上面的链接， build打的包会这全部路径前面加上 react_demo。
好比 index.html文件中对同等目录下的文件引用应该是 src='./index.css',结果会变成 src='./react_demo/index.css',这样部署后确定没法访问，全部资源都找不到。

增长npm scripts命令，推送gh-pages

"scripts": {
        ...
     + "deploy": "gh-pages -d build" //加上这一句
}

推送项目

GitHub Pages只是部署项目，react代码直接放上去是识别不了的，因此部署的是打包编译后到代码。

npm run build

编译后就能够推送了,执行上面配置的命令。

npm run deploy

这时github上项目就多出了一个gh-pages的branch，在设置中Github Pages处选择gh-pages分支保存，部署完成。
点击生成的链接，查看是否部署成功。

2019-05-25