引言

github上的demo別人需要預(yù)覽的時候都得clone下來運行才可以，不能外網(wǎng)訪問，不利于demo效果的展示，其實將項目打包部署到GitHub Pages上就可以完美解決這個問題了。

用到的庫

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

部署過程

創(chuàng)建項目倉庫

常規(guī)操作創(chuàng)建git倉庫即可，可參考：https://blog.csdn.net/zoucanfa/article/details/77725839

在本地的項目文件下執(zhí)行以下命令

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

修改本地的package.json文件及相關(guān)配置

由于React項目和Vue項目打包后的文件夾不一樣，所以配置也稍稍有點不同

• React：

"homepage": "https://fighting123.github.io/react_manage_system", "scripts": {+ "predeploy": "npm run build", // 對應(yīng)的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

部署過程真的感覺超級慢。。。

部署成功后，對應(yīng)遠程上就有新的gh-pages分支了，修改setting上的source為gh-pages分支，然后打開https://fighting123.github.io...。

總結(jié)

總體來看，它的原理其實很簡單，就是在當(dāng)前項目倉庫下自動創(chuàng)建一個名為gh-pages的分支，打包部署成功之后上傳到這個分支的正好就是build內(nèi)的靜態(tài)文件，其實不怕麻煩的同學(xué)也可以不用這個庫，自己一步步創(chuàng)建分支，上傳build文件也可以實現(xiàn)同樣的效果！

遇到的問題及解決方法

運行yarn deploy過程中可能會報錯

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

官方文檔上的解釋是：

當(dāng)處理gh-pages模塊生成文件.cache，如果由于某些原因如密碼錯誤等卡住則不會自動清理

解決辦法：

運行 ~node_modules/gh-pages/bin/gh-pages-clean 或者直接刪除項目下的 ~node_modules/gh-pages/.cache文件即可

運行yarn deploy過程中可能會報錯

fatal: The remote end hung up unexpectedly

官方文檔上的解釋是：

通過 HTTP 傳輸 POST 數(shù)據(jù)到遠程系統(tǒng)上的最大緩沖字節(jié)數(shù) 。當(dāng)請求大于這個緩沖大小時，HTTP/1.1 和 Transfer-Encoding: chunked 用來避免在本地創(chuàng)建過多的壓縮文件。默認是 1MiB，適用于大多數(shù)的請求

解決辦法：

git config --global http.postbuffer 1048576000

運行yarn deploy過程中可能會報錯

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

解決辦法：

修改.git下的config文件的url為https://用戶名:密碼@github.com/fighting123/react_manage_system.git即可

多個html文件的項目，如官網(wǎng)，用下面方法：

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 應(yīng)用部署到 GitHub Pages的視頻)

總結(jié)

以上是生活随笔為你收集整理的github的gh-pages分支展示项目页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。