當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

利用github-pages建立个人博客

發布時間：2025/3/21 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了利用github-pages建立个人博客小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

Github很好的將代碼和社區聯系在了一起，于是發生了很多有趣的事情，世界也因為他美好了一點點。Github作為現在最流行的代碼倉庫，已經得到很多大公司和項目的青睞，比如jQuery、Twitter等。為使項目更方便的被人理解，介紹頁面少不了，甚至會需要完整的文檔站，Github替你想到了這一點，他提供了Github Pages的服務，不僅可以方便的為項目建立介紹站點，也可以用來建立個人博客。

Github Pages有以下幾個優點：

輕量級的博客系統，沒有麻煩的配置
使用標記語言，比如Markdown 無需自己搭建服務器
根據Github的限制，對應的每個站有300MB空間
可以綁定自己的域名

當然他也有缺點：

使用Jekyll模板系統，相當于靜態頁發布，適合博客，文檔介紹等。
動態程序的部分相當局限，比如沒有評論，不過還好我們有解決方案。
基于Git，很多東西需要動手，不像Wordpress有強大的后臺

大致介紹到此，作為個人博客來說，簡潔清爽的表達自己的工作、心得，就已達目標，所以Github Pages是我認為此需求最完美的解決方案了。

購買、綁定獨立域名

雖說Godaddy曾支持過SOPA，并且首頁放著極其不專業的大胸美女，但是作為域名服務商他做的還不賴，選擇它最重要的原因是他支持支付寶，沒有信用卡有時真的很難過。

域名的購買不用多講，注冊、選域名、支付，有網購經驗的都毫無壓力，優惠碼也遍地皆是。域名的配置需要提醒一下，因為偉大英明的GFW的存在，我們必須多做些事情。

流傳Godaddy的域名解析服務器被墻掉，導致域名無法訪問，后來這個事情在BeiYuu也發生了，不得已需要把域名解析服務遷移到國內比較穩定的服務商處，這個遷移對于域名來說沒有什么風險，最終的控制權還是在Godaddy那里，你隨時都可以改回去。

我們選擇DNSPod的服務，他們的產品做得不錯，易用、免費，收費版有更高端的功能，暫不需要。注冊登錄之后，按照DNSPod的說法，只需三步（我們插入一步）：

首先添加域名記錄，可參考DNSPod的幫助文檔：https://www.dnspod.cn/Support在DNSPod自己的域名下添加一條A記錄，地址就是Github Pages的服務IP地址：192.30.252.153在域名注冊商處修改DNS服務:去Godaddy修改Nameservers為這兩個地址： f1g1ns1.dnspod.net、f1g1ns2.dnspod.net。

配置和使用Github

Git是版本管理的未來，他的優點我不再贅述，相關資料很多。推薦這本Git中文教程。

要使用Git，需要安裝它的客戶端，推薦在Linux下使用Git，會比較方便。Windows版的下載地址在這里：http://code.google.com/p/msysgit/downloads/list。其他系統的安裝也可以參考官方的安裝教程。

下載安裝客戶端之后，各個系統的配置就類似了，我們使用windows作為例子，Linux和Mac與此類似。

在Windows下，打開Git Bash，其他系統下面則打開終端（Terminal）： Git Bash

檢查SSH keys的設置

首先我們需要檢查你電腦上現有的ssh key：

$ c d ~/.ssh

如果顯示“No such file or directory”，跳到第三步，否則繼續。

備份和移除原來的ssh key設置

因為已經存在key文件，所以需要備份舊的數據并刪除：

$ lsconfig id_rsa id_rsa.pub known_hosts$ mkdir key_backup$ cp id_rsa* key_backup$ rm id_rsa*

生成新的SSH Key

輸入下面的代碼，就可以生成新的key文件，我們只需要默認設置就好，所以當需要輸入文件名的時候，回車就好。

$ ssh-keygen -t rsa -C "郵件地址@youremail.com"Generating public/private rsa key pair.Enter file in which to save the key (/Users/ your_user_directory/.ssh/id_rsa):<回車就好>

然后系統會要你輸入加密串（Passphrase）：

Enter passphrase (empty for no passphrase):<輸入加密串>Enter same passphrase again:<再次輸入加密串>

最后看到ssh key success，就成功設置ssh key了.

添加SSH Key到GitHub

在本機設置SSH Key之后，需要添加到GitHub上，以完成SSH鏈接的設置。

用文本編輯工具打開id_rsa.pub文件，如果看不到這個文件，你需要設置顯示隱藏文件。準確的復制這個文件的內容，才能保證設置的成功。

在GitHub的主頁上點擊設置按鈕： github account setting

選擇SSH Keys項，把復制的內容粘貼進去，然后點擊Add Key按鈕即可：

PS：如果需要配置多個GitHub賬號，可以參看這個多個github帳號的SSH key切換，不過需要提醒一下的是，如果你只是通過這篇文章中所述配置了Host，那么你多個賬號下面的提交用戶會是一個人，所以需要通過命令git config --global --unset user.email刪除用戶賬戶設置，在每一個repo下面使用git config --local user.email '你的github郵箱@mail.com' 命令單獨設置用戶賬戶信息

測試一下

可以輸入下面的命令，看看設置是否成功，git@github.com的部分不要修改：

$ ssh -T git@github.com

