1. 程式人生 > >用 Github + Jekyll 寫部落格

用 Github + Jekyll 寫部落格

只需要三步,就可以在 Github 搭建起一個部落格:

  • 在 Github 上建一個名為 xxx.github.io 的庫;
  • 把看中了的 Jekyll 模板 clone 到本地;
  • 把這個模板 push 到自己的庫;

在 Github 建立名為 hyaojia.github.io 的庫

  • 按照 Github Pages 上的說明,首先要建立一個新的庫,把它命名為 hyaojia.github.io。.io 是英屬印度洋領地的頂級域名,部落格搭建成功後,這就是該部落格的訪問網址。庫名的第一部分需要與使用者名稱一致才能生效。所以如果你的使用者名稱是 the10thdoctor,庫的名字就要 the10thdoctor.github.io。另外,不需要勾選「Initialize this repository with a README」。
  • 建立成功後,會跳轉到一個頁面(如果你勾選了「Initialize this repository with a README」,則看不到這個頁面),提示把已經建立的庫 clone 到本地,或者輸入以下命令:
    echo "# hyaojia.github.io" >> README.md
    git init
    git add README.md
    git commit -m "first commit"
    git remote add origin https://github.com/hyaojia/hyaojia.github.io.git
git push -u origin master
  • 我們不按這些來做。為了理解這些指令,這裡我們先一條一條地看看這些指令到底是什麼意思。在前一篇,我們解釋過第二、三和四步的意思。這裡再簡單地說一次,目的是弄明白每一個命令到底是什麼:
  • 首先,我們在本地建立一個同名資料夾 hyaojia.github.io (之所以這樣做,是為了與在網站上的庫保持一致。如果我們直接把 Github 上建立的庫 clone 到本地,就是一個同名的資料夾;但我們選擇不直接 clone,而是自己建立一個,目的只是學習這些指令):
    $ mkdir hyaojia.github
.io $ cd hyaojia.github.io
  • 第一行 echo “# hyaojia.github.io” >> README.md。命令 echo 起「display a line of text」的作用,>> 則起「輸出到檔案」的作用。所以整行翻譯成中文,就是把 echo 的輸出(也就是引號裡的「# hyaojia.github.io」),輸入到 README.md 這個檔案裡。輸入這行後,在當前資料夾就會出現一個名為 README 的 markdown 檔案,裡面有一行 ‘# hyaojia.github.io’;
  • 第二行 git init,把當前資料夾 Git 初始化;
  • 第三行,git add README.md,把 README.md 加到 Staged Area;
  • 第四行,git commit -m “first commit”, 把 README.md 的資訊寫到 .git 裡,相當於給這個檔案在當前的時刻截了圖,這要找到這次 commit 的雜湊碼,就總能返回這個時刻的狀態;
  • 第五行,我們沒遇到過。先不執行這行,我們輸入 git remote -v,會發現什麼都沒有,也就是說,我們的 Git 資料夾還沒有繫結任何的遠端庫(remote repository)。現在輸入第五行
    $ git remote add origin https://github.com/hyaojia/hyaojia.github.io.git
    再輸入 git remote -v,則會出現
    origin  https://github.com/hyaojia/hyaojia.github.io.git (fetch)
    origin  https://github.com/hyaojia/hyaojia.github.io.git (push)
  • 所以,這一行的意思是,給我們本地的 Git 資料夾登記一個遠端庫,然後在第六行的時候,它就知道該把資料夾裡的內容推送到哪裡去了。更詳細一點:命令 git remote 等於是告訴 Git 我們要關於遠端庫(remote)做點什麼;add 表明要登記一些資訊;origin 是我們給那個遠端庫的名字,沒有必要一定要叫 origin,只是習慣如此,可以叫任何名字,比如 tardis;最後就是要告訴 Git 那個遠端庫的具體地址是什麼。
  • 如果我又建立另一個叫做 Tardis 的庫,它的地址是 https://github.com/hyaojia/tardis.git,我也可以把這個地址登記到我們本地的 hyaojia.github.io 資料夾裡。輸入
    $ git remote add tardis https://github.com/hyaojia/tardis.git
    再輸入 git remote -v,則會出現
    origin  https://github.com/hyaojia/hyaojia.github.io.git (fetch)
    origin  https://github.com/hyaojia/hyaojia.github.io.git (push)
    tardis  https://github.com/hyaojia/tardis.git (fetch)
    tardis  https://github.com/hyaojia/tardis.git (push)
  • 第六行,git push -u origin master,意思就是把我們本地目錄 master 分支(branch)裡的檔案,推送到(push)名為 origin 實際上代表作 https://github.com/hyaojia/hyaojia.github.io.git 這個地址的庫。我們本地在哪個分支,就會推送到遠端庫的哪個分支。再直白一點,命令 git push 是告訴 Git,我要推送當前資料夾裡的東西到某個地方了,origin 指向我們要把內容推向的那個遠端庫,後面的 master 則是想要推向遠端庫的、本地的分支。假設,我們想要把本地一個名為 timeVortex 的分支裡的檔案,推送到一個名為 tardis 的遠端庫(無論我們當前到底是處在哪個分支),那麼我們就輸入 git push tardis timeVortex,那樣子,timeVortex 分支裡的檔案就會被推送到 tardis 庫的一個同樣叫做 timeVortex 的分支上。那麼,如果希望把本地 master 分支上的檔案推送到遠端庫裡的 doctor 分支上,又該怎樣做呢?可以輸入 git push origin master:doctor。冒號前面是本地的分支,冒號後面是遠端的分支。
  • 以上只是講解,沒有必要跟著做。但我還是希望你跟著做了,這樣也許會更明白每一步到底發生了什麼作用。現在,我們可以把 xxx.github.io 資料夾刪掉,再進行下一步。

