使用GitHub Pages搭建博客

使用GitHub Pages搭建博客

14 Jan 2015

新的一年開始，必定要作點美好的事情。GitHub 是一個開源項目的託管網站，相信不少人都聽過。在上面有不少高質量的項目代碼，咱們也能夠把本身的項目代碼託管到GitHub，與朋友們共享交流。

GitHub Pages 是Github爲你們提供的一項服務，不只能爲託管的項目創建主頁，還能夠爲咱們創建我的博客。下面我就介紹我的博客是如何創建的，這裏咱們先假設你們已經瞭解Git一些基本使用，未來我也會發布另一篇《Git基本安裝和使用教程》。

在使用GitHub Pages創建我的博客前，咱們象徵性地瞭解一下GitHub Pages創建的頁面有哪些優勢：

• 極簡的配置，輕量級系統，無需數據庫

• 使用標記語言，如Markdown

• 使用GitHub託管服務，免費300MB空間

• 能夠綁定本身的域名

• 新版的GitHub Pages還支持CDN服務，提高訪問速度

要說缺點的話，其實也有一些：

• 使用Jekyll 模板系統，屬於靜態頁面。

• 基於Git操做，須要有必定的動手能力。

• 動態性很差，沒有評論系統，不過能夠本身配置Disqus 擴展。

整體來講，GitHub Pages搭建的博客使用起來是很是方便的。配置好了以後，只須要使用例如Markdown編寫本身的博文，扔到指定的文件夾裏便可發佈了。徹底不須要管理網站相關的事務，例如數據庫、安全性等問題。

開始正題，下面的操做步驟參考自Github Pages的主頁，再結合個人實際操做介紹各個步驟，並說一下可能遇到的問題和解決辦法。

首先說明下面是以Window 7環境爲例的，至於OS X，我操做的時候感受還更方便一些。。另外我採用的是Git Bash終端來操做，這在任何環境下都是同樣的。

#搭建步驟

1. 建立一個新倉庫 （Create a repository）

如圖所示，登陸本身的GitHub主頁，從右上角新建一個倉庫，倉庫名（Repository name）設置爲你本身的用戶名爲前綴，例如個人是unclechen.github.io。

在GitHub上，每一個用戶只容許擁有惟一的一個以本身的username爲前綴，名爲username.github.io的倉庫。這個倉庫也就是Github Pages說的我的/組織主頁（User or organization site），另外一種則是項目倉庫（Project site）。所以當我再次想要創建一個一樣名字的倉庫時，上圖中顯示個人帳號下已存在同名的倉庫了。假如你沒有創建過的話，是沒有問題的。

2. 把倉庫拉到本地 （Clone the repository）

使用任何一種方式將剛纔創建的倉庫拉取到本地。如上圖所示，我喜歡使用Git Bash終端，在Git Bash中輸入

git clone git@github.com:unclechen/unclechen.github.io.git

便可將剛纔創建的倉庫拉取到本地。

3. 創建index.html文件 （Hello World）

如上圖所示，繼續在Git Bash中輸入

cd unclechen.github.io/

命令，進入剛纔拉取的倉庫（記住你應該將上面的unclechen改爲本身的username）。而後在Git Bash中繼續輸入

echo "Hello World" > index.html

命令，在本地先建立index.html文件。

4. 提交到GitHub服務器 （Commit the file）

建立index.html文件後，和使用其餘Git倉庫的基本操做同樣，須要提交修改到服務器才能生效。

因此咱們須要依次輸入三條Git命令，第一條是

git add .

第二條是

git commit -a -m "my fisrt blog"

第三條是

git push

這樣就把剛纔創建的index.html文件提交到了GitHub服務器上，以下圖所示：

5. 搭建成功 （…and you’re done!）

好了！Push到GitHub以後，你就打開瀏覽器在地址欄輸入http://username.github.io/來訪問你的我的主頁了，別忘了將username改爲你本身的用戶名。記住，頁面初次打開可能會顯示404錯誤。這沒有關係，由於須要等待一些時間以後纔會生效，個人博客是過了大概10分鐘左右生效的吧。

如上圖所示，頁面顯然有點樸素。沒有關係，咱們先將博客建立出來，再使用基於Jekyll 模板的一些主題，就能夠渲染界面。個人博客用的主題是Hyde。