如果是下面的反應：

The authenticity of host 'github.com (207.97.227.239)' can't be established.RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.Are you sure you want to continue connecting (yes/no)?

不要緊張，輸入yes就好，然后會看到：

Hi <em>username</em>! You've successfully authenticated, but GitHub does not provide shell access.

設置你的賬號信息

現在你已經可以通過SSH鏈接到GitHub了，還有一些個人信息需要完善的。

Git會根據用戶的名字和郵箱來記錄提交。GitHub也是用這些信息來做權限的處理，輸入下面的代碼進行個人信息的設置，把名稱和郵箱替換成你自己的，名字必須是你的真名，而不是GitHub的昵稱。

$ git config --global user.name "你的名字"$ git config --global user.email "your_email@youremail.com"

好了，你已經可以成功連接GitHub了。

快速開始

帳號注冊

在創建博客之前，當然必須有GitHub的帳號，該帳號將用來創建項目，默認的域名username.github.com/projectName中的username也要用到這個帳號。

注意：下面涉及到的一些命令凡是更用戶名和項目名有關的一律會用這里的username和projectName代替，注意替換訪問：http://www.github.com/ sign up for free的意思就是“免費注冊登錄”，注冊你的username和郵箱，郵箱十分重要，GitHub上很多通知都是通過郵箱的。比如你的主頁上傳并構建成功會通過郵箱通知，更重要的是，如果構建失敗的話也會在郵件中說明原因。

創建項目倉庫

在創建博客之前，還需要用已有的帳號創建一個項目，上面那個鏈接的projectName將是這里即將創建的項目名稱。在Git中，項目被稱為倉庫(Repository)，倉庫顧名思義，當然可以包含代碼或者非代碼。將來我們的網頁或者模板實際上都是保存在這個倉庫中的。

登錄后，訪問https://github.com/new，創建倉庫如下圖：

創建了倉庫后，我們就需要管理它，無論是管理本地倉庫還是遠程倉庫都需要Git客戶端。Git客戶端實際上十分強大，它本身就可以offline的創建本地倉庫，而本地倉庫和遠程倉庫之間的同步也是通過Git客戶端完成的。

這里省略了windows下安裝和使用Git客戶端的基本技巧，您應該已經掌握此技能了。雖然，您仍然可以按照本教程的指引完成一個簡單的網站，但是后期的維護工作無論如何都不能少了這項技能。

下面的步驟假設您已經安裝好了Git客戶端，安裝和使用技巧請參見：Git學習資源

本地編輯及上傳

在磁盤上創建一個目錄，該目錄與上面的項目名同名，在該目錄下啟用Git Bash命令行，并輸入如下命令

$git init

該命令實際上是在該目錄下初始化一個本地的倉庫，會在目錄下新建一個.git的隱藏文件夾，可以看成是一個倉庫數據庫。

創建一個沒有父節點的分支gh-pages，并自動切換到這個分支上。

$git checkout --orphan gh-pages

在Git中，分支(branch)的概念非常重要，Git之所以強大，很大程度上就是因為它強大的分支體系。這里的分支名字必須是gh-pages，因為github規定，只有該分支中的頁面，才會生成網頁文件。

在該目錄下手動創建如下文件和文件夾，最終形成這樣的結構：

_includes：默認的在模板中可以引用的文件的位置，后面會提到
_layouts：默認的公共頁面的位置，后面會提到
_posts：博客文章默認的存放位置
.gitignore：git將忽略這個文件中列出的匹配的文件或文件夾，不將這些納入源碼管理
_config.yml：關于jekyll模板引擎的配置文件
index.html：默認的主頁

在_layouts目錄下創建一個default.html，在其中輸入如下內容，注意：文件本身要以UTF-8 without BOM的格式保存，以防止各種編碼問題，建議使用notepad++或者VIM編輯

default.html

<!DOCTYPE html> <html> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>一步步在GitHub上創建博客主頁(2)</title> </head> <body></body> </html>

編輯index.html

--- layout: default title: test title --- <p>Hello world!</p>

再次打開Git Bash，先后輸入如下命令：

$ git add .$ git commit -m "first post"$ git remote add origin https://github.com/username/projectName.git$ git push origin gh-pages

據網友反應，如果是初次安裝git的話，在commit的時候會提示需要配置username和email，請讀者注意根據提示配置一下，至于username和email可以隨便填

將當前的改動暫存在本地倉庫
將暫存的改動提交到本地倉庫，并寫入本次提交的注釋是”first post“
將遠程倉庫在本地添加一個引用：origin
向origin推送gh-pages分支，該命令將會將本地分支gh-pages推送到github的遠程倉庫，并在遠程倉庫創建一個同名的分支。該命令后會提示輸入用戶名和密碼。

現在，你只需要稍等半分鐘時間，訪問http://username.github.com/projectName就可以看到生成的博客了

另外上面提到的，如果生成失敗，Github會向你的郵箱發送一封郵件說明，請注意查收。

域名掃盲

說實話，雖然明白什么是域名以及域名解析的原理，但是在實際的互聯網環境中，域名的問題其實比理論上說的要復雜些。這里對一些概念稍作整理。

A（Address）記錄

是用來指定主機名（或域名）對應的IP地址記錄。用戶可以將該域名下的網站服務器指向到自己的web server上。同時也可以設置您域名的二級域名。

