reactapp项目在gitee上部署静态页面 保姆级教程

1.现在你已经有了经过create-react-app创建的项目（A，脚手架空架子）、或者已经成熟的经过了丰富的项目（B，它里面有路由、页面逻辑等）

（1）安装gh-pages

npm install gh-pages --force

（2）修改package.json文件

homepage保证能访问到资源，不至于404，注意在原来的“scripts”中添加下面的代码

{ 
    ......
    "homepage": "./",
    "private": true,
    "dependencies": {
    ......
    }
    "scripts": {
        ......
        "predeploy": "npm run build",
        "deploy":"gh-pages -d build"
    },
}

从这一块纸，就是成熟的项目带路由的项目了——B，当然B状态的项目依然要设置前两部

（3）改browserRouter为HashRouter，我自己测试包括网上寻找别人的方法，BrowserRouter会出现    资源加载成功但是页面空白   的现象，browserRouter这条路铁纸们可以自己试试

（4）这个时候部署静态的前调就打好了，自己创建一个gitee的仓库，可自行百度，这个不难，我的接下来的过程，包括origin 仓库地址  都用的是ssh，ssh可以自行百度配置，并ssh验证之后请根据下面的提示命令在项目根路径执行。

// 执行打包
npm run build

// 本地启动查看是否正常
npm start

// 本地正常，开始推送
git init //初始化

git add . //加载本地所有文件

git commit -m “版本号自己定”

git remote add origin 仓库地址  //这个地址在第一次创建仓库的时候就有

//如果这一步显示origin已经存在 要么重新换一个origin名字，如origin123等，
//或者执行git remote rm origin后重新执行上面的add

git push -u origin master //推送

npm run deploy //执行完这一句，在你的仓库就能看到新的分支gh-pages

 找到服务选择Gitee Pages，

 到这一步静态页面就部署完成了，但是我这边有一个小问题就是，第一次点击后空白，需要刷新一下静态页面才能显示出来，之后就没空白了，或许这是正常的。最后效果如下：

 总结：

（1）目前这只是静态，动态的是需要发送ajax请求，要考虑nodeJS，也是我接下来要解决的问题。

（2）如果项目小，或者前面的推送记录即使丢失也不影响，那么如果遇到推送过程中实在推不上去，就不要轴喽，直接删掉.git，重新推送。

（3）如果修改了本地文件，一定重新打包重新推送，这样gitee仓库的代码才能和本地展现同样的效果。

如果有问题，欢迎留言。。。。。。