靜態博客生成工具cabin及其中文化

1.使用緣由

許久前無心發現一個node作的靜態博客生成工具——Cabin，感受非常欣喜。其實使用這種靜態博客生成工具，十有八九是用在github pages上的，github官方推薦的是jekyll，可是這個是基於ruby，固然這不是重點，重點是在windows上安裝jekyll實在太困難。

2.初始化配置

Cabin的技術棧也比較長，牽扯到Node.js、Python（安裝Pygments須要）、Compass（須要ruby運行環境，安裝教程）。ruby推薦安裝1.9.3版本，不然在XP環境下安裝Compass會失敗，其餘兩個環境安裝都不會遇到什麼困難。

3.建立博客

接着安裝Cabin自己，運行

npm install -g cabin grunt-cli

運行完成以後，你就能夠用使用cabin new命令來建立博客了:

cabin new blog CabinJS/Candy

其中第一個參數blog表明博客文件要存放的文件夾路徑，這裏是在當前命令運行目錄下的blog文件夾；而後第二個參數CabinJS/Candy表明使用的模板，它實際上是github項目地址的縮寫，CabinJS表明github用戶名，Candy表明CabinJS用戶建立的Candy項目。
運行的時候，會遇到兩個須要輸入的地方，一個是選擇使用的模板引擎，支持jade和ejs兩種；一個是選擇部署環境，能夠選擇不使用、github pages、Amazon S三、或者任意一個FTP服務器。而後就是一些列的依賴下載。

4.編譯和中文化

等一些安裝好以後運行cd blog命令進入blog文件夾，而後運行grunt命令來執行一系列的編譯工做，編譯完成以後就會啓動本地的測試服務器，而且打開瀏覽器預覽編譯的結果。
可是當你預覽生成的結果時，卻發現網頁沒法正常的顯示，這是裏面引用的靜態js、css資源都是來源於國外的，在大陸無法訪問，因而乎我作了一個適合國內訪問的模板。搭建運行cabin new命令的時候將第二個參數改爲yunnysunny/Candy便可。在這個模板中將社會化組件換成了國內經常使用的多說
，而後就是須要配置一下多說，建立完多說帳號和應用以後，選擇剛纔建立的應用進入後臺管理，點擊左側工具菜單，顯示的通用代碼就是咱們要改造的對象。

圖4.1 多說示例代碼
其實這段代碼已經被放置在生成博客目錄下src/layouts/_social.ejs下，用文本編輯器打開這個文件：

<a name="comments"></a>
<!-- 多說評論框 start -->
<div class="ds-thread" data-thread-key="<%= post.url %>" data-title="<%= post.title %>" data-url="http://blog.whyun.com<%= data.baseUrl %><%= post.url %>"></div>
<!-- 多說評論框 end -->
<!-- 多說公共JS代碼 start (一個網頁只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"whyun"};//把這個地方替換成多說帳號
(function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多說公共JS代碼 end -->

代碼4.1 模板中的評論部分代碼
修改上述代碼中的data-url的前綴爲你的博客根地址，並把var duoshuoQuery = {short_name:"whyun"}替換成多說項目的簡稱，若是不會設置能夠直接從多說後臺示例代碼中拷貝（圖4.1中標紅部分）。

5.markdown編寫

首先看一下安裝後的目錄結構：

圖5.1 cabin目錄結構
其中目錄posts部分即爲markdown存放路徑，隨便打開裏面預置的一個文件，在markdown文件頭部會出現以下格式的說明信息：

{
  title: "Markdown Test",
  date:   "2013-08-4",
  description: "Posting using all supported markdown features"
}

代碼 5.1文件markdownTest.md頭部信息
這個頭部聲明是必需要寫的，不然沒法編譯經過，其中title爲文章標題，這個會在文章開頭的添加一個H1標籤，因此在markdown正文中無需再寫標題了，不然會在生成的文章中含有兩個標題；date爲文章發佈時間；description爲文章簡介。

6.生成RSS和sitemap

官方自帶的模板是支持RSS生成的，其實在國內咱們作博客很看重的一點仍是SEO，因此我又在官方的基礎上增長了生成了sitemap的功能，因此說生成sitemap的功能必須使用我在前文提到的yunnysunny/Candy模板。
進入剛纔建立的blog目錄，會發現文件Gruntfile.js，摘錄其中一段以下：

jsonpages: {
  posts: {
    src: 'posts',
    dest: 'dist',
    layout: 'src/layouts/post.ejs',
    url: 'posts/:title/',
    options: {
      pageSrc: 'src/pages',
      data: {
        baseUrl: '/'
      },
      pagination: {
        postsPerPage: 2,
        listPage: 'src/pages/index.ejs'
      }
    }
  }
}

代碼 6.1
在pages屬性中添加rss和sitemap的配置便可：

jsonpages: {
    options: {
        pageSrc: 'src/pages',
        rss: {
          title: '白一梓的我的博客',
          author:'白一梓',
          description: 'A blog about tech.',
          url: 'http://blog.whyun.com'
        },
        sitemap:{
          url:'http://blog.whyun.com'
        }
    },
    posts: {
        src: 'posts',
        dest: 'dist',
        layout: 'src/layouts/post.ejs',
        url: 'posts/:title/',
        options: {
          pageSrc: 'src/pages',
          data: {
            baseUrl: '/'
          },
          pagination: {
            postsPerPage: 2,
            listPage: 'src/pages/index.ejs'
          }
        }
    }
}

代碼 6.2
其中rss和sitemap中都有一個url選項，其實都是指當前博客的根路徑，有重複之嫌，後期能夠考慮優化一下代碼。