CNAME

也被稱為規范名字。這種記錄允許您將多個名字映射到同一臺計算機。通常用于同時提供WWW和MAIL服務的計算機。例如，有一臺計算機名為“host.mydomain.com”（A記錄）。它同時提供WWW和MAIL服務，為了便于用戶訪問服務。可以為該計算機設置兩個別名（CNAME）：WWW和MAIL。這兩個別名的全稱就是“www.mydomain.com”和“mail.mydomain.com”。實際上他們都指向“host.mydomain.com”。同樣的方法可以用于當您擁有多個域名需要指向同一服務器IP，此時您就可以將一個域名做A記錄指向服務器IP然后將其他的域名做別名到之前做A記錄的域名上，那么當您的服務器IP地址變更時您就可以不必麻煩的一個一個域名更改指向了只需要更改做A記錄的那個域名其他做別名的那些域名的指向也將自動更改到新的IP地址上了。

TTL

TTL值全稱是“生存時間（Time To Live)”，簡單的說它表示DNS記錄在DNS服務器上緩存時間。要理解TTL值，請先看下面的一個例子：假設，有這樣一個域名myhost.cnMonkey.com（其實，這就是一條DNS記錄，通常表示在abc.com域中有一臺名為myhost的主機）對應IP地址為1.1.1.1，它的TTL為10分鐘。這個域名或稱這條記錄存儲在一臺名為dns.cnMonkey.com的DNS服務器上。現在有一個用戶鍵入一下地址（又稱URL）：http://myhost.cnMonkey.com 這時會發生什么呢？該訪問者指定的DNS服務器（或是他的ISP,互聯網服務商, 動態分配給他的)8.8.8.8就會試圖為他解釋myhost.cnMonkey.com，當然8.8.8.8這臺DNS服務器由于沒有包含 myhost.cnMonkey.com這條信息，因此無法立即解析，但是通過全球DNS的遞歸查詢后，最終定位到dns.cnMonkey.com這臺DNS服務器， dns.cnMonkey.com這臺DNS服務器將myhost.cnMonkey.com對應的IP地址1.1.1.1告訴8.8.8.8這臺DNS服務器，然有再由 8.8.8.8告訴用戶結果。8.8.8.8為了以后加快對myhost.cnMonkey.com這條記錄的解析，就將剛才的1.1.1.1結果保留一段時間，這就是TTL時間，在這段時間內如果用戶又有對myhost.cnMonkey.com這條記錄的解析請求，它就直接告訴用戶1.1.1.1，當TTL到期則又會重復上面的過程。

域名分級

子域名是個相對的概念，是相對父域名來說的。域名有很多級，中間用點分開。例如中國國家頂級域名CN，所有以 CN 結尾的域名便都是它的子域。例如：www.zzy.cn 便是 zzy.cn 的子域，而 zzy.cn 是 cn 的子域。

“二級域名”：目前有很多用戶認為“二級域名”是自己所注冊域名的下一級域名，實際上這里所謂的“二級域名”并非真正的“二級”，而應該稱為“次級”(相對次級)

例如您注冊的域名是abc.cn來說：CN為頂級域，abc.cn為二級域，www.abc.cn、mail.abc.cn、help.zzy.cn為三級域。

還有一些特殊的二級域被用來作頂級域使用，例如：com.cn、net.cn、org.cn、gov.cn（包括地區域名bj.cn、fj.cn等）。那么此時用戶所注冊的就應該是三級域了，例如114.com.cn。（備注：www.gov.cn實際上是以gov.cn為后綴的www域名，就是說如果您在域名Whois信息查詢中輸入gov.cn是查詢不到注冊信息的因為gov.cn是作為頂級域來使用的域名后綴，真正開放注冊的是www.gov.cn）。然而當前有很多用戶還是習慣地將可以允許用戶注冊的域名稱為頂級域名，而所注冊域名的下一級域名稱為“二級域名”，其實從嚴格意義上來講這是不對的，所以我們前面會說“子域名”、“二級域名”是相對的概念，準確的應該稱為“次級域名”。

域名購買

眾所周知，域名是要購買的，國內用域名訪問主機大概是要備案的，有些麻煩。所以現在很多人從國外的域名注冊商那兒買域名，比如goddady。如果是新手想在國外買域名的話，最好準備一張VISA信用卡，并用paypal來支付（可以省手續費）。goddady現在也支持支付寶，支付起來也很方便。

綁定域名到GitHub-Page

其實十分簡單，假設我們購買了域名coolshell.info，想用coolshell.info訪問你的站點http://username.github.com/projectname，你可以參考這個鏈接：Setting up a custom domain with Pages

在你的域名提供商那邊，設置一條A記錄：

colshell.info 204.232.175.78（注意：這個IP難保不會變，所以要及時關注上面這個鏈接中給出的IP，并及時更新A記錄）。下面這個截圖是goddady上的A記錄配置：

然后在你的gh-pages分支的根目錄中創建一個CNAME文件，其中只能有一行，就是coolshell.info，用Git客戶端上傳更改，大約等十幾分鐘就能生效了。

可以先ping一下coolshell.info，如果返回的IP地址更配置的A記錄一樣的話，說明域名已經注冊好了，就等GitHub生效了。不過別急，你還需要把_config.yml中的baseurl設置如下

