1. 程式人生 > >[轉載] 如何將你的github倉庫部署到github pages(github.io部落格)

[轉載] 如何將你的github倉庫部署到github pages(github.io部落格)

 

詳細的git教程:http://www.cnblogs.com/tugenhua0707/p/4050072.html#!comments

 

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

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

現在我們有了一個空的倉庫,上面只有README.md和LICENCE檔案,並且注意現在所在的分支是"master"。之所以強調這一點是因為接下來的步驟必須明確自己的github page在哪個分支下面,這個等會兒再介紹。

第二步:點選頁面右邊一列的“Settings”,跳轉到專案設定介面:

第三步:在設定介面我們能夠看到有一塊的標題是“Github Pages”,點選這一塊上面的“Automatic page generator”按鈕:

第四步:在“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錯誤,不要著急慢慢等上十多分鐘,會得到你想要的效果的:

到這一步,我們已經完成了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