Blogging with Hexo

一直都想写blog, 总觉得很多想法值得写一写的。 下定决心要写是在看了刘未鹏神牛的 暗时间 之后。 于是先是在blogspot上随便搞了一个,没指望有人看。后来就删了那边,把东西都迁移到了hexo上。

hexo 是一个基于Node.js的static blogging system。 它的作者是台湾人, 可以看到github issue里 有好多中文的。它的使用与Octopress 类似,也兼容Octopress的好多插件,但以快速简洁为亮点, 因为前者是ruby写的。

Theme Rendering

可以在themes目录下安装不同主题,通过配置选项选择。 主题包括_config.yml, layout, languages, source目录。

_config.yml通过yml格式配置主题选项, 一般包括使用的页面侧边栏插件, google analytics账号, 社交账号等。 所有选项会被传入到模板代码中, 可以在模板中通过theme.***访问。

languages里是一些单词的多语言形式, 在根目录的_config.yml里配置了语言之后就会用对应的词典。

layout目录中是页面模板文件, 使用ejs格式。 每个页面的渲染都以layout.ejs为入口,向它传入body参数。 例如主页的话body就是index.ejs, 文章的话就是传了item参数的post.ejs。 按hexo惯例, 下划线开头的文件不被渲染, _partial里就有不少不完全的模板代码。

source目录将与根目录下的source用相同方式渲染: 忽略所有下划线开头文件, 其他文件按照扩展名采取对应渲染方式, 全部放到最终的根目录里。 themes里的source目录一般只装一些css, js和界面需要的静态图片。 css使用stylus, 同样是include_partial目录中的文件, 维护起来十分方便。

Posts Rendering

Post放在根目录下的source/_posts, 这是唯一的以下划线开头但会被渲染的目录。 且其中的文章渲染后还会被加到对应的tag和category上。 文章默认使用markdown, 也可以支持jade。 头部使用yaml配置此文章的选项, 传入模板后可通过item.***访问, 支持自定义的选项名。 layout选项可以指定此文章的布局, 渲染时会应用scaffolds里对应的模板。还有时间、标题、标签等, 详见文档.

markdown渲染支持一些特殊形式, 比如图片, 引用, 代码(jsFiddle, gist), 通过octopress tag的方式书写。 代码高亮使用highlight.js, 但貌似不能选hljs的配色, 于是我在css里自己附了 monokai的源文件。

TOC Generation

hexo的markdown渲染引擎使用的是marked, 因为它号称自己很快。但是marked不支持目录生成, hexo内好像也不适合用插件实现目录生成, 我就写了一个js和一点模板, 使得可以利用markdown头部yaml选项来选择是否生成目录, 比如这篇文章。

Themes

hexo出来貌似才一年左右, 而且多数人可能拿来用着自己hack玩, 很少有成熟的主题。 github上能看到的且还稍微能看的大概只有light(默认主题), phase, pithiness, memoir 几个。

我首先用的是phase, 因为作者称它是最好的hexo主题, 但是由于它背景里会动的球通过js setInterval不停刷新实现, 会让浏览器cpu占用过高, 觉得太坑访客了。 就一直用着没有球的版本, 大概是这样(左), 实在是很丑。。

于是有天我想起来换主题了, 就换了一个pithiness(右)。 这其实是我美化过的。。本来的还更丑。看了几天之后就觉得不爽了, 再加上被人吐槽界面。 于是狠狠心自己开始写, 从pithiness开始改, 参照了别人的blog, 最后改成了现在这个样子。 第一次写前端, 果然是大坑啊大坑花了好久好久。

谢@xzy同学毫不留情地吐槽界面。。

Admin

hexo支持外部插件也很容易, google analytics, disqus, addthis什么的都是直接config里填一个id就能用了。 其他东西往模板里装就好。第一次用google analytics觉得好高端...

hexo支持多种部署方式, 由于是static blogging, 可以直接部署到heroku, github pages上, 也可以rsync到server上, 都是直接在配置里填上必要的id之类的就行。 部署用简单的命令就行, 不过我还是偷懒写到了Makefile里。。

这个blog目前暂时托管在清华东主楼内一台机器。。上面的虚拟机上。 貌似性能挺差的, dnspod的监控还经常报告我说网站无法访问了不知道怎么回事。

Problems

  • 发现用hexo生成静态时, 对于本地文件的更新偶尔会失败, 需要rm -rf public db.json后重新生成。 不过难以重现也就没报bug, 不过这是我把任务放到Makefile里管理的主要原因(因为重新生成一遍也只要2秒).

  • 之前写关于vim的东西的时候就说highlight.js不支持vimscript语法不太爽.. 这个已经想到一个解决方案了打算有空试一试

然后我写了一个hexo插件, 通过渲染时调用外部vim, 实现网页上显示vim的代码高亮, 那篇介绍vim配置 的文章大量使用了它..

Comments