baseurl : /

或者是

baseurl :

這取決于你的模板如何引用baseurl，總之指向根目錄就好了。

剛開始的時候我比較困惑的是，為什么A記錄都指向的是同一個IP，GitHub是如何知道應該返回哪個用戶的頁面的。其實很簡單，秘密就是上面提到的CNAME文件，GitHub應該會緩存所有gh-pages分支中的CNAME文件，用戶對域名的請求被定向到GitHub住服務器的IP地址后，再根據用戶請求的域名，判斷對應哪個gh-pages，而且它會自動帶上項目名，所以baseurl需要改為根目錄。

jekyll的安裝

前幾篇介紹了GitHub-Page的基本原理和使用方法，還介紹了如何將購買的域名綁定博客主頁。然而，當需要正兒八經的將一個博客構建起來，不僅要知道如何上傳我們的文件，還要能夠高效的更好的設計博客。因此，必須能夠在上傳之前在本地完成測試；另一方面，完全靠html來編輯博客，顯然工作量太大，隨著博客越來越復雜，簡直不可能維護，因此，需要用jekyll這個模板引擎來幫忙。本篇先介紹如何搭建一個本地的測試環境。

更新

根據網友的反應，需要注意的是Ruby的版本和RubyDevKit的版本要對應，不要裝錯；

另外，目前新版的Ruby自帶gem了，所以gem安裝可以跳過；

由于國內的網絡（你們懂的），gem官方的源基本上是沒法用了，參考文中的鏈接，使用淘寶的鏡像比較靠譜；

jekyll有一個問題，可能需要修改下面這個文件，否則會出現GBK錯誤D:\Ruby193\lib\ruby\gems\1.9.1\gems\jekyll-1.2.1\lib\jekyll\convertible.rb將它改成self.content = File.read(File.join(base, name),:encoding => "utf-8")D:\Ruby193\lib\ruby\gems\1.9.1\gems\jekyll-1.2.1\lib\jekyll\tags\include.rb中的最后幾行的地方改成File.read_with_options(file,:encoding => "utf-8")

最新的jekyll修改了命令行參數，需使用如下命令行 jekyll serve --safe --watch

jekyll 1.4.3在windows下本地生成的時候可能會出現'fileutils.rb:247:in mkdir Invalid argument'的錯誤

jekyll 1.4.3在–watch參數的情況下可能會出現'cannot load such file -- wdm (LoadError)'的錯誤，用gem安裝wdm就好了： gem install wdm

Ruby安裝

jekyll本身基于Ruby開發，因此，想要在本地構建一個測試環境需要具有Ruby的開發和運行環境。在windows下，可以使用Rubyinstaller安裝

ruby安裝說明：http://www.ruby-lang.org/zh_cn/downloads/

ruby安裝下載(windows)：http://rubyinstaller.org/downloads/windows的安裝還是一如既往的“無腦”，不多說了。

如果想要快速體驗ruby開發，可以參考：20分鐘體驗 Ruby

RubyDevKit安裝

從這個頁面下載DevKit：http://rubyinstaller.org/downloads/

下載下來的是一個很有意思的sfx文件，如果你安裝有7-zip吧，可以直接雙擊，它會自解壓到你所選擇的目錄。

解壓完成之后，用cmd進入到剛才解壓的目錄下，運行下面命令，該命令會生成config.yml。（這種安裝方式讓我想起了，linux下安裝三步走config->make->make install中的config）

$ruby dk.rb init

config.yml文件實際上是檢測系統安裝的ruby的位置并記錄在這個文件中，以便稍后使用。但上面的命令只針對使用rubyinstall安裝的ruby有效，如果是其他方式安裝的話，需要手動修改config.yml。我生成的config.yml文件內容如下：（注意路徑用的是linux的斜杠方向）

# This configuration file contains the absolute path locations of all# installed Rubies to be enhanced to work with the DevKit. This config# file is generated by the 'ruby dk.rb init' step and may be modified# before running the 'ruby dk.rb install' step. To include any installed# Rubies that were not automagically discovered, simply add a line below# the triple hyphens with the absolute path to the Ruby root directory.## Example:## ---# - C:/ruby19trunk# - C:/ruby192dev#---- C:/Ruby193

最后，執行如下命令，執行安裝：

$ruby setup.rb

如果沒有setup.rb的話，執行：

$ruby dk.rb install

Rubygems

Rubygems是類似Radhat的RPM、centOS的Yum、Ubuntu的apt-get的應用程序打包部署解決方案。Rubygems本身基于Ruby開發，在Ruby命令行中執行。我們需要它主要是因為jekyll的執行需要依賴很多Ruby應用程序，如果一個個手動安裝比較繁瑣。jekyll作為一個Ruby的應用，也實現了Rubygems打包標準。只要通過簡單的命令就可以自動下載其依賴。

gems下載地址：http://rubyforge.org/frs/?group_id=126

解壓后，用cmd進入到解壓后的目錄，執行命令即可：

$ruby setup.rb

就像yum倉庫一樣，倉庫本身有很多，如果希望加快應用程序的下載速度，特別繞過“天朝”的網絡管理制度，可以選擇國內的倉庫鏡像，taobao有一個：http://ruby.taobao.org/。配置方法這個鏈接里面很完全。

