Cycletraffic

Gatsby - Taking the first steps

September 06, 2019

I've been listening to the mighty Marky preach about Gatsby at a number of events, but I didn't have the brainspace to get around to building my own Gatsby site.

Until now.

I'm no stranger to static site generators having used Jekyll for a number of websites over the years, particularly as it was driving Github pages. But I've never really warmed to React, and especially 'CSS in JS' and 'Markup in JS'. Gatsby has done an incredible job of building a tool for blazing-fast websites so it would be remiss of me to ignore it any longer.

My Cycletraffic has been through a number of iterations over the years, built using everthing from Drupal to a single html page and everything in between. In fact, the previous iteration was served by Github Pages but I've spun it up on Netlify to keep a record.

Perhaps all that listening to Mark paid off, but starting off with Gatsby was straighforward. I can't recommend the Gatsby tutorials highly enough. Furthermore, there are some very useful starters available.

The quick starter uses a starter itelf, and it was enough to get the Cycletraffic site up and running. I did split the content into three pages, mainly so I could use and get my head around the Link component.
I didn't go to the effort of using CSS in JS yet but there's a way to just keep my generatated css.

It was disturbingly easy to deplpy the site to Netlify - once it was connected to the github repo that hosts the source code, it worked out that I was running a Gatsby site and configured the build process immediately.

I'm barely scratching the surface of what Gatsby is capable of, but that will come in time. In the meantime, thanks to Netliy, I can link directly to the state of the site just after building in Gatsby.