如何在github上建立我的項目的在線演示demo

前言

Github做爲目前優秀的同性交友平臺，其上維護了衆多優秀的開源項目。目前Github上關於前端的項目也是數不勝數，Vue、React、Angular等等。本身也是經過官方文檔+github的方式來學習一些新的技術和框架。在github上搜索相關項目時會發現，有的項目不光寫了一手好文檔而且還給出了項目的在線運行Demo。事實勝於雄辯，一個在線演示可能給項目帶來更好的印象分。如何在github上維護本身我的項目源代碼的同時並生成項目主頁呢？

Github項目主頁

Github給用戶提供了運行靜態頁面的地址，如何展現我的項目的靜態頁面？如下是建立項目主頁的關鍵：

• gh-pages分支
• 訪問地址：[github用戶名].github.io/[項目倉庫名]，如：monster1935.github.io/vue-example

生成項目主頁首先是將欲展現的靜態頁面推送的Github我的項目倉庫的gh-pages分支下，而後經過上述的訪問形式訪問。

如何在維護源代碼的同時並同時生成項目主頁

如下以Vue的單頁應用爲例，給出完整的項目維護以及生成項目主頁的步驟。

1、Github上建立遠程倉庫

在github上爲我的項目建立遠程倉庫，以下所示:

2、clone遠程倉庫到本地

建立好遠程倉庫後，使用git工具將遠程倉庫clone到本地，以下所示:

3、使用vue-cli生成vue單頁應用項目

進入項目根目錄，使用vue-cli生成vue的項目的初始結構。步驟以下：

# 以webpack模板生成項目原型
vue init webpack vue-example

在使用vue-cli腳手架工具生成vue項目過程當中會提示是否安裝一些輔助工具庫，可根據本身項目要求酌情安裝，或者生成項目後安裝。

項目生成完畢後，進入package.json所在目錄執行npm install命令，安裝項目運行須要的依賴。

依賴安裝完成後，便可執行npm run dev命令啓動本地的webpack-dev-server進行開發調試。
以下圖所示，出現以下畫面表明vue項目初始化完畢。後期可在該基礎上進行本身項目的開發。

4、將項目推送到遠程倉庫

項目開發過程當中，能夠將項目源碼推送至github遠程倉庫中管理。

git add --all

git commit -m 'Initial the vue project'

git push

5、執行項目構建命令，並將構建後的靜態頁面推送至gh-pages分支

項目開發完畢能夠執行 npm run build 打包文件，進行文件的打包發佈流程。

1. 切換到gh-pages分支 git checkout -b gh-pages
2. 執行 npm run build 命令，構建代碼
3. 將dist目錄下的全部文件夾推送至遠程倉庫的gh-pages分支，執行如下命令：

# 強制添加dist文件夾，由於.gitignore文件中定義了忽略該文件
git add -f dist

# 提交到本地暫存區
git commit -m 'Initial the page of project'

# 部署dist目錄下的代碼
git subtree push --prefix dist origin gh-pages

注：使用git subtree命令能夠在同一分支上維護源代碼以及構建代碼，在部署時僅僅推送dist目錄下的內容。

小結

以上所述的在github上gh-pages分支上生成項目主頁主要是利用了github提供的靜態頁解析功能，所以本文中所屬的範圍僅使用於靜態頁面的部署。在將Vue應用部署到gh-pages分支後，可能會出現部分資源沒法加載的問題，緣由就在於vue中的webpack配置在打包時其publicPath爲根路徑，若是該靜態頁在服務器中被訪問則不會出現以上問題。在github解析時若是按照根路徑解析會出錯，所以在github上部署靜態頁時能夠考慮將publicPath設置爲當前目錄，即 publicPath: './' 。

使用Vue-cli webpack模板生成的vue項目，出現上述問題應設置config/index.js中build對象下的assetsPublicPath字段爲assetsPublicPath: './',原理都是設置publicPath字段。

---

更新

目前發現了一種更爲簡便的部署到github gh-pages的方式，gh-pages 提供了更爲簡便的管理本地項目到github的提交流程。詳情見vue-ghpages-test。