如何將你的github倉庫部署到github pages

  不少時候我都在思考一個問題,咱們天天遇到各類各樣的問題,而後咱們須要不斷google、百度,達到咱們解決問題的目的。可是在這個過程當中,咱們老是可以見到,對於同一個問題,老是有大量錯誤、copy的博客、文庫乃至吊炸天的百度知道,一次又一次減慢了咱們解決問題的進度。更加糟糕的是,這種copy是保量不保質的,因此咱們老是但願,每當咱們google或者百度的時候,都可以最快解決咱們須要解決的問題。然而,這貌似是不切實際的,在人人都有權利發表文章的今天,要想禁止這種無心義的抄襲幾乎是癡人說夢。清晰意識到這一點以後,我以爲更加有效的方式是每個發表博客或者活躍於問答網站的人都應該把本身的博客或者解答作到精煉和準確,在某種意義上來講,這是一種義務和責任。html

  固然,前面扯遠了點,今天咱們討論一下傳說中的github pages。正如前面所說的,每一篇博客都應該對症下藥,因此本文章默認你有github帳號、安裝了Git而且熟悉基本的Git操做,只是須要尋求部署github pages方面的知識。git

  做爲教程,很重要的一點就是要最大化的傻瓜化,本文將重新建一個github倉庫開始到成功部署github pages一步步解析。github

  第一步:新建一個github倉庫"hello-ghpages":網站

如今咱們有了一個空的倉庫,上面只有README.md和LICENCE文件,而且注意如今所在的分支是"master"。之因此強調這一點是由於接下來的步驟必須明確本身的github page在哪一個分支下面,這個等會兒再介紹。google

  第二步:點擊頁面右邊一列的「Settings」,跳轉到項目設置界面:spa

  第三步:在設置界面咱們可以看到有一塊的標題是「Github Pages」,點擊這一塊上面的「Automatic page generator」按鈕:3d

  第四步:在「New Project Site」頁面,須要注意的是頁面最下面的「tracking ID」。「tracking ID」的做用是使用Google的Analystics功能,該功能可以分析你的網站的訪問量等網站數據,能夠不填。若是須要使用該功能,能夠參考連接https://support.google.com/analytics/answer/1032385?hl=en。而後點擊「Continue to layout」按鈕。版本控制

  第五步,設置主題,就可以發佈了:指針

  這樣,咱們就可以經過連接:http://username.github.io/hello-ghpages/訪問咱們剛剛發佈的頁面了,其中username是你的github帳戶的名字。根據博主的經驗,第一次部署的話,等待的時間是比較長的,大概是十分鐘到十五分鐘左右。因此若是你立馬訪問剛剛發佈的頁面可能會出現404錯誤,不要着急慢慢等上十多分鐘,會獲得你想要的效果的:code

   到這一步,咱們已經完成了github pages的部署,可是在這個時候咱們面臨了兩個問題,第一:最初生成的倉庫只有兩個文件,不存在定義咱們如今看到的github pages樣式、內容的文件;第二,既然咱們沒有定義這些文件,而咱們看到的這些文件有必須是真實存在的,這些文件放在了哪裏?答案就涉及到咱們一開始提到的分支了。咱們在使用「Automatic page generator」功能的時候,github會自動在你項目的「master」分支下面新建一個「gh-pages」分支,而這個分支裏面的代碼定義了咱們剛剛看到的部署成功的github pages頁面的內容和樣式。

  我想在這裏是有必要簡單介紹一下分支這個概念的。分支分紅兩種,一種是上面截圖中看到的,這種叫作遠程分支,另一種是咱們在使用Git進行版本控制的時候使用到的,叫作本地分支。在使用Git進行版本控制的時候,對於每一次提交,都會生成一個commit對象,這個commit對象包含了如下內容: 

  • 提交信息元數據:包含了提交者、做者、提交時間等信息
  • 一個包含指向 tree 對象(根目錄)的索引:在提交以前,Git 會先計算每個子目錄的校驗和,而後在 Git 倉庫中將這些目錄保存爲樹(tree)對象。commit對象中的這個索引指向了這個對象。參考一下《pro git》裏面的這張圖就能很好的理解了:

  對於提交有了必定認識以後,分支就更好理解了,Git 中的分支,其實本質上僅僅是個指向 commit 對象的可變指針。結合實際,咱們來分析一下:在新建一個github倉庫的時候,從上面的圖咱們能夠看到,github會自動建立一個提交叫作「Initial commit」,同時新建了一個master分支,這個master分支是指向「Initial commit」提交對應的commit對象;在部署github pages的時候,github新建了一個分支,而且產生了一次提交「Create gh-pages branch via Github」。你能夠把上面的過程理解成下面幾條命令:

1  git branch gh-pages    //在master分支下面新建一個gh-pages分支
2  git checkout gh-pages    //切換到新建的gh-pages分支
3  git rm -rf .        //因爲master分支和gh-pages分支裏面的內容徹底不一樣,因此首先清空了全部文件
4  //在清空的文件夾裏面自定義新的文件,也就是上面截圖中看到的gh-pages分支中的文件
5  git add .    //跟蹤本身定義的文件
6  git commit -m "Create gh-pages branch via Github"    //提交本次修改   

  到目前爲止,你就以爲一個問題應該是如何將如今看到了github pages定義成我本身想看到的效果,這裏就須要用到Git了。

  第六步:Clone遠程倉庫到本地:

  第七步:clone下來默認爲master分支,因此咱們在文件夾裏面看到的是master分支對應的內容。而咱們須要編輯的是gh-pages分支,由於這個分支纔可以定義github pages的內容和樣式。咱們須要執行下面的命令:

  上面的命令的意思是說,在本地新建一個分支,本地分支的名字叫作「gh-pages」,這個新建出來的分支是在遠程分支「origin/gh-pages」分支下面分化出來的,切換到新建出來的"gh-pages"分支,這個時候,咱們看到在文件夾"hello-ghpages"下面的文件時遠程分支"gh-pages"的內容了:

  第八步:刪除裏面的全部文件,固然最好不要直接刪除,而是經過git命令,那樣會更加方便快捷。

  第九步:目前爲止,這個文件夾是空的了,咱們在裏面新建一個index.html文件,在裏面定義一些內容,而且提交到當前分支。

  第十步:提交到遠程分支,查看效果:

  第十一步:查看效果吧,哈哈:

  到這裏就大功告成了,嘿嘿。讓咱們來回顧一下,在整個教程中,咱們須要掌握的主要是如何將遠程分支分化到本地,而且自定義遠程分支的內容。上面的index.html是github pages的主頁,你能夠在這個基礎上慢慢擴充你須要顯示的內容,一切都和教程中展現的同樣。若是你有什麼問題或意見,歡迎在下面的評論中提出。

  最後,我仍是想講一點題外話,若是以爲本篇博客寫的不錯而且但願轉載到本身的博客,請註明轉載地址:http://www.cnblogs.com/yuanzm/p/3945814.html,這是對博客做者最基本的尊重,謝謝。

相關文章
相關標籤/搜索