How we build websites using pipelines at zero cost

Rolling out static sites using HarpJS, Heroku, Travis CI and Github

Published in

Marzee

3 min readNov 28, 2016

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):

npm install -g yo npm install -g generator-mzharp

Let’s create a directory in which to put the generated site:

mkdir my-mzharp cd my-mzharp

And start generating!

yo mzharp

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

gulp

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

If you aren’t following this yet in your terminal session, have a look at the video below to see how the generator works.

MZ Harp generator

See https://github.com/marzeelabs/generator-mzharp

asciinema.org

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!