Moving my Blog to Metalsmith

After many years on WordPress I decided to move my blog to a static site generated using Metalsmith. My reasons are:

  1. Revision control in Git for all content
  2. Simpler: WordPress with all those extensions was becoming a management task on its own.
  3. Can’t be hacked - no constant attacks on wp-admin
  4. Faster.

I began by exporting my WordPress site to markdown using PotterCMS-Wordpress. This was not my first choice. I began with a WordPress add-on that claimed to be able to export to Markdown but it errored out every time.

Sadly PotterCMS didn’t export my Yoast plugin page titles and descriptions and the date it put in the YAML for each file is a formatted date not a ISO date that can be easily read back in to a Javascript Date. It also embedded the YAML front matter in an XML comment instead of just --- lines. So there was some cleanup to do which I did manually (should have fixed PotterCMS but didn’t).

And then the fun began. I tried various metalsmith plugins trying to get a combination that worked well. In the end I ended up hacking away at the internals of several plugins to get them to behave the way I wanted. I also found that looking at the source code was often the only way to understand all of the parameters they offered.

For templating I’m using JADE, or PUG as it’s now known. This took some getting used to but I quite like it as a way to define HTML as it’s very concise.

The challenges I had with Metalsmith included finding the correct order for the plugins and figuring out what metadata each created. So, in case any of you are trying to do the same, here’s my complete index.js file:

// Use graceful-fs to wrap fs with retry logic var realFs = require('fs') var gracefulFs = require('graceful-fs') gracefulFs.gracefulify(realFs) var metalsmith = require('metalsmith'), markdown = require('metalsmith-markdown'), layout = require('metalsmith-layouts'), collections = require('metalsmith-collections'), permalinks = require('./metalsmith-permalinks-ian'), metallic = require('metalsmith-metallic'), debug = require('debug')('index'), pug = require('pug'), jade = require('jade'), tags = require('metalsmith-tags'); metalsmith(__dirname) .use(metallic()) .source('./source') .use(markdown()) .use(collections({ recent: { limit: 10, reverse: true }, posts: { }, pages: { }, })) .use(tags({ handle: 'tags', metadataKey: 'alltags', path:'topics/:tag.html', layout:'tags.jade', sortBy: 'date', reverse: true, skipMetadata: false, slug: {mode: 'rfc3986'} })) .use(permalinks({ pattern: 'foo/:title', date: 'YYYY', linksets: [{ match: { collection: 'posts' }, pattern: 'blog/:title' },{ match: { collection: 'pages' }, pattern: '/:title' }] })) .use(layout({ engine: 'jade', directory: 'templates', default: 'default.jade', pattern: '**/*.html' })) .destination('./dest') .build(function (err) { if(err) console.log(err) }); 

I decided to give up on automatically generated paths and added a slug property to every page and post. This also meant that I could preserve all the urls from my old WordPress blog.

I also added Disqus for comments but haven’t had a chance to port the old comments over.



Wed May 11 2016 20:58:00 GMT-0700 (Pacific Daylight Time)


Next page: Home Automation States

Previous page: Graphing gigabytes of home automation data with tableau


Disqus goes here