選擇模板

  • 再次重新從零出發。這一次從選模板開始。
  • 現在 Jekyll 有很多好看的模板,可以到 jekyllthemes.org 上尋找自己喜歡的。我這裡用的模板是小改自 Skinny Bones,其他比較喜歡的有 Scribble 和 Long Haul,Incorporated 則比較適合用來做公司網站。
  • 本文餘下部分用 Scribble 為例。
  • 把部落格託管到 Github Pages
  • 首先,我們把 Scribble 這個庫 clone 到本地:
    $ git clone https://github.com/hyaojia/scribble.git
  • 把名為 scribble 的資料夾改名為 hyaojia.github.io (不必要,理由跟之前一樣,只是為了比較好找),只需要下面這行命令(mv 是移動資料夾的命令,可是也能用來重新命名檔案。我明白,一開始這很難理解):
    $ mv scribble hyaojia.github.io
  • 然後我們可以進入現在叫 hyaojia.github.io 的資料夾裡:
    $ cd hyaojia.github.io
  • 一般而言,克隆了別人的模板,第一件事要做的就是修改 _config.yml 裡的個人資訊。在 scribble 這個模板中,修改的地方不多,只需要把導航欄相關的連線修改成自己的就可以了,比如 Blog 的 url 改成 http://hyaojia.github.io,郵件和 Github 帳號改成自己的帳號。
  • 只要修改過檔案,我們就需要重複 git add 和 git commit 這兩步:
    $ git add .
    $ git commit -m 'modified _config.yml'
  • git add . 裡的一點,指把當前目錄所有修改過的檔案都加到 Staged Area 去。
  • 前面我們說過 git remote -v。因為我們直接 clone 了別人的庫,所以 clone 下來的資料夾裡,已經登記了模板作者的遠端庫資訊:
    $ git remote -v
    origin  https://github.com/muan/scribble.git (fetch)
    origin  https://github.com/muan/scribble.git (push)
  • 我們要把 origin 的地址改成我們之前建立的 hyaojia.github.io 庫的地址:
    $ git remote set-url origin https://github.com/hyaojia/hyaojia.github.io.git
    $ git remote -v
    origin  https://github.com/hyaojia/hyaojia.github.io.git (fetch)
    origin  https://github.com/hyaojia/hyaojia.github.io.git (push)
  • 現在已經變成我們自己的了。

把模板 push 到自己的庫

  • 最後輸入
    $ git push -u origin master
  • 如果沒有繫結 SSH key,一般會要求輸入使用者名稱和密碼。輸入後則會出現
    Counting objects: 268, done.
    Delta compression using up to 4 threads.
    Compressing objects: 100% (187/187), done.
    Writing objects: 100% (268/268), 224.02 KiB | 0 bytes/s, done.
    Total 268 (delta 76), reused 268 (delta 76)
    To https://github.com/hyaojia/hyaojia.github.io.git
    * [new branch]      master -> master
  • 如果沒有修改模板的需求,利用 Git + Github + Jekyll 搭建部落格大概就是這樣子。寫文章,只需要在 _post/ 檔案加中,加入帶有 YAML 頭資訊(YAML front matter)的 markdown 檔案,然後 push 到 Github,就會被自動渲染成 HTML。比如,增加一篇名為 My First Post 的部落格,在本地建立一個檔名帶有日期的 markdown 檔案 2015-04-20-my-first-post.md(裡面要寫好頭資訊):
    ---
    layout: post
    title: My First Post
    ---
    這是我的第一篇部落格
  • 最後按上述方法(git add / git commit / git push)推送到 Github,就大功告成了。

