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.
So, without further ado, here are the tools you need:
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.
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!
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.
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.
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!
Check out some sites we built recently using this methodology: