Bubblings Blog

博客从wordpress迁到hexo 托管在github

用wordpress很长一段时间了,尽管wp很成熟,插件也比较多,功能也应有尽有。但是每次写东西的时候,都要经历一个繁琐的过程,很是让人不爽。之前的流程是这样:

编辑器里用markdown写内容 --> 插件导出html --> 粘贴到wp后台 --> 发布

当想修改文章的时候,又得重新来一遍。终于还是受不了了,于是抽出了几天时间了解了 hexo,觉得挺好用的,而且可以直接托管在github,连虚拟主机的费用都省了。而且hexo从写到发布流程也比较简单,只需两条命令就可以完成发布流程:

hexo g --> hexo d

迁到hexo的同时,也更换了新的域名 riny.net,旧的文章后期会选择性的迁过来一些。

hexo的使用

对于第一次接触hexo的用户来说,还是需要花点时间来了解下的,我是参考了下面的两篇文章,介绍的非常详细,所以对这里就不赘述了。

hexo你的博客
hexo系列教程

hexo主题

hexo主题是这次迁移博客花的时间最多的地方,https://github.com/tommy351/hexo/wiki/Themes,官方虽然也列出来了不少主题,大致看了一遍都不是太喜欢。于是就在hexo-theme-strict的基础上进行了修改,也就是现在用的这个主题,等以后对hexo熟悉之后再考虑自己开发一个主题。

这次主要对strict主题进行了以下修改:

  1. 增加了对IE7的兼容
  2. 将布局改为两栏式
  3. 增加了部分widget(about/categories/links)
  4. 使用多说作为默认评论组件,hexo-diy-strict/_config.yml中填写多说的short_name
  5. 其它细节处的样式调整

首页风格如下图:

hexo-diy-strict

修改后的主题源码也放到了github上,喜欢的可以下载下来使用,具体使用方法可参考说明

https://github.com/Bubblings/hexo-diy-strict

让html页面不被render

我们知道要想在博客的根目录添加资源(图片、html等),只需将对应的文件放在source目录下即可。但是经过测试发现,当把.html文件放在source目录下时,hexo也会把它当成.md文件去渲染。官方给出的方案是在html文件头部加上:

layout: false
---

很显然,如果页面过多的话,会比较坑。目前还没发现比较好的方案,于是尝试修改hexo的源码。在node安装目录\node_modules\hexo\lib\plugins\generator下有个page.js文件(ps: 测试的系统是win7 64位,hexo版本2.5.2),找到以下代码:

if (!layout || layout === 'false'){
  route.set(item.path, function(fn){
    fn(null, item.content);
  });
} else {
  render(item.path, [layout, 'page', 'post', 'index'], item);
}

将其修改为:

var notRender = ['test1', 'test2']; // 设置不被render的目录
var dir = path.substring(0, path.indexOf('/'));

if (!layout || layout === 'false' || notRender.indexOf(dir) > -1){
  route.set(item.path, function(fn){
    fn(null, item.content);
  });
} else {
  render(item.path, [layout, 'page', 'post', 'index'], item);
}

notRender中的test1, test2目录即为不需要被render的目录,保存后,重新执行hexo g命令就会发现source中的test1test2目录下的html文件没有被render。

另外感谢@xzper 和 @熙和 补充的通过hexo-processor-copyassets插件来解决的方案,详情请参考:

https://github.com/f111fei/hexo-processor-copyassets