Paul McGrath


Static sites with Hugo, Tachyons, and Netlify

Safari is surprisingly clean for promo shots.
Safari is surprisingly clean for promo shots.

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. Like, blink-and-you-miss-it quick.

Seriously, seriously fast.
Seriously, seriously fast.

Speed aside, it’s a versatile and pretty straightforward framework for building a static site. The main difficulty I had with getting started was that they don’t supply a basic starter template with the initial site generation. This makes it a bit tougher to figure out “how does that part work”, but they’re working on addressing this.

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

Tachyons

Tachyons is a small open source component library, designed with a ton of best practices in mind. It can be pretty polarising, and there are some outspoken folk that remain fairly unconvinced of its benefits over traditional ways of building out a site.

The fastest CSS you've ever not written.
The fastest CSS you've ever not written.

If you want to build something seriously fast though, Tachyons is where it’s at. Compose a few classes that represent simple CSS functions and suddenly you’ve got 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’m not advocating for not writing CSS. Just that this is such an expedient way of throwing a concept together that you really should try it.

Netlify

Having spent a bit of time fiddling with Github pages and never being fully sure what it was doing, I didn’t realise how good a dedicated web automation platform could be.

Frictionless deployment for all your static site needs.
Frictionless deployment for all your static site needs.

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, and most of those in around 25 seconds.

As a sidenote, I read a lot of posts about developer setups for their static sites, and some of them seem like such Herculean effots, just to get a few blog posts on the net. Sure, if you like doing it, and you’re learning something from the process that’s cool, but if you just want to host a simple site and blog a bit, Netlify is winning the race.

They also have a few handy other features in Beta like Lambda functions, Forms (which I’m using on this site) Split Testing, Identity and more.

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. Really impressive stuff.

So yeah, this is my setup for 2018. It’s fast, enjoyable, and really easy. Most importantly, because of these benefits I now have more time to write than before, which is wonderful.