github的gh-pages分支展现项目页面

引言

github上的demo别人须要预览的时候都得clone下来运行才能够，不能外网访问，不利于demo效果的展现，其实将项目打包部署到GitHub Pages上就能够完美解决这个问题了。

用到的库

• gh-pages
• 安装：yarn add gh-pages

部署过程

建立项目仓库

常规操做建立git仓库便可，可参考：https://blog.csdn.net/zoucanfa/article/details/77725839

在本地的项目文件下执行如下命令

$ git init
$ git add .
$ git commit -m 'message'
$ git remote add origin <url>
$ git push -u origin master

修改本地的package.json文件及相关配置

因为React项目和Vue项目打包后的文件夹不同，因此配置也稍稍有点不一样

• React：

"homepage": "https://fighting123.github.io/react_manage_system",
"scripts": {
    + "predeploy": "npm run build",   // 对应的deploy以前的钩子
    + "deploy": "gh-pages -d build"  // deploy名字能够随意
 },

• Vue:

"scripts": {
    + "predeploy": "npm run dist",  // 或者yarn run dist
    + "deploy": "gh-pages -d dist"
 },

并修改config/index.js:

build: {
   assetsPublicPath: ''
}

部署

yarn deploy   // 或npm run deploy

部署过程真的感受超级慢。。。

部署成功后，对应远程上就有新的gh-pages分支了，修改setting上的source为gh-pages分支，而后打开https://fighting123.github.io...。

总结

整体来看，它的原理其实很简单，就是在当前项目仓库下自动建立一个名为gh-pages的分支，打包部署成功以后上传到这个分支的正好就是build内的静态文件，其实不怕麻烦的同窗也能够不用这个库，本身一步步建立分支，上传build文件也能够实现一样的效果！

遇到的问题及解决方法

1. 运行yarn deploy过程当中可能会报错

   fatal: A branch named 'gh-pages' already exists.

   官方文档上的解释是：

   当处理gh-pages模块生成文件.cache，若是因为某些缘由如密码错误等卡住则不会自动清理

   解决办法：

   运行 ~node_modules/gh-pages/bin/gh-pages-clean 或者直接删除项目下的 ~node_modules/gh-pages/.cache文件便可

2. 运行yarn deploy过程当中可能会报错

   fatal: The remote end hung up unexpectedly

   官方文档上的解释是：

   经过 HTTP 传输 POST 数据到远程系统上的最大缓冲字节数 。当请求大于这个缓冲大小时，HTTP/1.1 和 Transfer-Encoding: chunked 用来避免在本地建立过多的压缩文件。默认是 1MiB，适用于大多数的请求

   解决办法：

   git config --global http.postbuffer 1048576000

3. 运行yarn deploy过程当中可能会报错

   could not read Username for 'https://github.com': No error

   解决办法：

   修改.git下的config文件的url为https://用户名:密码@github.com/fighting123/react_manage_system.git便可

4. 多个html文件的项目，如官网，用下面方法：

   git symbolic-ref HEAD refs/heads/gh-pages
   git add -A
   git commit -m "描述"
   git push origin gh-pages

参考文章：

• https://www.jianshu.com/p/9dc...
• https://www.cnblogs.com/MuYun...
• https://www.douban.com/note/6...
• https://www.rails365.net/movi... (把 react 应用部署到 GitHub Pages的视频)