There are hundreds of static site generators out there!

For my blog, I was previous using grunt to run my tasks and bootstrap for styling. Both technologies are fine but after spending more time with gulp and bourbon I wanted to make the switch. I also wanted to make sure that I could use handlebar templates for convenience.

After some deliberation I decided to use Metalsmith as it had seemly good gulp integration. Also there were lots of plugins available that I ended up using:

"metalsmith-collections": "^0.7.0",
"metalsmith-excerpts": "^1.0.0",
"metalsmith-markdown": "^0.2.1",
"metalsmith-metallic": "^0.3.1",
"metalsmith-pagination": "^1.1.0",
"metalsmith-permalinks": "^0.4.0",
"metalsmith-templates": "^0.7.0",
"metalsmith-word-count": "0.0.4",

Writing templates in handlebars makes it simple to use partials and helpers. Things like formatting the dates can be really straight forward:

handlebars.registerHelper('date', function(timestamp) {
  return moment(timestamp).format("MMM Do YY");
});

For quick reminders of what properties are available in scope - this helper is useful:

handlebars.registerHelper(‘objects', function(object) {
  return Object.keys(object);
});

The gulp task we need to parse the markdown file first to process the yml.

The markdown files can be grouped into collections and then paginated for index or table of contents pages.

gulp.task('markup', function() {
  function parseFile(file) {
    assign(file, file.frontMatter);
    delete file.frontMatter;
  }
  var metalPipe = gulpsmith()
    .use(collections({
      posts: {
        pattern: '**/*.md',
        sortBy: 'date',
        reverse: true
      }
    }))
    .use(pagination({
      'collections.posts': {
        perPage: 8,
        template: 'index.html',
        first: 'index.html',
        path: 'page/:num/index.html'
      }
    }))
    .use(highlight())
    .use(markdown({
      smartypants: true,
      gfm: true
    }))
    .use(wordcount())
    .use(excerpts())
    .use(permalinks('articles/:link'))
    .use(templates({
      engine: 'handlebars',
      directory: config.templates
    }));

  return gulp.src(config.articles)
    .pipe(frontMatter()).on('data', parseFile)
    .pipe(metalPipe)
    .pipe(gulp.dest(config.dest))
    .pipe(browserSync.reload({
      stream: true
    }));
});