使用 GitHub, Jekyll 打造自己的免費獨立博客

GitHub是一個代碼托管網站，現在很多開源項目都放在GitHub上。 利用GitHub，可以讓全球各地的程序員們一起協作開發。GitHub 提供了一種功能，叫?GitHub Pages, 利用這個功能，我 們可以為項目建立網站，當然，這也意味著我們可以通過 GitHub Pages 建立自己的網站。

Jekyll是一個簡單的，針對博客設計的靜態網站生成器。使用 GitHub 和 Jekyll，我們可以打造自己的獨立博客，你可以自由地定制網站的風格，并且這 一切都是免費的。

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

網站截圖：

入門指引

GitHub Pages 的?主頁?提供了一個簡單的入門指引，閱讀并 操作一下，會有一個直觀簡單的認識。

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

建立自己的博客

在學習完阮一峰同學的文章后，你就已經有能力搭建自己的獨立博客了，但是這個博客 只有最基本的功能，并且也不好看。這時候，你面臨幾個選擇:

完全自己定制博客

找一份框架，修改后使用

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

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

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

如果選擇 1, 那么可以好好看看后文的內容。

GitHub + Jekyll 工作機制

• 機制一?

??簡單地說，你在 GitHub 上有一個賬號，名為username(任意)， 有一個項目，名為?username.github.io(固定格式，username與賬號名一致)， 項目分支名為?master(固定)，這個分支有著類似下面的 目錄結構:

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

這樣，當你訪問?http://username.github.io/時，GitHub 會使用 Jekyll 解析 用戶?username名下的username.github.io項目中，分支為master?的源代碼，為你構建一個靜態網站，并將生成的?index.html?展示給你。

關于這個目錄更多的內容，我們還不需要關心，如果你好奇心比較重，可以先看 后文源代碼一節。

看完上面的解釋，你可能會有一些疑問，因為按照上面的說法，一個用戶只能有一個 網站，那我有很多項目，每個項目都需要一個項目網站，該怎么辦呢？另外，在阮一峰 同學的文章中，特別提到，分支名應該為?gh-pages，這又是怎么回事呢？

原來，GitHub認為，一個GitHub賬號對應一個用戶或者一個組織，GitHub會 給這個用戶分配一個域名：username.github.io，當用戶訪問這個域名時， GitHub會去解析username用戶下，username.github.io項目的master分支， 這與我們之前的描述一致。

另外，GitHub還為每個項目提供了域名，例如，你有一個項目名為blog， GitHub為這個項目提供的域名為username.github.io/blog， 當你訪問這個域名時，GitHub會去解析username用戶下，blog項目的gh-pages?分支。

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

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

• 機制二

Jekyll 提供了插件功能，在網站源代碼目錄下，有一個名為?_plugins的目錄， 你可以將一些插件放進去，這樣，Jekyll在解析網站源代碼時，就會運行你的插件， 這樣插件是 Ruby 寫成的。可以為Jekyll添加功能，例如，Jekyll默認是不提供分類 頁面的，你可以寫一個插件，根據文章內容生成分類頁面。如果沒有插件，你只能每 次寫文章，添加分類時，為每個分類手動寫 HTML 頁面。

在本地運行 Jekyll 時，這些插件會自動被調用，但是GitHub在解析網站源代碼時， 出于安全考慮，會開啟安全模式，禁用這些插件。我們既想用這些插件，又想用 GitHub，怎么辦呢怎么辦呢？

GitHub還為我們提供了更一種解析網站的方式，那就是直接上傳最終的靜態網頁， 這樣，我們可以在本地使用 Jeklly 把網站解析出來，然后再上傳到 GitHub上， 這就使得我們既使用了插件，又使用了 GitHub。在上文的目錄結構中，有一個 名為?_site?的目錄，這個就是Jeklly在本地解析時最終生成的靜態網站，我們 把其中的內容上傳到 GitHub 的項目中就可以了。例如，我在GitHub上的網站， 既解析后的?_site?目錄，大概是這樣的:

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

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

工作流

關于 git 和 jekyll 的安裝與基本使用，這里就不多說了。

• 工作流一

如果你不使用插件，那么只需要維護一個分支就好:

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

其中?username?是你的 GitHub 帳號。

你需要在本地維護一份網站源代碼，添加新文章后，使用 jekyll 在本地測試一下， 沒有問題后，commit 到 GitHub 上的相應分支中就可以了。

• 工作流二

如果你需要使用插件，那么需要維護兩個分支，一個是網站的源代碼分支 ，另一個 是 由Jeklly 解析源代碼后生成的靜態網站。

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

