Chunliang Lyu

I am a developer and researcher from China. Love to make fun and useful stuff. Co-founded Hyperlink.

Switch to Hexo

Published: 2014-12-03

Previously the website is generated using Jekyll, a really nice static site generator developed by GitHub. However, I have never loved Ruby and always want more control. After some digging and researching, Hexo came into my eye and I wanna give it a try. Hexo is a nice NodeJS-based static website generator developed by a Taiwan developer. Since I have some good experience with NodeJS, this gives me a chance to learn more about NodeJS.

After migrating posts to Hexo (which is really easy), I spent a few hours to make it suit my taste. The customized hexo starter kit is available on GitHub.

Replace Stylus with Scss

This is personal, I have no experience with Stylus, and I have been pretty happy with Scss. So goodbye Stylus.

Node-sass is prefered here since it is much more faster than the Ruby one, although has less features.

Replace EJS with Swig

As a guy coming from Flask/Jinja2 and AngularJS, I love template syntax like <div class="{{post.class}}">{{ post.content }}</p> instead of weird JS/html mixed syntax.

Self-hosted fonts

Both Google Fonts and Typekit is blocked in China, so I have to host the fonts by myself. I have chosen Open Sans, Source Code Pro and FontAwesome, like everybody else.

@font-face {
  font-family: 'Source Code Pro';
  src: url('/fonts/SourceCodePro-Regular.otf.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fontawesome-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Note: Only woff format is supported, so Goodbye to IE8 or older, Opera Mini.

Lets use bower

It is already 2014, and everyone deserves a nice package manager and build system. I hacked the theme system to allow the use of bower packages.

Don't forget gulp

Everything is wrapped in some gulp task. I know this is a bit paranoid. But hey, I do not have to install the hexo package globally.

var $ = require('gulp-load-plugins')();
gulp.task('serve',
   $.shell.task(['node_modules/hexo/bin/hexo server'])
);

gulp.task('build',
   $.shell.task(['node_modules/hexo/bin/hexo generate'])
);

For deployment, instead of the built-in deploy command, I have switched to gulp-gh-pages.


Hi Hexo-admin

Another reason I chose Hexo is the hexo-admin plugin. When I use Jekyll, I am always looking forward a web UI that allow me write in the browser. I know there is Prose, but I want something more powerful and flexible like the Ghost editor. Now I have found my answer.

Thanks to GitHub Pages and CloudFlare

Now the website is hosted on GitHub Pages. The SSL site is made possible by CloudFlare. Big thanks to those awesome guys.