At Marzee Labs we like to build static sites. In this blog post, we're sharing an ingredient list to build a new static site - including a deployment and testing pipeline - in less than an hour. Best of all, all these tools are for free if you code in the open!
Typically, static site generators compile a list of markdown and template files into HTML. Funnily, the name "static" is somewhat of an oxymoron. In fact, since we adopted static site generators, we are much more free to adopt and leverage HTML and JS libraries, leading to sites that are much less static than the ones we typically build using a full-fledged CMS.
We initially started out using Jekyll, a Ruby generator developed by Github, and gradually moved to HarpJS, mostly because we prefer Javascript over Ruby.
Ingredient list
So, without further ado, here are the tools you need:
- HarpJS: the site generator framework. Our boilerplate MZ Harp comes with goodies like responsive images (leveraging jimp), a basic blog and homepage structure, Gulp integration, etc.
- Github: cause you'll want to have Pull Requests to discuss and review changes
- Heroku: for automatically deploying feature branches using pipelines
- Travis CI: for running some tests, and deploying our production site to Github Pages!
Let's generate!
To make our setup easier, we've written a Yeoman generator that spins up a new HarpJS site for you, and guides you through the setup of Heroku, Travis CI and GitHub Pages.
Before we start, set up a GitHub repository and install the Heroku CLI and the Travis CLI.
Next, let's install the generator (see the MZ Harp repository if you're interested to see the magic behind it):
Let's create a directory in which to put the generated site:
And start generating!
The generator will guide you through the setup of Github, Heroku and Travis, so make sure you have your free accounts set up on these platforms.
Finally, run
to see your new site, which should look like http://mzharp.marzeelabs.org/.
After pushing your code back to GitHub, your scaffolded codebase should look similar to https://github.com/marzeelabs/mzharp
An environment for each Pull Request
One of the nicest feature of this pipeline is to have a new environment freshly built for each Pull Request.
To see this in action, edit any file of your newly created Github repository (use GitHub's UI if you're lazy!), open a PR to your master branch, and watch both Travis and Heroku do their jobs!
MZ Harp sites in the wild
Check out some sites we built recently using this methodology:
- this website
- BEN
- Open Consortium
- Fidibiko
- conference sites like Cowork Buzz and DrupalDay Portugal