安裝jekyll

有了上面的基礎，安裝jekyll就十分輕松了，在此之前，建議國內用戶換成淘寶服務器，速度更快：

$ sudo gem sources --remove http://rubygems.org/$ sudo gem sources -a http://ruby.taobao.org/

執行下面gem命令即可全自動搞定：

$gem install jekyll

jekyll依賴的組件如下：

directory_watcher
liquid
open4
maruku
classifier

測試jekyll服務

安裝好之后就可以測試我們的環境了。用cmd進入到上一節我們創建的目錄，執行下面命令：

$jekyll --server --safe

jekyll此時會在localhost的4000端口監聽http請求，用瀏覽器訪問http://localhost:4000/index.html，之前的頁面出現了！

更新jekyll最新的動態和文檔現在可以在jekyllrb上找到

jekyll介紹

在前幾篇中，多多少少對jekyll有所涉及，在這篇中將帶讀者進一步了解jekyll以及模板引擎liquid。

jekyll是一個基于ruby開發的，專用于構建靜態網站的程序。它能夠將一些動態的組件：模板、liquid代碼等構建成靜態的頁面集合，Github-Page全面引入jekyll作為其構建引擎，這也是學習jekyll的主要動力。同時，除了jekyll引擎本身，它還提供一整套功能，比如web server。我們用jekyll –server啟動本地調試就是此項功能。讀者可能已經發現，在啟動server后，之前我們的項目目錄下會多出一個_site目錄。jekyll默認將轉化的靜態頁面保存在_site目錄下，并以某種方式組織。使用jekyll構建博客是十分適合的，因為其內建的對象就是專門為blog而生的，在后面的逐步介紹中讀者會體會到這一點。但是需要強調的是，jekyll并不是博客軟件，跟workpress之類的完全兩碼事，它僅僅是個一次性的模板解析引擎，它不能像動態服務端腳本那樣處理請求。

更多關于jekyll請看這里

jekyll是如何工作的

在jekyll解析你的網站結構前，需要確保網站目錄像下面那樣：

_config.yml：保存配置，該配置將影響jekyll構造網站的各種行為。
_includes：該目錄下的文件可以用來作為公共的內容被其他文章引用，就跟C語言include頭文件的機制完全一樣，jekyll在解析時會對{ % include file.ext %}標記擴展成對應的在_includes文件夾中的文件
_layouts：該目錄下的文件作為主要的模板文件
_posts：文章或網頁應當放在這個目錄中，但需要注意的是，文章的文件名必須是YYYY-MM-DD-title
_site：上面提到過，這是jekyll默認的轉化結果存放的目錄
images：這個目錄沒有強制的要求，主要目的是存放你的資源文件，圖片、樣式表、腳本等。

一個例子

完成一個例子總是最快的入門方式。

對于基于靜態頁面的網站，你顯然不希望每篇文章都要寫html、head等與文章本身無關的重復的東西，那么容易想到的是將這些東西作為模板提取出來，以便復用，_layouts文件夾中的文件可以作為這樣的模板。現在我們在_layouts文件夾中創建一個模板文件，default.html：

default.html

default.html包含了每個html都需要的一些標記，以及一個個liquid標記。{ { … }}是liquid中用來表示“內容”的標記，其中的對象在解析時會被替換成文件到頁面中

content：表示在這里的地方用子頁面的內容替換。

現在我們來實現一個主頁，在根目錄下，創建一個index.html

index.html

--- layout: default --- <h1>Hello jekyll</h1> <p>This is the index page</p>

除了普通的html標記外，開頭這一段稱為YAML格式，以一行“—”開頭，一行“—”結尾，在虛線的中間以key-value的形式對一些全局變量進行賦值。

layout變量表示該文章應當使用_layouts/default這個文件作為父模板，并將index.html中的內容替換父模板中的{ { content }}標記。

在根目錄中啟動jekyll –server，并訪問http://localhost:4000/index.html，你將得到下面頁面

該頁面的Html源碼如下，可以看到，index.html中的內容替換了default.html中的{ { content }}

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>My blog</title></head><body><h1>Hello jekyll</h1> <p>This is the index page</p></body> <html>

現在請觀察一下_site中的index.html，就是上面的Html代碼！OK，現在你明白jekyll的工作方式了吧，它僅僅一次性的完成靜態頁面的轉化，其余的事情全都交給普通的web server了！

需要注意的是，如果你失敗了，請確保你的文件都是UTF-8 without BOM的格式。

在windows中，為了甄別UTF-8編碼格式的文本文件，默認會在文件頭插入兩個字節的標識，被稱為BOM。事實證明這是個“歪門邪道”，jekyll不識別這種特殊的標記，所以可以使用Notepad++或其他的工具將UTF-8編碼文件開頭的BOM去掉。

第一篇文章

現在我們來創建一篇博客文章，并在index.html頁面添加文章的鏈接。

在 _posts目錄下創建2014-06-21-first-post.html

2014-06-21-first-post.html

--- layout: default title: my first post --- <h1>利用github-pages建立個人博客</h1> <p>This is my first post.Click the link below to go back to index:</p> <a href="/index.html">Go back</a>

修改index.html

index.html

--- layout: default --- <h1>Hello jekyll</h1> <p>This is the index page</p> <p>My post list:</p>

