使用 GitHub, Jekyll 打造自己的免費(fèi)獨(dú)立博客

GitHub是一個(gè)代碼托管網(wǎng)站，現(xiàn)在很多開(kāi)源項(xiàng)目都放在GitHub上。 利用GitHub，可以讓全球各地的程序員們一起協(xié)作開(kāi)發(fā)。GitHub 提供了一種功能，叫?GitHub Pages, 利用這個(gè)功能，我 們可以為項(xiàng)目建立網(wǎng)站，當(dāng)然，這也意味著我們可以通過(guò) GitHub Pages 建立自己的網(wǎng)站。

Jekyll是一個(gè)簡(jiǎn)單的，針對(duì)博客設(shè)計(jì)的靜態(tài)網(wǎng)站生成器。使用 GitHub 和 Jekyll，我們可以打造自己的獨(dú)立博客，你可以自由地定制網(wǎng)站的風(fēng)格，并且這 一切都是免費(fèi)的。

這是我在GitHub上自己建立的博客?及源代碼?（兩個(gè)分支），在下文的講解中，你可以隨時(shí)查看博客的源代碼，以便有直觀的認(rèn)識(shí)。

網(wǎng)站截圖：

入門指引

GitHub Pages 的?主頁(yè)?提供了一個(gè)簡(jiǎn)單的入門指引，閱讀并 操作一下，會(huì)有一個(gè)直觀簡(jiǎn)單的認(rèn)識(shí)。

阮一峰的文章《搭建一個(gè)免費(fèi)的，無(wú)限流量的Blog----github Pages和Jekyll入門》是使用 GitHub 和 Jekyll 搭建獨(dú)立博客非常好的入門文章，強(qiáng)烈建議先閱讀并操作一遍。

建立自己的博客

在學(xué)習(xí)完阮一峰同學(xué)的文章后，你就已經(jīng)有能力搭建自己的獨(dú)立博客了，但是這個(gè)博客 只有最基本的功能，并且也不好看。這時(shí)候，你面臨幾個(gè)選擇:

完全自己定制博客

找一份框架，修改后使用

從GitHub上fork別人的博客代碼，在其中添加自己的文章

如果選擇 2, 那么?jekyll-bootstrap是一個(gè)選擇。?

如果選擇 3, 那么自己Google一下?github.io 博客?能找到不少博客,去fork,然后修改一下就好。 最近有一個(gè)jekyll-now，在 GitHub 上已經(jīng)獲取了 1000+ 的fork，可以關(guān)注一下。這個(gè)項(xiàng)目的特點(diǎn)是，所有操作都是通過(guò)網(wǎng)站進(jìn)行的，不需要懂命令行。另外， 我自己也有一個(gè)非常簡(jiǎn)潔的項(xiàng)目，也不需要懂命令行，直接通過(guò)網(wǎng)頁(yè)操作，就可以有一個(gè)自己的博客了。如果只需要這一個(gè)簡(jiǎn)單的博客，可以直接看最后一節(jié):一個(gè)極簡(jiǎn)風(fēng)格的博客。

如果選擇 1, 那么可以好好看看后文的內(nèi)容。

GitHub + Jekyll 工作機(jī)制

• 機(jī)制一?

??簡(jiǎn)單地說(shuō)，你在 GitHub 上有一個(gè)賬號(hào)，名為username(任意)， 有一個(gè)項(xiàng)目，名為?username.github.io(固定格式，username與賬號(hào)名一致)， 項(xiàng)目分支名為?master(固定)，這個(gè)分支有著類似下面的 目錄結(jié)構(gòu):

. ├── index.html ├── _config.yml ├── assets │?? ├── blog-images │?? ├── css │?? ├── fonts │?? ├── images │?? └── javascripts ├── _includes ├── _layouts ├── _plugins ├── _posts └── _site

這樣，當(dāng)你訪問(wèn)?http://username.github.io/時(shí)，GitHub 會(huì)使用 Jekyll 解析 用戶?username名下的username.github.io項(xiàng)目中，分支為master?的源代碼，為你構(gòu)建一個(gè)靜態(tài)網(wǎng)站，并將生成的?index.html?展示給你。