fork時注意的

  • fork庫到自己的github
  • 修改名字為:username.github.io
  • clone庫到本地,參考_posts中的目錄結構自己建立適合自己的文章目錄結構
  • 修改CNAME,或者刪掉這個檔案,使用預設域名,這個檔案是重新指定域名的
  • 修改_config.yml配置項

使用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自己的域名下新增一條A記錄,地址就是Github Pages的服務IP地址:207.97.227.245
  • 在域名註冊商處修改DNS服務:去Godaddy修改Nameservers為這兩個地址:f1g1ns1.dnspod.net、f1g1ns2.dnspod.net。如果你不明白在哪裡修改,可以參考這裡:Godaddy註冊的域名如何使用DNSPod
  • 等待域名解析生效

配置和使用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:
    $ cd ~/.ssh
  • 如果顯示“No such file or directory”,跳到第三步,否則繼續。

備份和移除原來的ssh key設定:

  • 因為已經存在key檔案,所以需要備份舊的資料並刪除:
    $ ls
    config  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了
  • The keys randomart image is: 一個看不懂的圖案

新增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’ 命令單獨設定使用者賬戶資訊

測試一下

  • 可以輸入下面的命令,看看設定是否成功,[email protected]的部分不要修改:
    $ 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 "[email protected]"

使用GitHub Pages建立部落格

  • 與GitHub建立好連結之後,就可以方便的使用它提供的Pages服務,GitHub Pages分兩種,一種是你的GitHub使用者名稱建立的username.github.io這樣的使用者&組織頁(站),另一種是依附專案的pages。

User & Organization Pages

  • 想建立個人部落格是用的第一種,形如beiyuu.github.io這樣的可訪問的站,每個使用者名稱下面只能建立一個,建立之後點選Admin進入專案管理,可以看到是這樣的:
  • user pages
  • 而普通的專案是這樣的,即使你也是用的othername.github.io:
  • other pages
  • 建立好username.github.io專案之後,提交一個index.html檔案,然後push到GitHub的master分支(也就是普通意義上的主幹)。第一次頁面生效需要一些時間,大概10分鐘左右。
  • 生效之後,訪問username.github.io就可以看到你上傳的頁面了,beiyuu.github.io就是一個例子。
  • 關於第二種專案pages,簡單提一下,他和使用者pages使用的後臺程式是同一套,只不過它的目的是專案的幫助文件等跟專案繫結的內容,所以需要在專案的gh-pages分支上去提交相應的檔案,GitHub會自動幫你生成專案pages。具體的使用幫助可以參考Github Pages的官方文件:

繫結域名


    • 我們在第一部分就提到了在DNS部分的設定,再來看在GitHub的配置,要想讓username.github.io能通過你自己的域名來訪問,需要在專案的根目錄下新建一個名為CNAME的檔案,檔案內容形如:
    beiyuu.com
  • 你也可以繫結在二級域名上:
    blog.beiyuu.com
  • 需要提醒的一點是,如果你使用形如beiyuu.com這樣的一級域名的話,需要在DNS處設定A記錄到207.97.227.245(這個地址會有變動,這裡檢視),而不是在DNS處設定為CNAME的形式,否則可能會對其他服務(比如email)造成影響。
  • 設定成功後,根據DNS的情況,最長可能需要一天才能生效,耐心等待吧。

Jekyll模板系統

  • GitHub Pages為了提供對HTML內容的支援,選擇了Jekyll作為模板系統,Jekyll是一個強大的靜態模板系統,作為個人部落格使用,基本上可以滿足要求,也能保持管理的方便,你可以檢視Jekyll官方文件。
  • 你可以直接fork我的專案,然後改名,就有了你自己的滿足Jekyll要求的文件了,當然你也可以按照下面的介紹自己建立。

