之前閑暇之余嘗試着在github上搭建自己的博客，搭建過程中發現沒有自己想象的那么容易，幾經波折，好不容易才搭建好了雛形。現在就將在github上構建自己博客的整個流程好好總結一下。
注：本文並非完全原創，在搭建自己博客的時候，我也上網查閱了很多資料，只是網上我所查到的資料或多或少都有這樣那樣的欠缺。所以，我將這些資料整合在一起，並分享我在構建過程中遇到的問題和解決方法。
另外，在github構建自己博客並非只有一種方法，我整合出來的只是其中的一種。
1.建立一個項目
先在GitHub創建一個項目，名字隨意，盡量全部小寫字母，避免隨后會碰到的URL沖突問題。
1.1 在自己github右上角上，點擊+號按鈕，在出現的菜單中選擇 New repository
1.2 進入到創建倉庫頁面，給倉庫命名並給於描述之后，點擊create repository按鈕創建倉庫
項目創建完畢。
2.安裝Git
git是一個免費的、分布式的版本控制工具，或是一個強調了速度快的源代碼管理工具。
git的安裝地址(http://msysgit.github.io/)
關於git的具體安裝步驟可參考http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html
關於git的常用命令可參考http://www.bootcss.com/p/git-guide/
3.clone項目
本地運行Git，隨意選個目錄，將剛才創建的項目clone下來。
例：
cd /e/blog git clone https://github.com/stxwd46/EX.github-io.git cd EX.github-io
4.建立配置文件_config.yml
注意：之后建立的所有文檔務必使用UTF-8 無 BOM(隱藏字符) 的編碼保存
在項目的根目錄下打開git命令行界面，輸入命令 >> _config.yml 新建文件 _config.yml ，填寫 baseurl: /blogdemo ， blogdemo是你的項目名稱，這一行內容規定了整個網站的根路徑。
例：
baseurl: /EX.github-io
目錄結構變為
/EX.github-io
|-- _config.yml
5.建立主頁
在根目錄下新建文件 index.html ， 內容如下：
---
title: Hello, My Blog
---
{{ page.title }}
每篇文章的頭部，必須有一個yaml文件頭，用來設置一些元數據。它用三根短划線"---"，標記開始和結束，里面每一行設置一種元數據。"title: Hello, My Blog"，表示該文章的標題是"Hello, My Blog"，如果不設置這個值，默認使用嵌入文件名的標題，即"hello world"。
在yaml文件頭后面，就是文章的正式內容，{{}}這些是Liquid模板語言,在{{}}里面我們可以使用模板變量。{{ page.title }} 表示“本頁面的標題”，因為我們前面設置了title為Hello， My Blog。所以到時候進入到博客首頁，title 就會顯示相應的文案。
目錄結構變成：
/EX.github-io
|-- _config.yml
|-- index.html
6.在_posts內撰寫文章，並在首頁加入文章列表
現在首頁有了，那我們怎么發博文上去呢？
回到項目根目錄， 打開git bash，運行 mkdir _posts 新建一個目錄，看名字也知道啦，這里存放你所有的文章。
進入_posts目錄，新建一篇文章。注意默認的文件名格式是 year-month-day-postTitle 這樣。比如 2015-05-05-my_first_article.md，盡量避免空格或者其他亂七八糟的字符，這個文件名將作為URL的生成依據。文件名的格式可以通過修改 _config.yml中的 permalink 屬性而改變，默認值為 date ，也就是我們剛剛創建的文件的樣子，具體的規則可以看這里。
如果你發現了我剛才創建的文件后綴名是 .md ，熟悉GitHub或者StackOverFlow的朋友應該知道Markdown 格式。對於不熟悉前端的人來說，用markdown可以避開HTML，轉而使用更加直觀的Markdown語法。如果不熟悉Markdown語法也沒關系，可以參見這份Markdown 語法說明，應該說是相當易學，並且在熟悉之后非常易用的。而作為一個前端開發者來講，我還是更傾向於用html。
回到主題，打開剛才創建的文件，輸入如下內容：
---
title: 我的第一篇文章
---
# {{ page.title }}
## 目錄
+ [第一部分](#partI)
+ [第二部分](#partII)
+ [第三部分](#partIII)
----------------------------------
## 第一部分
這里是第一部分的內容 ---------------------------------- ## 第二部分
這里是第二部分的內容 ---------------------------------- ## 第三部分
這里是第三部分的內容
{{ page.date|date_to_string }}
這段內容中使用了最常用的幾種Markdown語法，比如使用 # ，## 表示 HTML 中的 <h1></h1> , <h2></h2>。使用[text](link)創建超鏈接，使用 連續多個 - 創建水平線（注意：不包括最上端包圍title所使用的橫線，那里表示一個頁面的“頭屬性”），等等。更多詳細的語法可以在之前提到的頁面查詢，這里不再贅述，總之，這是一種更加貼近真實寫作的語法，推薦大家嘗試。
頁面最后面的那個 {{ page.date|date_to_string }} 是指顯示本頁的日期屬性，並且轉換為可讀的字符串形式。同樣也是Liquid語法。
OK，第一篇文章就寫好了，然后到主頁給文章加上入口鏈接。
打開我們的 index.html 文件，添加內容，變成下面這樣：
--- title: My Blog --- {{ page.title }} {% for post in site.posts %} {{ post.date|date_to_string }} <a href='{{ site.baseurl }}{{ post.url }}'>{{ post.title }}</a> {% endfor %}
簡單解釋一下，Liquid標記最主要分為兩種，一種是直接輸出變量內容，像這樣：
{{ page.title }}
另一種則是邏輯命令形式的，像這樣：
{% for x in y %} ... {% endfor %}
而剛才寫進主頁的內容，就是遍歷所有post文件，然后逐一顯示在頁面上，這里需要注意的一點就是在創建文章的超鏈接時，除了 post.url 之外，也要注意在前面加上site.url ，原因前面也有提到過，我們正在創建的是 Project Pages 類型的網站，其最終生成的網址根目錄是：username.github.com/projectname，而 post.url 生成的超鏈接僅僅會自動加上 username.github.com/ 這樣的前綴。
現在檢查一下更改的所有內容，確認不要犯下愚蠢的錯誤，比如把 “.” 打成 “。“或者單詞拼錯之類的。
目錄結構變為
/EX.github-io
|-- _config.yml
|-- index.html
|-- _posts
| |-- 2015-05-05-my_first_article.md
7.配置SSH keys
為什么要配置ssh keys？因為github和本地代碼做推送和拉取時，需要用到ssh的密鑰對進行數據加解密，由於github上新建的項目沒有添加密鑰，所以本地倉庫連接不到遠程倉庫。
那么如何配置ssh keys呢？
7.1 我們需要檢查你電腦上現有的ssh key：
cd ~/.ssh
如果提示：No such file or directory 說明你是第一次使用git。
7.2 生成新的ssh keys：
ssh-keygen -t rsa -C "郵件地址@youremail.com"
注意1: 此處的郵箱地址，你可以輸入自己的郵箱地址；注意2: 此處的「-C」的是大寫的「C」。
按回車后出現
再按一次回車即可。
然后系統會要你輸入密碼：
Enter passphrase (empty for no passphrase):<輸入加密串> Enter same passphrase again:<再次輸入加密串>
在回車中會提示你輸入一個密碼，這個密碼會在你提交項目時使用，如果為空的話提交項目時則不用輸入。這個設置是防止別人往你的項目里提交內容。
注意：輸入密碼的時候沒有*字樣的，你直接輸入就可以了。
最后看到這樣的界面，就成功設置ssh key了：
7.3 添加ssh key到GitHub
在本機設置SSH Key之后，需要添加到GitHub上，以完成SSH鏈接的設置。
-
1、打開本地C:\Documents and Settings\Administrator.ssh\id_rsa.pub文件。此文件里面內容為剛才生成人密鑰。如果看不到這個文件，你需要設置顯示隱藏文件。准確的復制這個文件的內容，才能保證設置的成功。
-
2、登錄你的GitHub個人主頁。點擊右上角的 Settings進入設置頁面，然后點擊SSH Keys頁面中的Add SSH key按鈕
-
3、把你本地生成的密鑰復制到里面（key文本框中）， 點擊 add key 就ok了
8.發布到GitHub
這個時候我們就可以把頁面提交到github上了，到根目錄打開git命令行界面
8.1 把剛創建的所有文件添加到本地git庫
git add -A
8.2 保持良好的習慣，每次提交都提交添加描述
git commit -m "create my blog"
8.3 推送到GitHub，這里注意，因為我們使用的是GitHub Pages中的 Project Pages，GitHub規定，只有該分支中的頁面，才會生成網頁文件。即GitHub僅會將分支 gh-pages 下的內容進行自動生成操作， 所以本地的 master 分支應推送到遠端的 gh-pages 分支
git push origin master:gh-pages
輸入賬號和密碼，賬號即你的GitHub賬號(不是昵稱，是賬號名！)，輸入密碼的時候命令行界面不會有任何的變化，所以在輸入密碼的時候要謹慎小心。之后按回車即可。
好了，那現在我們要如何查看我們的博客頁面呢。打開GitHub，進入到自己博客的倉庫，右側菜單欄有一個setting選項
點擊進入之后會看到這個頁面
GitHub Pages中顯示的鏈接就是你的博客地址啦。
9.增加模板套裝_layouts
其實到第8步博客的構建就已經完成了，只是沒有樣式的博客實在太難看。GitHub Pages有提供一些主題給我們使用。但作為一個前端開發者，肯定更希望自己給自己的博客布局和創建樣式。
回到項目根目錄，新建文件夾 _layouts，顧名思義，“布局”是也。在 _layouts 中新建一個最基本的布局文件，姑且命名為default.html好了：
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{{ page.title }}</title> </head> <body> {{ content }} </body> </html>
首先，charset=utf-8讓我們一勞永逸地解決了UTF-8的編碼問題，隨后指定了正文內容的位置，當然在這里只是一個最簡單的內容，在body內僅有一個 {{ content }} 標簽，你可以根據自己的喜好對頁面進行任何改動，只要記得保留這個內容標簽在你想要的位置就好。
然后我們修改index.html和剛寫完的那篇文章，只要在頭屬性上加一句就好：
--- title: xxoo layout: default.html ---
我們當然還可以把這個結構變得更靈活一些，比如繼續新增兩個模板分別叫做l_post.html與l_index.html，他們首先引用default.html，但在其基礎上做出一定的修改。然后首頁使用l_index模板，而所有的post文件則使用l_post模板，等等等等，請隨意發揮。但始終記得加上 {{ content }} 標簽
目錄結構變為
/EX.github-io
|-- _config.yml
|-- index.html
|-- _posts
| |-- 2015-05-05-my_first_article.md
|-- _layouts
| |-- default.html
再次推送到GitHub即可。
這樣，我們就已經構建好了一個最簡單的blog。之后你們就可以開始為自己的博客添磚加瓦了。
10.問題匯總
10.1 推送到GitHub之后個人主頁的contributions沒有提交記錄
Git會根據用戶的名字和郵箱來記錄提交。GitHub也是用這些信息來做權限的處理，輸入下面的代碼進行個人信息的設置，把名稱和郵箱替換成你自己的。
如何查看自己的名稱和郵箱呢。回到GitHub個人主頁，點擊右上角的setting圖標
進入之后Personal settings菜單欄下的Profile頁面中，Name即為你的名字
但郵箱不是Name下面的Public email，很多人在這里被誤導了。郵箱是Emails頁面中的郵箱地址
知道了名字和郵箱之后，打開git命令行界面，通過下面的命令行來設置你的名字和郵箱
git config --global user.name "cnfeat"//用戶名 git config --global user.email "cnfeat@gmail.com"//填寫自己的郵箱
設置正確之后，提交記錄就都恢復了。不僅僅你以后提交的都會出現在提交記錄中，你以前提交的也會恢復並出現在記錄中。
10.2 每次提交都要求你輸入賬號跟密碼
原因是我們在clone分支時使用了 HTTPS 的地址，
HTTPS 的地址是做什么用的呢？其實它主要是用在一些防火牆或者代理服務器設置比較嚴格的情況下的，比如有些公司是禁止使用 SSH 連接外網，那么在這種情況下要想使用 Git 的話，就只能用 HTTPS 的方式了。
使用 HTTPS 的方式，也有儲存密碼的方式，但我們首推的方式是切換到 SSH，如果你的網絡環境支持的話。
回到你博客的根目錄。打開git命令行界面，輸入
git remote set-url 你博客的ssh url
如果你不知道你博客的ssh url，打開你的博客項目，右下角選擇SSH，然后復制框里的url就行了
之后再提交就不會要求你輸入賬號密碼了。
10.3 頁面調試不方便
如果我們要給我們的博客布局或設置樣式神馬的，我們是否每次都要把代碼寫好然后推送到GitHub上，再打開自己的博客地址，看看布局有沒有什么問題。如果有的話再改代碼，再提交，再查看呢？
這樣效率豈不是很低，有沒有能夠本地調試GitHub Pages上的頁面的工具呢？
答案是肯定的。我用的是Jekyll。它的官網就有完整的教程，使用起來非常的簡便。
11.參考資料
1.http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html
2.http://my.oschina.net/nark/blog/116299
3.http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/
4.http://www.open-open.com/lib/view/open1366080269265.html
