Search code examples
gulpecmascript-6yeomanbrowser-syncstatic-site

Static site generator with Yeoman generator-webapp capabilities


All the static site generators (SSGs) I have tried still feel like a downgrade compared to the frontend development workflows I have with e.g. generator-webapp or generator-gulp-angular. Do you know of a SSG that besides for the usual features:

  • write posts in Markdown
  • style the theme layout in some template language (e.g. EJS)

also offers the level of usability as the Yeoman generators like generator-webapp provide? Some features generator-webapp includes are:

  • CSS Autoprefixing
  • Built-in preview server with BrowserSync
  • Automagically compile Sass with libsass
  • Automagically lint your scripts
  • Map compiled CSS to source stylesheets with source maps
  • Awesome image optimization
  • Automagically wire-up dependencies installed with Bower
  • The gulpfile makes use of ES2015 features by using Babel

It's simply a joy to work with generator-webapp compared to the SSG workflows. I am also talking about modifying the SSG blog theme too – the post writing in Markdown is usually ok-ish for most SSGs (though e.g. adding D3 to show a nice visualisation in a post wouldn't be as smooth).

SSGs that I've tried like Jekyll, Hugo or even Node-based Hexo do provide some basic live reloading and even pre-processors. Still, they do not allow you to e.g. write scripts in ES6, pull in a recent bower package and have it be automatically linked to the site to do a small demonstration of some new technology in a blog post. This would be possible in something like generator-gulp-angular or generator-webapp, but these on the other hand lack the Markdown processing, theme layout creation with template tags and partials etc.

Harp.js looks promising, as it provides the SSG-blog-like functionality and there are attempts to integrate it with BrowserSync or Yeoman generators, but it is still far from ideal. Perhaps some sort of composed generator combining Harp and the most recent generator-webapp could be created to combine the best of the frontend web development and SSG blogging workflows.


Solution

  • OK, after quite a bit of exploration and trying out different static site generators, I found the Jekyllized Yeoman generator that wraps some gulp, browsersync etc. magic around Jekyll to be the smoothest approach.

    There seems to be some progress on a Hugo Yeoman generator from the same author, but it seems to be work in progress at the time of writing.

    Additionally, you can add jekyll-compose for some basic post/page/draft management from the command line.