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

我首先用的是 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