形貌

本文解说运用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