Hexo - Blogging Without Disks

I feel like I have gone a full circle from my early days writing my blogs (or weblogs) in flat files as opposed to storing content in a database through a content management system (CMS). Prior to using Wordpress, I was heavily invested in developing with Drupal, and consider myself privileged to have used the knowledge of both platforms for work. All of sudden now, I have an urge to go back to my roots and focusing on creating blog posts without the bells and whistles.

So instead of manipulating raw HTML tags, I found a neat little tool written in Node.js that allows me to write posts and pages in Markdown, while making use templates and plugins to generate the ubiquitous Web 2.0 technologies with minimal effort. It is called Hexo. I am not going through the basics of how to install and configure a blog site using Hexo as I find the documentation concise but comprehensive enough to get anyone started.

However, what I think might be helpful is what I did to further customize the size to my taste.

1. Migrating Posts from the Old WordPress Website

I have a few posts on my previous blog and wanted to move over as many posts and pages as I could. The simple procedure from the section on migrating from other blog platforms is easy to follow. For WordPress though, You do have a choice on what you want to export and you can opt to export only posts if that is all that you needed to move over. Once you have a copy of the export XML file, copy that over to your site folder (<site-folder>) and run the command $ hexo migrate wordpress my_wordpress_site.xml. That will convert your posts (in XML format) to individual Markdown files. Posts and drafts are placed in separate folders and you can find them in <site-folder>/source/_posts and <site-folder>/source_drafts respectively. If you need to move them around, here's your chance!

2. Theming

This is probably one of the most important tasks!

Out of the box, Hexo provides you with the Landscape theme. You might also have realized that the box titles on the sidebar are written in Chinese. If you are reading this post in English, I'm gonna guess that this isn't what you want. The quick fix is to copy the file <site-folder>/themes/landscape/languages/defaut.yml and name it en.yml.

For me though, it's a no-brainer to seek out an alternative theme. I started out with the theme based on Zurb's Foundation, but found myself wandering back to Bootstrap as that is a framework that I am currently more familiar with. So I decided to grab a copy of the Bootstrap-based theme instead. Be sure to follow the instructions on what else to install and configure to get the theme running correctly for your website.

3. Plugins

That's easy to share. Here's a list that wasn't too hard for me to compile:

{
  ...
  "dependencies": {
    "hexo": "^3.1.1",
    "hexo-front-matter-excerpt": "^0.2.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-sitemap": "^1.1.2",
    "hexo-generator-tag": "^0.2.0",
    "hexo-migrator-wordpress": "^0.1.2",
    "hexo-renderer-ejs": "^0.1.1",
    "hexo-renderer-marked": "^0.2.9",
    "hexo-renderer-stylus": "^0.3.0",
    "hexo-server": "^0.1.3",
    "hexo-tag-bootstrap": "0.0.8",
    "hexo-tag-fontawesome": "^1.0.0"
  }
}

Bear in mind though, that this is a dynamic compilation and will more than likely change in the near future! There are several plugins available to you depending on your development style. So pick and choose what you feel is necessary and install/uninstall with simple npm commands. Just remember to include the --save parameter to persist your changes.

4. Version Control

It is almost always necessary to store versions of your work for the purpose of backup and guarding against accidental disasters. The preferred choice for me is to use Git. For the purpose of working with my personal website, I opted to use BitBucket as they give me a much needed option of keeping my repositories private.

I created two for my website. One for storing content, and the other for my theme of choice. I added the theme as a submodule in the main site repository. This allows me to work on both content and theme concurrently. Any change to the theme (as a submodule) can then be pushed and committed to the repository, almost at the same time. Take note that you might have to first commit the submodule before updating the repository with changes in the main project.

5. Tooling

There is certainly no dearth of Markdown editors out there. Just take a look at this list of 78 compiled by Mashable in 2013! Since I do most of my development in Atom these days, I had to find a package I could use to make it easier to edit my posts. I have barely started using markdown-writer and it is already making my life a lot easier with shortcuts and widgets. The other neat feature is its support for Hexo! It actually understands the concept of draft and post in Hexo context so in theory, you would never have to use the commandline... well... not much at least.

The one thing I desire most in any kind of web editing tool is the ability to take a screenshot and paste it into the active document. If you come across such a plugin or tool, please don't hesitate to put a comment below or tweet me!

Conclusion

I love Hexo. I love Markdown. I love Atom. Most of all, I love simplicity! Hope you've enjoyed reading this post as much as I have writing it. This is after all, my virgin post using Hexo!

HAPPY BLOGGING!