Wednesday, April 1, 2015

Getting Started with Wintersmith: A Node.js-based Static Site Generator

I've spoken and written on the topic of static site generators a lot lately. Generally speaking, I tend to recommend going with Jekyll as the most stable and feature-rich option for building static sites available today. However, the fact that Jekyll is Ruby-based can be a deal-breaker for some developers, especially those not familiar with Ruby. The single most frequent question I get is: "Is there a good option based upon JavaScript and available via npm?"


In this article, we'll cover one such option, Wintersmith. Wintersmith is a robust static site generator with one biggest impediment being (in my opinion): a lack of detailed documentation. Hopefully this article will help anyone interested in a JavaScript-based option available via npm to get started building static sites with Wintersmith.


The Sample Site


For this article, we'll use the sample site I built and that you can find at my Static Site Samples repository. The sample is an Adventure Time! fan site that looks like the image below.


Sample Adventure Time! Site

The goal of the project was to rebuild this site using a number of static site generators to compare them. While the site is intentionally simple, it contains a number of key features that we'll look at in Wintersmith:



  • Custom global metadata - the ability to set custom metadata global to the site that can be accessed and used in templates;

  • Custom post metadata - the ability to set custom metadata on a per post basis that can be accessed when listing the post or in the display of the post itself;

  • Data sets - the ability to add content that is not a post or page, but rather a custom data type (in the case of this sample that is the character data).


All of the character data, content and images used in the sample are from the Adventure Time! wiki. The design was based upon a free template from HTML5UP.


How to Set up Wintersmith


One of the benefits of Wintersmith being based on Node.js and npm is that the installation process is super simple. You have to execute the command below to install it (note: the sudo isn't necessary on Windows):


Continue reading %Getting Started with Wintersmith: A Node.js-based Static Site Generator%




by Brian Rinaldi via SitePoint

No comments:

Post a Comment