Makefile 內容如下：

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"

下面的內容涉及源代碼，如果需要進一步學習，或者有問題，可以在?Jeklly 官網上找到更詳細的解釋，或者在評論中留言。

源代碼

再來看一下這個目錄結構：

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

• _config.yml

這是針對 Jekyll 的配置文件， 決定了 Jekyll 如何解析網站的源代碼,下面是一個示例：

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

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

• _layouts

這個目錄存放著一些網頁模板文件，為網站所有網頁提供一個基本模板，這樣 每個網頁只需要關心自己的內容就好，其它的都由模板決定。例如，這個目錄下的 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>

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

• index.html

這是網站的首頁，訪問?http://username.github.io?時，會指向?http://username.github.io/index.html，我們看一下基本內容：

--- layout: default title: 首頁 ---<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>

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

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

• _posts

這個目錄存放我們的所有博客文章，他們的名字有統一的格式：

YEAR-MONTH-DAY-title.MARKUP

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

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

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

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

• _includes

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

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

來引用這個文件的內容，方便代碼模塊化和重用。我的博客?主頁上的 分類，歸檔，這些模塊的代碼都是通過這種方式引用的。

• _plugins

這個文件中存放一些Ruby插件, 例如?gen_categories.rb，這些文件會在 Jekyll 解析網站源代碼時被執行。下一節講述的就是插件。

• _site

Jekyll 解析整個網站源代碼后，會將最終的靜態網站源代碼放在這里

插件

插件使用 Ruby 寫成，放在 _plugins 目錄下，有些 Jekyll 沒有的功能，又不能 手動添加，因為頁面的內容會隨著文章日期類別的不同而不同，例如分類功能和歸檔功能， 這時，就需要使用插件自動生成一些頁面和目錄。

• 分類 我的分類插件使用的是?jekyll-category-archive-plugin, 它會根據網站文章的分類信息，為每個類別生成一個頁面。

使用方法是，把?plugins/categoryarchive_plugin.rb 放在?plugins 目錄下， 把 _layouts/categoryarchive.html 放在?layouts 目錄下， 這樣，這個插件會在Jekyll解析網站時，生成相應categories目錄，目錄下是各個分類， 每個分類下都有一個?index.html?文件，這個文件是根據模板文件 categoryarchive.html 生成的，例如：

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

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

• 歸檔 我的歸檔插件使用的是?jekyll-monthly-archive-plugin,它會根據網站 _posts目錄下的文章日期，為每個月生成一個頁面。

使用方法同上。注意，這個插件在 jekyll-1.4.2 中可能會出錯，在 jekyll-1.2.0 中沒有錯誤。

組件

• 分頁

當文章很多時，就需要使用分頁功能，在 Jekyll 官網上提供了一種?實現，把相應代碼放在 主頁上，然后在?_config.yml?中設置?paginate?值就行了。

• 評論

評論功能需要使用外掛，我使用的是?DISQUS, 注冊 之后，將評論區的一段代碼放在你需要使用評論功能的頁面上, 然后，通過在頁面的 front-matter 部分使用

comments: true

啟用評論。此外，如果你 fork 了我的項目，需要修改 `_inclusds/comments.ext`，把里面的 `disqus_shortname ` 修改成你的博客短名，這個在注冊的時候會設置。

評論區截圖：

基本的內容就介紹到這里，任何問題，歡迎留言。

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

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

一個極簡風格的博客

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

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

博客首頁：飛鳥集。

要使用這個項目，你需要做的是：

1. 注冊 GitHub，例如你的用戶名為 minixbeta

2. 到?StrayBirds?點右上角的 fork

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

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

需要注意的是，第一次使用 GitHub Pages 時，可能會有較長時間的緩沖時間，過15min左右，才能正常訪問博客，請耐心等待。可以嘗試修改項目名稱來加快這一進程，如何修改后面有介紹。

另外，我又添加了評論系統，讓這個簡潔的博客更為完整，你需要到 Disqus 上注冊，然后添加一個站點，然后將 _confg.yml 中的 disqusname?修改成你的博客短名，這個在Disqus 的 Add Disqus To Site 的時候會設置，注意這里的對應關系。注意這個名字不是你的 Disqus 用戶名，是你的站點名。

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

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

主題包括：

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

kunka

如果你想把項目的名字改了，例如，將 StrayBirds 修改為 blog

那么，你需要做的是:

1. 在項目的 Setting 中將 Repository name 從 StrayBirds 修改為 blog

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

3. 通過?http://minixbeta.github.io/blog/ 來訪問你的新博客。

感謝

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.

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

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

總結

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

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