Paul McGrath


Static Sites with Hugo, Tachyons, and Netlify

I try and rewrite my site once a year or so, usually in something new and interesting, as it’s a pretty small project and I can choose from a variety of trendy generators.

This year it was so easy it felt like cheating, so let me tell you how Hugo, Tachyons, and Netlify should be part of your static site toolkit for 2018.

Hugo

First thing’s first: this thing is screaming fast.

They advertise a build time of around 1s, and quite often while developing I would find it had built and updated with my changes faster than I could alt-tab to the browser.

The main challenge I had with getting started was that they don’t supply a basic starter template with the initial site generation. This made it a bit tougher to figure out some of the functionality, but they’re working on addressing this.

Additionally, asset pipelines are not part of the package yet. To address this, and to avoid hours of configuring Gulp, Babel, or Webpack, I used this very handy boilerplate built by Netlify, which sorted most of the issues I had.

In general its incredible flexibility will allow you to implement whatever you think of, and the development experience is very smooth. I genuinely enjoyed working with it and would use it again.

Tachyons

Tachyons is a small, open source, and somewhat contentious CSS component library, designed with a ton of best practices in mind.

As one of a growing family of atomic CSS frameworks, Tachyons excels at providing modular and reusable utility classes, rather than the “bells-and-whistles” approach taken by Bootstrap.

The general approach is to compose a few classes representing simple CSS functions and suddenly you’ll have a whole lot more than you thought you would, and you didn’t have to write a line of CSS to get there.

Don’t get me wrong, I love CSS and I’m not advocating against it. I just think this is worth trying out at least once, as it favours a unique development flow entirely based around authoring semantic html, never requiring you to switch out to define styling or layout.

Recently I’ve moved between using global stylesheets, CSS-in-JS, and Tachyons, depending on the project; and found myself appreciating each approach, but still enjoying the incredible expendiency of Tachyons.

Give it a shot, and you may surprise yourself.

Netlify

Having spent a bit of time fiddling with Github pages, I didn’t realise how good a dedicated web automation platform could be. Their tagline is “Simply push your code and let us take care of the rest.” and it is 100% true.

So far Netlify has auto-deployed this site somewhere in the region of 200 times — most of those in around 20 seconds — only requiring a few clicks and a small config file in the root of the repo.

Their support team is also incredibly responsive. I had an issue with the Asset Optimiser stage of my Netlify pipeline and one of their engineers worked with me on it for a few days, trying to figure out the root cause.

Recently they’ve rolled out an wide array of new features, from fully-managed deployment of Lambda functions, a CMS, Identity management system, split testing, and large media support, making them a one-stop-shop for developer tooling and CI/CD.

Basically, if you want to host a simple site and blog a bit, or build almost anything more involved, Netlify is winning the race.

So this is my current setup. It’s fast, enjoyable, and really easy, and I hope it helps to provide a similarly efficient workflow for others.