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的視頻)