至此，咱們已經成功使用Github Pages搭建了我的博客（經過User or organization site方式）。至於如何使用Jekyll模板編寫，並使用主題來渲染博客，以及綁定本身的域名等等，在個人另外一篇博客中《使用Jekyll渲染GitHub Pages我的博客》將會介紹。

下面介紹的是另一種使用GitHub Pages中的Project site創建博客的方法，有興趣或者須要創建多個博客站點的朋友能夠看一看。

---

另外一種搭建方法（可搭建多個博客站點）

上面介紹了使用Github Pages中提到的我的/組織主頁（User or organization site）來搭建我的博客，前面說過這種名爲username.github.io的倉庫，每一個GitHub帳戶下只能擁有一個，若是你須要創建多個博客站點的話多少有些不方便。

不過沒有關係，除了經過創建名爲username.github.io的倉庫搭建我的博客之外，還能夠經過創建普通名字project name的倉庫來建立我的博客。這就是GitHub Pages上提到的項目倉庫（Project site）。

然而，使用項目倉庫（Project site）建立博客又分爲兩種場景，一種是經過新建一個倉庫（Generate a site）來建立，另外一種則是直接從已有的項目倉庫（Start from scratch）來建立。但這兩種形式本質上都是經過在一個普通的倉庫下開闢一個沒有父分支的gh-pages分支，將網頁的代碼在gh-pages分下進行管理，維護頁面的。acth）。可是這兩種形式本質上都是經過在一個普通的倉庫下開闢一個沒有父分支的gh-pages分支，將網頁的代碼在gh-pages分下進行管理，維護頁面的。

• 第一種場景：使用Generate a site搭建博客。

1. 建立新倉庫（Create a repository）

這裏咱們就再也不使用username.github.io的名字來創建倉庫了，隨便使用一個其餘的名字，例如blog。

2. 設置倉庫的參數 （Repository Settings）

進入剛纔創建的新倉庫，在GitHub網頁的右邊面板中點擊Settings。以下圖所示：

3. 自動生成頁面 （Automatic Generator）

在Settings界面下，選擇下圖所示的Automatic page generator按鈕，在彈出的頁面填寫一些參數。再選擇一個主題，能夠自動生成一個頁面。

4. 搭建完成 （…and you’re done!）

在瀏覽器中輸入http://username.github.io/repository，便可訪問頁面。記住，你須要將前面的repository修改爲你的項目名字（project name，例如個人是blog）。一樣這須要等待一些時間以後才能生效。

至此，咱們就成功使用Generate a site的形式，新創建一個倉庫，搭建了本身的博客。以下所示，使用GitHub自動生成的頁面比剛纔的」Hello World」頁面確實漂亮了很多。

• 第二種場景：使用Start from scratch搭建博客。

1. 建立gh-pages分支 （Create a gh-pages branch）

進入已有倉庫的主頁，在分支下拉菜單中輸入gh-pages後，按下回車鍵enter，自定創建一個沒有父分支的gh-pages分支，以下圖所示。

可選操做：建立gh-pages分支後，也能夠將這個分支設爲默認分支（default branch），未來方便咱們本身管理。

2. 創建index.html文件 （Create an index file）

和上面介紹過的方法同樣，在gh-pages分支下面創建一個index.html文件，輸入Hello World。

3. 提交修改 （Commit the file）

創建了index.html文件以後，將修改commit到服務器上。

這裏的第二、3步均可以在GitHub網站的界面直接進行操做，或者和User or organization site方法的第三、4步同樣，也可使用Git Bash終端操做。

4. 搭建成功 （…and you’re done!）

等待片刻，博客頁面生效。

至此，咱們就成功使用Start from scratch的方式，經過在已有的倉庫下創建沒有父分支的gh-pages分支，搭建了本身的博客。

---

兩種搭建方法的對比

• User or organization site: 使用master分支管理博客站點，命名爲username.github.io的形式，每一個GItHub帳戶下只能擁有一個。

• Project site: 採用一個沒有父分支的gh-pages來管理博客站點，命名方式普通，每一個GitHub帳戶下能夠有多個。