關(guān)于這個(gè)目錄更多的內(nèi)容，我們還不需要關(guān)心，如果你好奇心比較重，可以先看 后文源代碼一節(jié)。

看完上面的解釋，你可能會(huì)有一些疑問(wèn)，因?yàn)榘凑丈厦娴恼f(shuō)法，一個(gè)用戶只能有一個(gè) 網(wǎng)站，那我有很多項(xiàng)目，每個(gè)項(xiàng)目都需要一個(gè)項(xiàng)目網(wǎng)站，該怎么辦呢？另外，在阮一峰 同學(xué)的文章中，特別提到，分支名應(yīng)該為?gh-pages，這又是怎么回事呢？

原來(lái)，GitHub認(rèn)為，一個(gè)GitHub賬號(hào)對(duì)應(yīng)一個(gè)用戶或者一個(gè)組織，GitHub會(huì) 給這個(gè)用戶分配一個(gè)域名：username.github.io，當(dāng)用戶訪問(wèn)這個(gè)域名時(shí)， GitHub會(huì)去解析username用戶下，username.github.io項(xiàng)目的master分支， 這與我們之前的描述一致。

另外，GitHub還為每個(gè)項(xiàng)目提供了域名，例如，你有一個(gè)項(xiàng)目名為blog， GitHub為這個(gè)項(xiàng)目提供的域名為username.github.io/blog， 當(dāng)你訪問(wèn)這個(gè)域名時(shí)，GitHub會(huì)去解析username用戶下，blog項(xiàng)目的gh-pages?分支。

所以，要搭建自己的博客，你可以選擇建立名為?username.github.io的項(xiàng)目， 在master分支下存放網(wǎng)站源代碼，也可以選擇建立名為?blog?的項(xiàng)目，在?gh-pages分支下存放網(wǎng)站源代碼。

GitHub 的 Help 文檔中的?User, Organization and Project Pages對(duì)此有 詳細(xì)的描述。

• 機(jī)制二

Jekyll 提供了插件功能，在網(wǎng)站源代碼目錄下，有一個(gè)名為?_plugins的目錄， 你可以將一些插件放進(jìn)去，這樣，Jekyll在解析網(wǎng)站源代碼時(shí)，就會(huì)運(yùn)行你的插件， 這樣插件是 Ruby 寫成的。可以為Jekyll添加功能，例如，Jekyll默認(rèn)是不提供分類 頁(yè)面的，你可以寫一個(gè)插件，根據(jù)文章內(nèi)容生成分類頁(yè)面。如果沒(méi)有插件，你只能每 次寫文章，添加分類時(shí)，為每個(gè)分類手動(dòng)寫 HTML 頁(yè)面。

在本地運(yùn)行 Jekyll 時(shí)，這些插件會(huì)自動(dòng)被調(diào)用，但是GitHub在解析網(wǎng)站源代碼時(shí)， 出于安全考慮，會(huì)開(kāi)啟安全模式，禁用這些插件。我們既想用這些插件，又想用 GitHub，怎么辦呢怎么辦呢？

GitHub還為我們提供了更一種解析網(wǎng)站的方式，那就是直接上傳最終的靜態(tài)網(wǎng)頁(yè)， 這樣，我們可以在本地使用 Jeklly 把網(wǎng)站解析出來(lái)，然后再上傳到 GitHub上， 這就使得我們既使用了插件，又使用了 GitHub。在上文的目錄結(jié)構(gòu)中，有一個(gè) 名為?_site?的目錄，這個(gè)就是Jeklly在本地解析時(shí)最終生成的靜態(tài)網(wǎng)站，我們 把其中的內(nèi)容上傳到 GitHub 的項(xiàng)目中就可以了。例如，我在GitHub上的網(wǎng)站， 既解析后的?_site?目錄，大概是這樣的:

.├── index.html ├── 2013 ├── 2014 ├── assets ├── categories ├── page2 ├── page3 ├── page4 ├── 工具 ├── 思想 ├── 技術(shù) └── 源代碼閱讀

