如何用Github的gh-pages分支展現本身的項目

不少新同窗以爲github不就是一個代碼託管所嗎，如何能展現項目呢？其實徹底能夠藉助Github的gh-pages打造出本身的一個做品集，不管是對本身的提高整合仍是往後的面試都大有裨益。

前置準備

Github建立項目倉庫後隨即只產生一個master分支，只須要再添加gh-pages分支就能夠建立靜態頁面了。這利用了項目站點（即Project Pages）的方式。還有一種建立站點的方式叫作User/Organization Pages。下面介紹前者。

首先，建立一個名爲 Github用戶名.github.io 的倉庫。 

接着你們能夠在這倉庫裏放一些靜態頁面，在外網訪問: MuYunyun.github.io(拿我舉例),就能訪問到裏面的靜態資源了，因爲博主已經把MuYunyun.github.io 綁定了 http://muyunyun.cn 域名，因此你實際上會訪問到的是muyunyun.cn。

若是你想知道樓主如何基於github搭建本身的博客，能夠看個人另一篇文章。此次講的重點主要是gh-pages，接着繼續。

案例1

那可能有朋友會不解，既然樓主你說的 Github用戶名.github.io 已經能展現頁面了，那gh-pages是什麼做用呢？

答：你們不會只有一個項目要展現的吧，萬一你和樓主同樣把 Github用戶名.github.io 做爲博客了，那不就沒地方展現項目了嗎？因此就有了gh-pages這個東東。

理解了這點，接着舉個例子。

如上圖所示，經過git-add -A、git -commit -m "..." 命令把完成的項目上傳到github上之後，默認的是處於master分支，你能夠進該案例地址看看項目結構。接着咱們要作的是展示dist目錄下的靜態文件，那最關鍵的語句來了

git subtree push --prefix=dist origin gh-pages

 意思就是把指定的dist文件提交到gh-pages分支上，

 

那這時候，咱們看到已經多出了一個gh-pages分支，那麼展現地址就是 Github用戶名.github.io/建立的倉庫名 拿個人這個案例來說，它的展現地址就是 MuYunyun.github.io/gallery-by-react/ ,固然你看到的會是muyunyun.cn/gallery-by-react/。

案例2

那麼上面這個例子展現的項目文件中的某個文件，那麼若是我想把項目裏的全部文件都展現那該如何作呢？上個最簡單的案例

 

和上面那個案例同樣，經過git add -A 以及 git commit -m "..." 把項目上傳到github之後，目錄結構如上圖，我想讓全部的界面包括js,css都展示出來，那該怎麼作，其實只比上面那個例子多上一句git底層命令: git symbolic-ref

完整的步驟我上一遍： 

text git:(master) git symbolic-ref HEAD refs/heads/gh-pages
git add -A
git commit -m "..."
git push origin gh-pages

 

那如今就已經多出來gh-pages分支了，也就是說咱們能夠展現本身項目了(*^__^*)，那展現地址仍是和上面那個案例同樣的寫法 Github用戶名.github.io/建立的倉庫名，拿個人這個案例來說，它的展現地址就是 MuYunyun.github.io/text/ ,固然你看到的會是muyunyun.cn/text/。

寫在後面

大致就是這樣一個步驟了，但願對你們有所幫助，快去github展現本身的項目吧。mark~mark~