💻  Ian Wootten

~ 2 min read

Blogging with Metalsmith

I’m switching blogging platforms once more. Moving from Wordpress to Jekyll enabled me to no longer deal with the multitude of updates and protected me hacks I could be susceptible to, but Jekyll being written in Ruby (a language I’m not overly familiar with) has been a problem. I’ve been able to cobble together scripts to deal with the custom parts of my blog build, but it’s never felt like home.

I’ve decided to start using Metalsmith - a static site generator written in Javascript. It’s existed before my switch to Jekyll and now seems to have enough of a plugin ecosystem in order to provide a collection of plugins to provide behaviour I need to make use of.

Metalsmith

Metalsmith operates much like a task runner like gulp, where a set of functions manipulate a number of files, one after another in order to eventually build a static site to your liking. A simple build script could be as follows:

var Metalsmith = require('metalsmith'),
    markdown   = require('metalsmith-markdown'),
    templates  = require('metalsmith-templates');

Metalsmith(__dirname)
  .use(markdown())
  .use(templates('swig'))
  .build();

This is just standard node script with dependencies installed via npm. Metalsmith assumes defaults of src and build for the source of markdown and destination of html. An example of markdown containing some useful front-matter might be as follows:

---
title: Blogging with Metalsmith
author: Ian
date: 2015-06-30
categories:
  - Javascript
tags:
  - metalsmith
  - javascript
---
I'm switching blogging platforms once more...

It also assumes a default template directory under templates, containing a default post template ‘post.html’ - which in the example is written in a swig template as below.

<html>
  <body>
    <div class="post">
    <h1><a href="/{{ path }}">{{ title }}</a></h1>
    <div class="post_date">{{ date | date('d M Y') }}</div>
    {{ contents | safe }}
    </div>
  </body>
</div>

I’ve managed to reduce my build time (though I’m not currently compiling sass and have added a new sitemap), but am much more familiar with the toolchain in question. Hopefully that’ll lead to further, more frequent updates not just in content, but also the design of my company site and this blog.

I’ll be adding future blogs about my metalsmith toolchain and hurdles with that I’ve overcome.