最終效果如下：

這個是略微復雜的例子，這里涉及到兩個主要的對象

site：全局站點對象。比如site.posts返回當前站點所有在_post目錄下的文章，上面的例子結合for循環來羅列所有的文章

page：文章對象。比如page.url將返回page對象的url，上面的例子用該對象和屬性返回了文章的鏈接另外要補充的是site.baseurl，該值就是我們在_config.yml中配置的baseurl啦！

這些對象被稱為“模板數據API”，更多API文檔請參見這里

liquid

liquid是jekyll底層用于解析的引擎，我們用到的{ { .. }}亦或是{ % … %}標記其實是靠liquid去解析的。本節將詳細介紹liquid的使用。

liquid包含兩種標記，理解他們的機理是十分重要的：

{ { .. }}：輸入標記，其中的內容將被文本輸出{ % … %}：操作標記，通常包含控制流代碼例如：

Sorry, you are too young

另外liquid還包含一種叫filter的機制。這是種對輸出標記的擴展，通過它可以對輸出標記中的內容進行更細致的處理，例如：

Hello TOBIHello tobi has 4 letters!Hello 2015 Sep

返回字符串大寫的結果：TOBI返回字符串的長度：4將當前時間格式化輸出liquid內置了一些filter，并且該機制可以被擴展，jekyll便擴展了liquid的filter。

更多關于liquid的使用方法，請參見這里

更多關于jekyll對liquid的擴展，請參見這里

樣式、分類、標簽

在前一篇中我們實際使用jekyll做了一個略微“復雜”的模板。并用它生成了站點。但是這樣的blog顯然太粗糙了，別說不能吸引別人了，自己都看不下去啊。作為自己的“門戶”，當然要把美化工作放在第一位啦。

網站的美觀十分重要，這當然要依靠CSS咯。因為完全基于靜態頁面，所以沒有現成的動態模板可以使用，我們只能手寫CSS了，這里不介紹CSS了，因為這是設計師的范疇了，屌絲程序員搞不來了。我的blog的樣式是從網上找過來改的。

從功能的角度blog除了文章以外，對文章的分類、標簽、歸檔都是主流的功能。

分類和標簽功能是jekyll的yaml-format的內置功能，在每篇文章上方可以設置：這里需要注意的是如果多個分類或者tag的話，用逗號分隔，并且要緊跟一個空格。分類可以任意添加，Jekyll在解析網站的時候會統計所有的分類，并放到site.categories中；換句話說，不能脫離文章而設置分類。

--- layout: default title: Title description: 這里的description是自定義屬性。 categories: [web-build] tags: [github-page, jekyll, liquid] ---

下面是本站羅列分類的代碼，供大家參考

<div id="categories-3" class="left"><h3>Categories</h3><ul><li class="cat-item cat-item-6"><a href="/categories/java.html">java</a></li><li class="cat-item cat-item-6"><a href="/categories/c.html">c</a></li><li class="cat-item cat-item-6"><a href="/categories/programming.html">programming</a></li><li class="cat-item cat-item-6"><a href="/categories/jekyll.html">jekyll</a></li><li class="cat-item cat-item-6"><a href="/categories/other.html">other</a></li><li class="cat-item cat-item-6"><a href="/categories/reprints.html">reprints</a></li><li class="cat-item cat-item-6"><a href="/categories/android.html">android</a></li><li class="cat-item cat-item-6"><a href="/categories/web.html">web</a></li><li class="cat-item cat-item-6"><a href="/categories/book.html">book</a></li><li class="cat-item cat-item-6"><a href="/categories/algorithm.html">algorithm</a></li><li class="cat-item cat-item-6"><a href="/categories/c/c++.html">c/c++</a></li><li class="cat-item cat-item-6"><a href="/categories/gradle.html">gradle</a></li><li class="cat-item cat-item-6"><a href="/categories/lambda.html">lambda</a></li><li class="cat-item cat-item-6"><a href="/categories/latex.html">latex</a></li><li class="cat-item cat-item-6"><a href="/categories/unix/linux.html">unix/linux</a></li></ul></div>

注意到分類的url鏈接，這里的categories目錄以及其中的html不會自動生成，需要手動添加的，也就是說每增加一個分類，都需要在categories下添加一個該分類的html。當然你可以選擇其他目錄，甚至考慮其他解決方案，不過我還沒想到更簡單的方法。Tag的處理方式類似，這里就省略了。

推薦大家下載jekyll原作者推薦的簡單例子來學習：

$git clone https://github.com/plusjade/jekyll-bootstrap.git

下載的目錄里面是一個完整的網站，可以使用我們本地的jekyll –server啟動。另外，作者的網站：http://jekyllbootstrap.com/

代碼高亮

參考Jekyll官網文檔里Code snippet highlighting一節。玩顏色魔法的大魔術師是Pygments。

安裝Python Pygments

Ubtuntu下：sudo apt-get install python-pygments

設置代碼高亮的樣式

通過下面的命令可以查看當前支持的樣式from pygments.styles import STYLE_MAPSTYLE_MAP.keys()輸出： [‘monokai’, ‘manni’, ‘rrt’, ‘perldoc’, ‘borland’, ‘colorful’, ‘default’, ‘murphy’, ‘vs’, ‘trac’, ‘tango’, ‘fruity’, ‘autumn’, ‘bw’, ‘emacs’, ‘vim’, ‘pastie’, ‘friendly’, ‘native’]