其中的?categories，2013,?2014?目錄就是分類插件和歸檔插件幫助我生成的， 我只要把這個(gè)目錄下的內(nèi)容上傳到 GitHub 相應(yīng)的項(xiàng)目分支中就可以了。這樣，你 訪問(wèn)?username.github.io時(shí)，GitHub就不解析了，直接把index.html返回給你了。

工作流

關(guān)于 git 和 jekyll 的安裝與基本使用，這里就不多說(shuō)了。

• 工作流一

如果你不使用插件，那么只需要維護(hù)一個(gè)分支就好:

- username/username.github.io 的 master 分支 - username/blog 的 gh-pages 分支

其中?username?是你的 GitHub 帳號(hào)。

你需要在本地維護(hù)一份網(wǎng)站源代碼，添加新文章后，使用 jekyll 在本地測(cè)試一下， 沒(méi)有問(wèn)題后，commit 到 GitHub 上的相應(yīng)分支中就可以了。

• 工作流二

如果你需要使用插件，那么需要維護(hù)兩個(gè)分支，一個(gè)是網(wǎng)站的源代碼分支 ，另一個(gè) 是 由Jeklly 解析源代碼后生成的靜態(tài)網(wǎng)站。

例如，如果項(xiàng)目名為 username.github.io，的源代碼分支名為?source，靜態(tài)網(wǎng)站分支名為master。平時(shí)寫博客時(shí)， 首先在 source 分支下，添加新文章，然后本地使用 jekyll build 將添加文章后的網(wǎng)站 解析一次，這時(shí)?_site?目錄下就有新網(wǎng)站的靜態(tài)代碼了。然后把這個(gè)目錄下的所有內(nèi)容 復(fù)制到?master?分支下。這個(gè)過(guò)程，可以寫一個(gè) Makefile，每次添加文章后 make 一下， 就自動(dòng)將文章發(fā)布到 GitHub 上。

Makefile 內(nèi)容如下：

