静态博客生成工具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选项，其实都是指当前博客的根路径，有重复之嫌，后期能够考虑优化一下代码。