Originally published at: http://www.sitepoint.com/building-static-site-generator-grunt-plugin/
You’ve probably heard of static site generators like Jekyll and Wintersmith before, and you may even have used them. But you may be surprised that it isn’t overly difficult to write your own static site generator.
In this tutorial, I’ll show you how to build your own Grunt plugin that will generate a static site for you from templates and Markdown files. You can then use it in conjunction with whatever other Grunt plugins you wish to create your static site.
Why use Grunt?
You may ask, Why use Grunt for this?
- If nothing else, this will be a good way to learn how to create your own Grunt tasks.
- It provides access to Grunt’s API, which simplifies a lot of tasks.
- Building this as a Grunt plugin provides a lot of flexibility — you can use it with other Grunt plugins to get exactly the workflow you want. For instance, you can choose whatever CSS preprocessor you want, or you can deploy via Rsync or to Github Pages by changing the other plugins you use and amending the configuration. Our plugin will only need to take the Markdown files and templates and generate the HTML.
- You can easily add additional functionality as plugins — I use an existing Grunt plugin to generate my sitemap, for instance.
- You can edit this to work with different templating systems. For example, I’ll be using Handlebars as my templating system, but it would be trivial to use Jade instead.
Setting Things Up
Our first step is to install everything we need to create our plugin skeleton. I’m assuming you already have Git, Node.js and grunt-cli installed. First, we need to install grunt-init:
npm install -g grunt-init
Next, install the gruntplugin template:
git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin
Now, create a folder for your plugin, which I’m calling grunt-mini-static-blog. Navigate to that folder and run the following command: