github的gh-pages分支展示專案頁面

soEasy發表於2018-11-21
Github

引言

github上的demo別人需要預覽的時候都得clone下來執行才可以，不能外網訪問，不利於demo效果的展示，其實將專案打包部署到GitHub 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

參考文章：

相關文章