Jekyll基本結構

  • Jekyll的核心其實就是一個文字的轉換引擎,用你最喜歡的標記語言寫文件,可以是Markdown、Textile或者HTML等等,再通過layout將文件拼裝起來,根據你設定的URL規則來展現,這些都是通過嚴格的配置檔案來定義,最終的產出就是web頁面。
  • 基本的Jekyll結構如下:
    |-- _config.yml
    |-- _includes
    |-- _layouts
    |   |-- default.html
    |   `-- post.html
    |-- _posts
    |   |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
    |   `-- 2009-04-26-barcamp-boston-4-roundup.textile
    |-- _site
`-- index.html

簡單介紹一下他們的作用:

_config.yml
  • 配置檔案,用來定義你想要的效果,設定之後就不用關心了。
_includes
  • 可以用來存放一些小的可複用的模組,方便通過{ % include file.ext %}(去掉前兩個{中或者{與%中的空格,下同)靈活的呼叫。這條命令會呼叫_includes/file.ext檔案。
_layouts
  • 這是模板檔案存放的位置。模板需要通過YAML front matter來定義,後面會講到,{ { content }}標記用來將資料插入到這些模板中來。
_posts
  • 你的動態內容,一般來說就是你的部落格正文存放的資料夾。他的命名有嚴格的規定,必須是2012-02-22-artical-title.md這樣的形式,MARKUP是你所使用標記語言的檔案字尾名,根據_config.yml中設定的連結規則,可以根據你的檔名靈活調整,文章的日期和標記語言字尾與文章的標題的獨立的。
_site
  • 這個是Jekyll生成的最終的文件,不用去關心。最好把他放在你的.gitignore檔案中忽略它。
其他資料夾

你可以建立任何的資料夾,在根目錄下面也可以建立任何檔案,假設你建立了project資料夾,下面有一個github-pages.md的檔案,那麼你就可以通過yoursite.com/project/github-pages訪問的到,如果你是使用一級域名的話。檔案字尾可以是.html或者markdown或者textile。這裡還有很多的例子:https://github.com/mojombo/jekyll/wiki/Sites

Jekyll的配置

  • Jekyll的配置寫在_config.yml檔案中,可配置項有很多,我們不去一一追究了,很多配置雖有用但是一般不需要去關心,官方配置文件有很詳細的說明,確實需要了可以去這裡查,我們主要說兩個比較重要的東西,一個是Permalink,還有就是自定義項。
  • Permalink項用來定義你最終的文章連結是什麼形式,他有下面幾個變數:
> * year 檔名中的年份
> * month 檔名中的月份
> * day 檔名中的日期
> * title 檔名中的文章標題
> * categories 文章的分類,如果文章沒有分類,會忽略
> * i-month 檔名中的除去字首0的月份
> * i-day 檔名中的除去字首0的日期
  • 看看最終的配置效果:
> * permalink: pretty /2009/04/29/slap-chop/index.html
> * permalink: /:month-:day-:year/:title.html /04-29-2009/slap-chop.html
> * permalink: /blog/:year/:month/:day/:title /blog/2009/04/29/slap-chop/index.html
  • 我使用的是:
> * permalink: /:title /github-pages
  • 自定義項的內容,例如我們定義了title:BeiYuu的部落格這樣一項,那麼你就可以在文章中使用{ { site.title }}來引用這個變量了,非常方便定義些全域性變數。

YAML Front Matter和模板變數

  • 對於使用YAML定義格式的文章,Jekyll會特別對待,他的格式要求比較嚴格,必須是這樣的形式:
    ---
    layout: post
    title: Blogging Like a Hacker
    ---
  • 前後的—不能省略,在這之間,你可以定一些你需要的變數,layout就是呼叫_layouts下面的某一個模板,他還有一些其他的變數可以使用:
> * permalink 你可以對某一篇文章使用通用設定之外的永久連結
> * published 可以單獨設定某一篇文章是否需要釋出
> * category 設定文章的分類
> * tags 設定文章的tag
  • 上面的title就是自定義的內容,你也可以設定其他的內容,在文章中可以通過{ { page.title }}這樣的形式呼叫。

使用Disqus管理評論

  • 模板部分到此就算是配置完畢了,但是Jekyll只是個靜態頁面的釋出系統,想做到關爽場倒是很容易,如果想要評論呢?也很簡單。
  • 現在專做評論模組的產品有很多,比如Disqus,還有國產的多說,Disqus對現在各種系統的支援都比較全面,到寫部落格為止,多說現在僅是WordPress的一個外掛,所以我這裡暫時也使用不了,多說與國內的社交網路緊密結合,還是有很多亮點的,值得期待一下。我先選擇了Disqus。
  • 註冊賬號什麼的就不提了,Disqus支援很多的部落格平臺
  • 我們選擇最下面的Universal Code就好,然後會看到一個介紹頁面,把下面這段程式碼複製到你的模板裡面,可以只複製到顯示文章的模板中:
    <div id="disqus_thread"></div>
    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'example'; // required: replace example with your forum shortname 這個地方需要改成你配置的網站名
        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
  • 配置完之後,你也可以做一些非同步載入的處理,提高效能,比如我就在最開始頁面開啟的時候不顯示評論,當你想看評論的時候,點選“顯示評論”再載入Disqus的模組。程式碼很簡單,你可以參考我的寫法。
    $('#disqus_container .comment').on('click',function(){
            $(this).html('載入中...');
            var disqus_shortname = 'beiyuu';
            var that = this;
            BYB.includeScript('http://' + disqus_shortname + '.disqus.com/embed.js',function(){$(that).remove()}); //這是一個載入js的函式
    });
  • 如果你不喜歡Disqus的樣式,你也可以根據他生成的HTML結構,自己改寫樣式覆蓋它的,Disqus現在也提供每個頁面的評論數介面,幫助文件在這裡可以看到。

程式碼高亮外掛

  • 如果寫技術部落格,程式碼高亮少不了,有兩個可選外掛DlHightLight程式碼高亮元件和Google Code Prettify。DLHightLight支援的語言相對較少一些,有js、css、xml和html,Google的高亮外掛基本上任何語言都支援,也可以自定義語言,也支援自動識別,也有行號的特別支援。
  • Google的高亮外掛使用也比較方便,只需要在
    的標籤上加入prettyprint即可。所以我選擇了Google Code Prettify。

搭建本地jekyll環境

  • 這裡主要介紹一下在Mac OS X下面的安裝過程,其他作業系統可以參考官方的jekyll安裝
  • 作為生活在水深火熱的牆內人民,有必要進行下面一步修改gem的源,方便我們更快的下載所需組建:
    sudo gem sources --remove http://rubygems.org/
    sudo gem sources -a http://ruby.taobao.org/
  • 然後用Gem安裝jekyll
    $ gem install jekyll
  • 不過一般如果有出錯提示,你可能需要這樣安裝:
    $ sudo gem install jekyll
  • 我到了這一步的時候總是提示錯誤Failed to build gem native extension,很可能的一個原因是沒有安裝rvm,rvm的安裝可以參考這裡,或者敲入下面的命令:
    $ curl -L https://get.rvm.io | bash -s stable --ruby
  • 然後還需要安裝Markdown的直譯器,這個需要在你的_config.yml裡面設定markdown:rdiscount:
    $ gem install jekyll rdiscount
  • 好了,如果一切順利的話,本地環境就基本搭建完成了,進入之前我們建立的部落格目錄,執行下面的命令:
    $ jekyll serve --watch
  • 這個時候,你就可以通過localhost:4000來訪問了。還有關於jekyll bootstrap的資料,需要自己修改除錯的,可以研究一下。
  • 我在這個過程中還遇到兩個詭異的沒有解決的問題,一個是我放在根目錄下面的blog.md等檔案,在GitHub的pages服務上一切正常,可以通過beiyuu.com/blog訪問的到,但是在本地環境下,總是not found,很是讓人鬱悶,看生成的_site目錄下面的檔案,也是正常的blog.html,但就是找不到,只有當我把URL改為localhost:4000/blog.html的時候,才能訪問的到,環境不同真糟糕。
  • 還有一個是關於category的問題,根據YAML的語法,我們在文章頭部可以定義文章所屬的類別,也可以定義為category:[blog,rss]這樣子的多類別,我在本地試一切正常,但是push到GitHub之後,就無法讀取了,真讓人著急,沒有辦法,只能採用別的辦法滿足我的需求了。這裡還有一篇Jekyll 本地除錯之若干問題,安裝中如果有其他問題,也可以對照參考一下。

結語

  • 如果你跟著這篇不那麼詳盡的教程,成功搭建了自己的部落格,恭喜你!剩下的就是保持熱情的去寫自己的文章吧。