生成指定樣式的css文件

pygmentize -S native -f html > pygments.css

將生成的css文件拷貝到主題的css目錄下，如：

%github pages project folder%\assets\themes\twitter\css\

引入default.html中引入css文件：

// default目錄如%github pages project folder%\includes\themes\twitter\// 引入如下代碼<link href='/css/pygments.css' rel="stylesheet" media="all">

在文章中高亮代碼:

public class HelloWorld { public static void main(String args[]) { System.out.println("Hello World!"); } }

給文章添加目錄

如你所見，我的這個博客里，稍長點的文章，都會生成目錄樹（Table of Content），并且配合有Bootstrap的affix、ScrollSpy 效果。同樣地，在Jekyll構建的靜態博客上，我一樣想生成目錄樹。Jekyll的Plugins頁面中有提到一個插件 jekyll-toc-generator，但其實沒有必要使用插件，因為 Jekyll 的 Markdown 渲染器 kramdown 已經具備這個功能。我們只需要啟用它即可。

啟用 kramdown

打開 _config.yml 文件，確保以下一行存在：markdown: kramdown

生成 TOC

接下來是在文章中標識 toc 的生成位置：* 目錄{:toc}# 陳三## 陳三的博客

請注意，* 目錄這一行是必需的，它表示目錄樹列表，至于星號后面寫什么請隨意

如果要把某標題從目錄樹中排除，則在該標題的下一行寫上 {:.no_toc}

目錄深度可以通過 config.yml 文件中添加 toc_levels 選項來定制，默認為 1..6，表示標題一至標題六全部渲染

