Migrating imakewebsites.ca to Hexo

Today I migrated http://imakewebsites.ca from a home-made PHP and MySQL CMS to the Hexo static blogging engine. Moving content over was easy, but it took some time to rebuild my theme and figure out a few quirks when using Hexo for a site without a blog component.

Why migrate?

I rarely update imakewebsites.ca, so moving it to static hosting makes life easier and takes a microscopic amount of load off the web server. I also want to learn what working with Hexo is like.

Pages

Like WordPress, Hexo supports pages, which are like blog posts but without chronological order and their own template. Hiding the blog related functionality by removing links the template engine was easy, but I discovered you must have at least 1 blog post in a site, otherwise the site’s homepage (index.html) will not render. I had to keep a dummy blog post in the site which is an orphaned page (no links to it)

Preserving URLs from my custom site was easy. I created a directory structure like this:

public
    │   .htaccess
    │   favicon.ico
    │   index.html
    │
    ├───2015
    |       (hidden dummy blog posts)
    │
    ├───404
    │       index.html
    │
    ├───archives
    │       (hidden dummy blog posts)
    │
    ├───contact
    │       (contact specific images)
    │       index.html
    │
    ├───css
    │       style.css
    |
    ├───free-zen-cart-templates
    │       (template specific images and files)
    │       index.html
    │
    ├───img
    │       (images used all over the site)
    │
    ├───making-downloadable-products
    |       (tutorial specific images and files)
    │       index.html
    │
    ├───portfolio
    │       (portfolio specific images used on the homepage)
    │
    └───zen-cart-layouts
            (tutorial specific images)
            index.html

I moved my page specific images out of a general /images folder and into the folder associated with each page. The content of each page is in each index.html, but browsers won’t need to show that in the URL. The folder names match the names of my old pages from the CMS.

It would be nice to disable the archive and blog page generation entirely, but their overhead is tiny so it isn’t a big problem.

Rendering HTML

Hexo encourages you to write content in Markdown. However, I already wrote content for the site in HTML. If you supply blog posts and page content with a .html extension, Hexo will use it and not run it through any sort of generator. Your raw HTML gets integrated into the site smoothly.

Moving the theme

I took the included Landscape theme and overwrote its HTML with content from my own site. I removed code for some blogging features. EJS Package for Sublime Text came in very handy for editing the theme’s files.

Deployment Process

hexo-deploy-ftpsync looks like is being smart and only uploading files that have changed, but I haven’t confirmed that yet. I wish I didn’t have to save my FTP name and password inside _config.yml to use it.

The fun part is when I make changes to the site, I can generate the new /public directory of the project and deploy with one terminal command:

hexo generate && hexo deploy

I like that!