超詳細創建GitHub技術博客全攻略

說明: 首先,你需要注冊一個 github 賬號,最好取一個有意義的名字,比如姓名全拼,昵稱全拼,如果被占用,可以加上有意義的數字.
本文中假設用戶名為 tiemaocsdn

1. 注冊賬號:
地址: https://github.com/
輸入賬號、郵箱、密碼,然后點擊注冊按鈕.

圖1 第1步

2. 初始設置
注冊完成后,選擇Free免費賬號完成設置。

圖2 第2步

2.1 驗證郵箱
請打開你的郵箱，查看發送給你的確認郵件，你需要驗證郵箱后,后面生成的個人主頁才會被接受和發布.

3. 創建頁面倉庫
地址: https://github.com/new
這個倉庫的名字需要和你的賬號對應， 如 tiemaocsdn.github.io
輸入基本信息,然后點擊創建倉庫.

圖3 第3步

4. 進入項目設置頁面
因為這個項目就是專門的放頁面的,所以master分支即可. 如果是你的某個倉庫的頁面,你需要設置到 gh-pages 分支中,關於這些,請參考本文末尾提到的參考資料.

圖4 第4步

5. 進入自動頁面生成器
在設置頁面,下拉到底部, 默認分支(master)不用管.

圖5 第5步

6.1 創建用戶頁面(即技術博客站點)
輸入一些內容,可以自己編輯,也可以從readme加載：

圖6-1 第6-1步

6.2 繼續,選擇主題

圖6-2 第6-2步

7. 選擇主題,然后發布
如下圖所示,其實這些以后你都可以自己修改替換,這只是生成一些css,html,img到你的倉庫里面.

圖7 第7步

8. 查看效果
現在,你可以訪問自己的GitHub.io 上的主頁了，例如：
http://tiemaocsdn.github.io/
頁面效果如下圖所示:

圖8 第8步

 

9. CNAME綁定域名

到這一步,其實已經很明確了, http://tiemaocsdn.github.io/ 這么一個域名，就指向了剛剛構建的這個站點/頁面。 如果嫌棄這個域名太土了怎么辦? 

其實很好辦，花錢買個喜歡的域名映射過去就好了。 在根路徑下創建一個文件, 文件名是大寫的 "CNAME", 注意沒有后綴。 因為tiemaocsdn 沒有購買域名，那么就拿另一個來說事吧。

類似下面這樣：

https://github.com/renfufei/renfufei.github.io/blob/master/CNAME

里面的內容，就是訪問此 xxx.github.io 時會重定向到此域名，所以其實這個地址可以是任意值。 但是為了有意義，我們可以定義為某個固定的域名，例如 :

 

1. blog.cncounter.com

復制

文件的內容只有一行，這樣訪問 http://renfufei.github.io 時瀏覽器就接收到重定向指令,跳轉到CNAME里面指定的域名去了。  

 

大致的響應頭和狀態碼如下，你也可以使用Chrome打開NetWork，勾選上 Preserve Log 保留日志看一看相關信息：

 

1. Request URL:http://renfufei.github.io/
2. Request Method:GET
3. Status Code:301 Moved Permanently
4.  
5. Location:http://blog.cncounter.com/
6. Server:GitHub.com

復制

這樣就很明白了，訪問此站點時，如果域名不是 blog.cncounter.com ,那么就會跳轉到 http://blog.cncounter.com/，個人惡意推測,即便你將CNAME文件的內容設置為 www.baidu.com 也是可行的，這樣訪問的時候直接跳轉到百度了。
但是，如果 http://blog.cncounter.com/ 是空的怎么辦?  這就需要你自己保證咯。

 

當然，要是這么結束掉，那本文就是一篇坑文。 
如果你持有這個域名，那么你可以將域名的對應記錄也CNAME到 "renfufei.github.io" . 記住， renfufei.github.io 已經是一個互聯網上能明確定位到的地址，所以DNS記錄完全可以映射到此路徑.

例如如下的記錄， DNS中，A記錄那就是直接指定一個IP。 CNAME就是重命名，指向另一個域名。 主機記錄就是前綴，例如: blog, 與 cncounter.com 拼接在一起就是 blog.cncounter.com ，如果你想映射 www.cncounter.com ，那么主機記錄就是 www ,記錄類型是CNAME，記錄值是renfufei.github.io；如果想將 http://cncounter.com 這個根域名也映射到，那么記錄類型也是CNAME,主機記錄就是一個英文的 at: "@". 你可以將多個域名都映射到 xxxxx.github.io 之類的你自己的站點上，但原則上都會跳轉到你新建的 CNAME文件中的域名上。【放心，不會死循環。。。】.好的，恭喜你!

 

10. 倉庫的頁面

創建好個人或組織的Github首頁之后，就擁有了一個固定的二級域名。 

那么，每個項目都可以使用頁面生成器生成一個項目的頁面(page)。 當然，項目使用的 pages 就不是 master 分支了，而是一個叫做gh-pages 的分支。gh 是 github 的簡稱, github會自動解析下面的頁面。

相應的訪問路徑類似 http: //xxx.github.io/project-name/ 這樣。例如： http://blog.cncounter.com/cncounter/

對應的分支為： https://github.com/cncounter/cncounter/tree/gh-pages

有興趣你可以點進去看看，生成方式和上面的基本一樣。 當然,Github現在改版了，新版的布局，Settings 被挪到了上方，但是基本操作還是不變的。

 

注意事項:

• 如果報404，或者其他錯誤,請稍等,或者檢查你的郵箱，看看構建失敗的提示信息.
• 比如我的,因為最初沒有驗證郵箱,結果收到了好幾次發布失敗的通知(如下面的郵件提示)。
• 以后每次你提交(或在線修改后提交)文件到這個倉庫,GitHub 都會自動為你構建,並發布。
• 所以,有問題,請修改並提交某個文件，重新試試吧！

1. The page build failed with the following error:
2.  
3.  
4. You need a verified email address in your GitHub account to publish Pages.
5. You can verify your email addresses from your Settings panel:
6.  
7.  
8.     https://github.com/settings/emails
9.  
10.  
11. If you have any questions please contact us at https://github.com/contact.

復制

下面是參考的一部分:

您可以通過GitHub的頁面自動生成器快速為 項目,用戶(User,比如你的賬號),或組織(Organization, 比如 alibaba) 創建一個網站(其實就是技術博客啦)。

生成用戶/組織的網頁

要生成用戶/組織的網站頁面,你需要創建一個倉庫(repository,代碼庫),名為: username.github.io 或 orgname.github.io ； 用戶名或組織名 必須 是你自己的賬號/或所屬的組織, 否則GitHub Pages 站點不會幫你生成(build,構建,編譯,)。 GitHub的頁面自動生成器可以通過倉庫的設置頁面(Settings page)看到。 您可以閱讀更多關於用戶和組織頁面的內容 。

警告: GitHub頁面網站在互聯網上是公開,即使其所屬的倉庫是私有的。 如果你有敏感數據在頁面倉庫中,您可能需要在發布之前刪除他們。

GitHub.io技術博客的好處: 寫博客,你可以自己定義JS，CSS，圖片,嵌入iframe 顯示代碼示例,什么你都可以自定義,什么標簽都允許,而在其他的技術博客站點,因為安全限制,很多是不允許的。