静态博客生成工具cabin及其中文化

2019年9月5日 122次阅读 来源: 白一梓

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 S3、或者任意一个FTP服务器。然后就是一些列的依赖下载。

4.编译和中文化

等一些安装好之后运行cd blog命令进入blog文件夹，然后运行grunt命令来执行一系列的编译工作，编译完成之后就会启动本地的测试服务器，并且打开浏览器预览编译的结果。
但是当你预览生成的结果时，却发现网页无法正常的显示，这是里面引用的静态js、css资源都是来源于国外的，在大陆没法访问，于是乎我做了一个适合国内访问的模板。搭建运行cabin new命令的时候将第二个参数改成yunnysunny/Candy即可。在这个模板中将社会化组件换成了国内常用的多说
，然后就是需要配置一下多说，创建完多说账号和应用之后，选择刚才创建的应用进入后台管理，点击左侧工具菜单，显示的通用代码就是我们要改造的对象。
《静态博客生成工具cabin及其中文化》
图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编写

首先看一下安装后的目录结构：
《静态博客生成工具cabin及其中文化》
图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选项，其实都是指当前博客的根路径，有重复之嫌，后期可以考虑优化一下代码。

    原文作者：白一梓
    原文地址: https://segmentfault.com/a/1190000003001737
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