默認生成的目錄列表會添加 id 值 markdown-toc，我們可以自定義 id 值，比如 {:toc #chen}，生成的目錄列表添加的 id 將會是 chen。

評論功能

靜態的網站不可能自己存放評論，于是只能考慮外掛評論了，查了一下比較靠譜和廣泛的就是DISQUS了;Disqus是一個社會化的評論解決方案，請允許我使用這個爛透了的詞，調用它的接口非常簡單，在自己的頁面加載他的一段JS代碼即可，如果別人注冊了Disqus，那么就可以方便的留言，交流，一處登錄，處處方便，而且Disqus也提供了一些spam等策略，不用自己操心了，并且可以和一些現有的博客系統很好的轉換對接。越來越多的網站開始使用Disqus的服務了，這是一個非常不錯的趨勢，Jekyll配合Disqus實在是完美了。我別無所求了。

點擊，在下面的頁面中填寫相關的信息，注意先在右側注冊登錄信息，然后再在左側增加一個站點：

填寫完成后點擊“Continue”，在接下來的頁面中選擇Universal Code，然后根據提示完成接下來的操作，后面的操作就十分簡單了：主要就是把產生的腳本文件復制到你的站點頁面中即可。

DISQUS還有一個Dashboard，可以用來管理評論，這里就不再詳述了。最后的效果就是本blog文章下方的評論咯，還是挺好看的，國內的還有個多說的評論引擎，支持國內的各大網站帳號。

站內搜索

blog當然不能缺少站內搜索功能。主流的站內搜索都是主流的搜索引擎提供的。作為一個google控，當然必須選擇google啊。當然你必須擁有一個google帳號。

google的站內搜索叫：custome search engine：http://www.google.com/cse

創建一個自定義搜索與添加評論類似只要三步：

填寫自定義搜索的名字、描述、語言、站點信息，這些信息中唯一需要注意的是站點信息，建議使用mydomain.com作為搜索范圍，因為這樣的話，會自動轉化成.mydomain.com/，能包含全站的內容

選擇樣式和嘗試搜索。嘗試搜索有時不能成功，但是不要緊

將生成腳本寫到網頁中

這時，可能搜索功能仍然無法使用，尤其是你的網站沒有什么名氣，也沒有什么外鏈。因為google的爬蟲不可能很快的抓到你的網站。但這里有個技巧可以讓你的網站立刻被google收錄（姑且不論排名），那就是google的Webmaster Tools工具，該工具是免費的，而且還集成了站點流量統計功能，十分強大。

進入地址：https://www.google.com/webmasters/tools/home

它會要你認證你對網站的所有權，下載一個HTML文件，把它上傳到你的網站上，設置完成之后基本上立刻就生效了，無需等待一天。

認證成功后，進入sitemaps網站,在下面填入你的網站后點擊start，接下來下載sitemap文件，把它上傳到你的域名根目錄，打開Optimization->Sitemaps，點擊Add/TEST SITEMAP，輸入指向你的站點的sitemap地址，本博客的sitemap是：http://coolshell.info/sitemap.xml,過幾分鐘就看到下面的結果：！[](/images/images/githubpages/sitemap2.jpg)

sitemap是網站所有鏈接的集合，最簡單的sitemap可以是一個文本文件，其中只存放你網站的所有可用資源的鏈接，這有利于搜索引擎收錄你的網站內容。復雜的sitemap還可以利用sitemap的專用格式來標注資源的形式，更多關于sitemap可以參考：http://www.sitemaps.org/完成站點認證和sitemap測試后，我們回到自定義搜索的頁面，進入到control panel->Indexing，在其中使用sitemap來迫使google索引你的網站。這樣，你的網站就算被google收錄了。

至于我們的站內搜索應該是可以用的了，試試本站點上方的搜索就知道啦～

站點統計

這里介紹的站點統計是google的analytics，analytics的使用十分簡單，同樣的原理，利用注入腳本來實現流量統計的外掛，統計功能十分強大，誰用誰知道。這里就不再嘮叨了。。

GoDaddy & DNSPod

GoDaddy是一家非常不錯的域名注冊商，良好的用戶體驗，飛快的生效速度，給力的優惠碼，也支持支付寶，永遠不用擔心國內那些流氓廠商的流氓行為，注冊了域名，就可以放心不會被別人搶走。在Godaddy注冊域名是一件很簡單的事情，按照提示走就完全沒有問題，唯一需要動腦筋的可能是，你要想一個既有個人標識，又沒有被別人注冊的域名了。

Godaddy一切都很完美，直到遇到了GFW，原因你肯定懂。前段時間推上風傳Godaddy的DNS服務器被墻，導致域名不能解析，看起來好像自己的站被墻了一樣，這個確實是個鬧心的事情，還好國內有DNS服務的替代產品，而且做得還非常的不錯，也是免費的，功能強大，速度快，不用擔心被和諧，所以隆重推薦DNSPod給大家，可以試用一下，把DNS服務遷移到DNSPod來，解決后顧之憂，配置比較簡單，不懂的可以等我后面的博客啦，哈。

GitHub & Jekyll

GitHub是一個非常優秀的產品，爆發式的增長，各大優質開源軟件的蜂涌而至，只能說明人們太需要他了。Social Coding是他的Slogan，產品的設計確實解決了很多代碼交流的難題，讓世界更平，讓交流更暢，關于Git的學習，大家可以移步這里Pro Git中文版，這也是一個本身就在Github維護的一個項目，高質量的翻譯了Git入門書，講解詳細，是學習Git的好資料。

GitHub是一個偉大的產品，GitHub Pages是他偉大的一部分，GitHub Pages基于Jekyll博客引擎，當我深入的研究了他之后，我深深的想給Jekyll的作者一個擁抱，列舉一下Jekyll的優點：

可以單獨放在自己的服務器上，他也是GitHub Pages的基礎，質量可靠
將博客最重要的功能抽取出來，去除了WordPress的復雜、煩躁的東西，一切都是清晰可控的
可以方便的使用Markdown等其他標記語言

清晰、簡潔的文件組織，完美的永久鏈接方案，既漂亮、又可定制
博客靜態化，速度快
- Jekyll是完美的
寫到這里，基本的點已經介紹完畢，現在介紹下怎么獲取別人的博客模板來建立自己的博客。

獲取并修改別人的博客

Jekyll官方建立了一個頁面，里面有許多的模板可供參考。接下來我們就要奉行“拿來主義”了，將別人的模板為我們所用。

我自己用了Yukang’s Page，他采用了一個叫做twitter的Jekyll Bootstrap的模板。下面假設你已經安裝了git，我們把他人的網站代碼clone下來，為了舉例方便，還是選取了Yukang’s Page：
git clone https://github.com/chenyukang/chenyukang.github.com.git
然后刪去別人的.git文件夾：
rm -rf .git
接著，我們參考jekyll的文件目錄，可以把他人的博客刪去，并且做一些小的調整。接下來，我們把改頭換面的博客上傳到自己的GitHub帳號中去。一般情況下，假設你的帳號名是USERNAME，你需要建一個名為USERNAME.github.io的帳號，分支為master。這樣，在你將本地的網站push上去之后，不到10分鐘，訪問USERNAME.github.io，就可以看到你新鮮出爐的網站了：
git init git add -A git commit -m "first commit" git remote add origin https://github.com/USERNAME/USERNAME.github.io.git git push -u origin master
Git博大精深，我還沒有熟練掌握。具體的命令可以參考下面一些參考資料：
- 入門：git - 簡易指南
- 進階：Think Like (a) Git
- 參考圖解：A Visual Git Reference
如果你想要在push之前就在本地預覽一下網站，可以使用jekyll serve --watch命令。默認設置下，可以在瀏覽器中訪問localhost:4000預覽。詳細情況請點擊這里。

那么，我們如何撰寫新的博客呢？下面，我們隆重推出Markdown。

Markdown語法

根據維基百科上的介紹

Markdown 是一種輕量級標記語言，創始人為約翰·格魯伯（John Gruber）和亞倫·斯沃茨（Aaron Swartz）。

想到Aaron Swartz已經故去，不禁一陣傷感。

Markdown的介紹有許多，個人推薦：
- 入門：獻給寫作者的 Markdown 新手指南
- 另一份入門文檔：Markdown Cheatsheet
- 進階：Markdown 語法說明 (簡體中文版)
- kramdown使用心得：Kramdown notes
備注：如何在Markdown中寫注釋呢？這里提供了最原始的一種解決方法：

看來在Markdown文件里寫注釋的唯一方法就是用<!– –>了，好吧。

from: http://coolshell.info/blog/2015/03/github-pages-blog.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的利用github-pages建立个人博客的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：使用Github Pages建独立博客
下一篇： Scala简明教程