deploy:git checkout sourcejekyll buildgit add -Agit commit -m "update source"cp -r _site/ /tmp/git checkout masterrm -r ./*cp -r /tmp/_site/* ./git add -Agit commit -m "deploy blog"git push origin mastergit checkout sourceecho "deploy succeed"git push origin sourceecho "push source"

下面的內(nèi)容涉及源代碼，如果需要進(jìn)一步學(xué)習(xí)，或者有問(wèn)題，可以在?Jeklly 官網(wǎng)上找到更詳細(xì)的解釋，或者在評(píng)論中留言。

源代碼

再來(lái)看一下這個(gè)目錄結(jié)構(gòu)：

. ├── _config.yml ├── index.html ├── assets │?? ├── blog-images │?? ├── css │?? ├── fonts │?? ├── images │?? └── javascripts ├── _includes ├── _layouts ├── _plugins ├── _posts └── _site

• _config.yml

這是針對(duì) Jekyll 的配置文件， 決定了 Jekyll 如何解析網(wǎng)站的源代碼,下面是一個(gè)示例：

baseurl: /StrayBirds markdown: redcarpet safe: false pygments: true excerpt_separator: "\n\n\n" paginate: 5

我的網(wǎng)站建立在?StrayBirds?項(xiàng)目中，所以?baseurl?設(shè)置成?StrayBirds， 我的文章采用 Markdown 格式寫成，可以指定 Markdown 的解析器?redcarpet。 另外，安全模式需要關(guān)閉，以便 Jekyll 解析時(shí)會(huì)運(yùn)行插件。?pygments?可以使得Jekyll解析文章中源代碼時(shí)加入特殊標(biāo)記，例如指定代碼類型， 這可以被很多 javascript 代碼高度庫(kù)使用。?excerpt_separator?指定了一個(gè)摘要分割符號(hào)，這樣 Jekyll 可以在解析文章時(shí)， 將文章的提要提取出來(lái)。 paginate 指定了一頁(yè)有幾篇文章，頁(yè)數(shù)太多時(shí)，我們可以將文章列表分頁(yè)，我們?cè)?后文還會(huì)提到。

• _layouts

這個(gè)目錄存放著一些網(wǎng)頁(yè)模板文件，為網(wǎng)站所有網(wǎng)頁(yè)提供一個(gè)基本模板，這樣 每個(gè)網(wǎng)頁(yè)只需要關(guān)心自己的內(nèi)容就好，其它的都由模板決定。例如，這個(gè)目錄下的 default.html 文件：

<!DOCTYPE html> <html><head><meta charset='utf-8'><title>{{ page.title }}</title></head><body><header></header><aside></aside><article> {{ content }}</article><footer></footer></body> </html>

可以看出，這個(gè)文件就是所有頁(yè)面共有的東西，每個(gè)頁(yè)面的具體內(nèi)容會(huì)被填充在?{{ content }}?中，注意這個(gè) content 兩邊的標(biāo)記，這是一種叫?liquid?的標(biāo)記語(yǔ)言。 另外，還有那個(gè)?{{ page.title }}?，其中?page?表示引用?default.html的 那個(gè)頁(yè)面，這個(gè)頁(yè)面的?title?值會(huì)在?page?相應(yīng)頁(yè)面中被設(shè)置，例如 下面的?index.html?文件，開(kāi)頭部分就設(shè)置了?title值。

• index.html

這是網(wǎng)站的首頁(yè)，訪問(wèn)?http://username.github.io?時(shí)，會(huì)指向?http://username.github.io/index.html，我們看一下基本內(nèi)容：

--- layout: default title: 首頁(yè) ---<ul class="post-list">{% for post in site.posts %}<a href="{{site.baseurl}}{{post.url}}"> {{ post.title }} </a> <br>{{ post.date | date: "%F" }} <br>{{ post.category }} <br>{{ post.excerpt }} {% endfor %} </ul>

注意，文件開(kāi)頭的描述，我們稱之為?front-matter， 是對(duì)當(dāng)前文件的一種描述，這里 設(shè)置的變量可以在解析時(shí)被引用，例如這里的?layout就會(huì)告訴 Jekyll, 生成?index.html?文件時(shí)，去?_layouts?目錄下找?default.html?文件，然后把當(dāng)前文件解析后，添加到?default.html?的?content?部分，組成最終的?index.html?文件。還有title?設(shè)置好的 值，會(huì)在?default.html?中通過(guò)?page.title?被引用。

文件的主體部分遍歷了站點(diǎn)的所有文章，并將他們顯示出來(lái)，這些語(yǔ)法都是?liquid?語(yǔ)法， 其中的變量，例如?site, 由 Jekyll 設(shè)置我們只需要引用就可以了。而?post?中的變量， 如?post.title,?post.category?是由?post?文件中的 front-matter 決定，后面馬上就會(huì)看到。

• _posts

這個(gè)目錄存放我們的所有博客文章，他們的名字有統(tǒng)一的格式：

YEAR-MONTH-DAY-title.MARKUP

例如，2014-02-15-github-jeklly.md，這個(gè)文件名會(huì)被解析，前面的?index.html?中，?post.date?的值就由這里文件名中的日期而來(lái)。下面，我們看看一篇文章的內(nèi)容示例：

--- layout: default title: 使用 Markdown category: 工具 comments: true ---# 為什么使用 Markdown* 看上去不錯(cuò) * 既然看上去不錯(cuò)，為什么不試試呢 # 如何使用 Markdown

可以看出，文章的 front-matter 部分設(shè)置了多項(xiàng)值，以后可以通過(guò)類似?post.title,?post.category?的方式引用這些些，另外，layout部分的值和之前解釋的一樣， 文件的內(nèi)容會(huì)被填充到?_layouts/default.html?文件的?content?變量中。

另外，文章中?為什么不試試呢之后的有三個(gè)不可見(jiàn)的?\n，它決定了這三個(gè)?\n?之前的內(nèi)容會(huì)被放在?post.excerpt?變量中，供其它文件使用。

• _includes

這個(gè)文件中，存放著一些模塊文件，例如?categories.ext，其它文件可以通過(guò)

{% raw %} {% include categories.ext %} {% endraw %}

來(lái)引用這個(gè)文件的內(nèi)容，方便代碼模塊化和重用。我的博客?主頁(yè)上的 分類，歸檔，這些模塊的代碼都是通過(guò)這種方式引用的。

• _plugins

這個(gè)文件中存放一些Ruby插件, 例如?gen_categories.rb，這些文件會(huì)在 Jekyll 解析網(wǎng)站源代碼時(shí)被執(zhí)行。下一節(jié)講述的就是插件。

• _site

Jekyll 解析整個(gè)網(wǎng)站源代碼后，會(huì)將最終的靜態(tài)網(wǎng)站源代碼放在這里

插件

插件使用 Ruby 寫成，放在 _plugins 目錄下，有些 Jekyll 沒(méi)有的功能，又不能 手動(dòng)添加，因?yàn)轫?yè)面的內(nèi)容會(huì)隨著文章日期類別的不同而不同，例如分類功能和歸檔功能， 這時(shí)，就需要使用插件自動(dòng)生成一些頁(yè)面和目錄。

• 分類 我的分類插件使用的是?jekyll-category-archive-plugin, 它會(huì)根據(jù)網(wǎng)站文章的分類信息，為每個(gè)類別生成一個(gè)頁(yè)面。

使用方法是，把?plugins/categoryarchive_plugin.rb 放在?plugins 目錄下， 把 _layouts/categoryarchive.html 放在?layouts 目錄下， 這樣，這個(gè)插件會(huì)在Jekyll解析網(wǎng)站時(shí)，生成相應(yīng)categories目錄，目錄下是各個(gè)分類， 每個(gè)分類下都有一個(gè)?index.html?文件，這個(gè)文件是根據(jù)模板文件 categoryarchive.html 生成的，例如：

_site/categories/ ├── 工具 │?? └── index.html ├── 思想 │?? └── index.html ├── 技術(shù) │?? └── index.html └── 源代碼閱讀└── index.html

然后，你就可以通過(guò)?http://username.github.io/blog/categories/工具/?訪問(wèn)?工具類下的?index.html?文件。

• 歸檔 我的歸檔插件使用的是?jekyll-monthly-archive-plugin,它會(huì)根據(jù)網(wǎng)站 _posts目錄下的文章日期，為每個(gè)月生成一個(gè)頁(yè)面。

使用方法同上。注意，這個(gè)插件在 jekyll-1.4.2 中可能會(huì)出錯(cuò)，在 jekyll-1.2.0 中沒(méi)有錯(cuò)誤。

組件

• 分頁(yè)

當(dāng)文章很多時(shí)，就需要使用分頁(yè)功能，在 Jekyll 官網(wǎng)上提供了一種?實(shí)現(xiàn)，把相應(yīng)代碼放在 主頁(yè)上，然后在?_config.yml?中設(shè)置?paginate?值就行了。

• 評(píng)論

評(píng)論功能需要使用外掛，我使用的是?DISQUS, 注冊(cè) 之后，將評(píng)論區(qū)的一段代碼放在你需要使用評(píng)論功能的頁(yè)面上, 然后，通過(guò)在頁(yè)面的 front-matter 部分使用

comments: true

啟用評(píng)論。此外，如果你 fork 了我的項(xiàng)目，需要修改 `_inclusds/comments.ext`，把里面的 `disqus_shortname ` 修改成你的博客短名，這個(gè)在注冊(cè)的時(shí)候會(huì)設(shè)置。

評(píng)論區(qū)截圖：

基本的內(nèi)容就介紹到這里，任何問(wèn)題，歡迎留言。

另外，如果這篇文章對(duì)你有用的話，在GitHub上幫我點(diǎn)個(gè) star 吧，即是對(duì)我的肯定，也可以幫助更多的人。

另外，注意如果你要 fork 我的模板，注意里面有些鏈接是與我的 GitHub 名 minixalpha 相關(guān)的，在使用前最好批量地將這個(gè)字符串替換為你的賬號(hào)名。

一個(gè)極簡(jiǎn)風(fēng)格的博客

從上面的工作流程可以看出，雖然每次我在本地添加文件后，都只要 make 一下就能發(fā)布文章，但我還是覺(jué)得麻煩，希望能直接通過(guò)瀏覽器在 GitHub 的網(wǎng)站上添加文章，所以，我又建立了一個(gè)非常簡(jiǎn)潔的博客，沒(méi)有分類，沒(méi)有評(píng)論，就是一個(gè)主頁(yè)，上面有所有文章鏈接，添加文章時(shí)候，只要在 _post 目錄下添加一個(gè) markdown 文件就可以了。

這個(gè)博客項(xiàng)目為：?StrayBirds?, 是通過(guò) GitHub 的? Automatic page generator生成。完全通過(guò)瀏覽器操作就能建成，不用 git啊，make啊。這個(gè)項(xiàng)目目前已經(jīng)有了 158 個(gè) fork，但是只有 35 個(gè) star 呀，拜托點(diǎn)下 star，這也太不平衡了……

博客首頁(yè)：飛鳥(niǎo)集。

要使用這個(gè)項(xiàng)目，你需要做的是：

1. 注冊(cè) GitHub，例如你的用戶名為 minixbeta

2. 到?StrayBirds?點(diǎn)右上角的 fork

3. 到你 fork 后的項(xiàng)目中，將 _config.yml 中的 username 修改成你的用戶名 minixbeta

4. 得到你自己的博客?http://minixbeta.github.io/StrayBirds/

需要注意的是，第一次使用 GitHub Pages 時(shí)，可能會(huì)有較長(zhǎng)時(shí)間的緩沖時(shí)間，過(guò)15min左右，才能正常訪問(wèn)博客，請(qǐng)耐心等待。可以嘗試修改項(xiàng)目名稱來(lái)加快這一進(jìn)程，如何修改后面有介紹。

另外，我又添加了評(píng)論系統(tǒng)，讓這個(gè)簡(jiǎn)潔的博客更為完整，你需要到 Disqus 上注冊(cè)，然后添加一個(gè)站點(diǎn)，然后將 _confg.yml 中的 disqusname?修改成你的博客短名，這個(gè)在Disqus 的 Add Disqus To Site 的時(shí)候會(huì)設(shè)置，注意這里的對(duì)應(yīng)關(guān)系。注意這個(gè)名字不是你的 Disqus 用戶名，是你的站點(diǎn)名。

如果你的文章想啟用評(píng)論，在寫文章的風(fēng)格定義部分，加上 `comments: true` 即可。像示例文章中那樣就行，如果你不想加評(píng)論，就不要加這句。

另外，由于這個(gè)項(xiàng)目目前已經(jīng)有 200 個(gè) fork，因此我又將 GitHub Pages 官方的所有主題及掌心做的 Jekyll 主題整合到其中，你可以通過(guò)修改 _config.yml 中的 theme 字段，輕松切換主題，不過(guò)每次切換都需要等待一段時(shí)間才能生效。所以，最好在修改主題之后修改項(xiàng)目名稱，可能會(huì)回快這一進(jìn)程。修改方法后面會(huì)介紹。

主題包括：

• hack ?
• leap-day
• merlot?
• midnight?
  
• minimal?
  
• modernist
  
• slate
• time-machine
  

kunka

如果你想把項(xiàng)目的名字改了，例如，將 StrayBirds 修改為 blog

那么，你需要做的是:

1. 在項(xiàng)目的 Setting 中將 Repository name 從 StrayBirds 修改為 blog

2. 將 _config.yml 中的 baseurl 修改為 /blog

3. 通過(guò)?http://minixbeta.github.io/blog/ 來(lái)訪問(wèn)你的新博客。

感謝

Thanks to authors of the themes:

• hack, Licence: None
• leap-day, Licence:?Creative Commons Attribution
• merlot, Licence: None
• midnight, Licence: None
• minimal, Licence:?Creative Commons Attribution-ShareAlike 3.0 Unported License
• modernist, Licence:?Creative Commons Attribution-ShareAlike 3.0 Unported License
• slate, Licence: MIT
• time-machine, Licence: None
• kunka, Licence: MIT, author:?zhanxin.info

All the themes are intergrated in the blog template, with some modifies.

如果你不太明白，可以看這個(gè)StrayBirds??項(xiàng)目在 GitHub 上的 READEME，里面有如何fork項(xiàng)目，修改項(xiàng)目名，添加文章的 GIF 演示。

出處：http://blog.csdn.net/on_1y/article/details/19259435

總結(jié)

以上是生活随笔為你收集整理的使用 GitHub, Jekyll 打造自己的免费独立博客的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。