A couple of years ago, my new years resolution was to stop spending lots of money on subscription services. I used to host a number of small websites for friends on WebFaction. Not only was it costing me money, it was sapping my time. So I shut down the lot of it. My personal website, an ancient Wordpress blog, was also hosted there, and vanished in the clear-out.
It's 2019, and I've resolved to start writing again – and that means I need a website. I started with some priorities:
- I don't want to tangle with systems administration. I work at a SaaS company, there are enough servers, pipelines, environments and databases to worry about in my day job.
- I want to own the CSS and layout, and don't want to learn proprietary theme engines or frameworks.
- It should be cheap or free to host. I haven't forgotten my 2017 resolution to spend less on web services.
The key for me, is something simple, that just works. Javascript, APIs and Markup, the JAMStack, offer a great way to get a simple personal website off the ground with low ongoing maintenance. The website is compiled into static HTML, and can be served from a content delivery network, making it very fast, and very easy to scale (for all that viral content I'll be producing). I've long been a fan of this static website + API approach, in fact I built a static site generator for a client project, dubbed the Wrangler, back in 2013.
Building a static site has got much, much better over the last few years. Jekyll popularised the "put some Markdown in a directory, run a command, get a website" workflow, but it's Ruby ecosystem never really clicked with me. Starting a new web project in 2019, Javascript-based static site generators are a dime a dozen. You can choose from Eleventy, Hexo, Docusaurus, Next.js, or Metalsmith, to name a few.
I landed on Gatsby. It's got a great local developer experience, good docs, and makes use of React for templating, which feels very comfortable for me. It's also backed by a robust data query strategy via GraphQL, that can accept many different data sources. This means I can plug in a headless CMS later if I need more editing flexibility.
Some assembly required
The Gatsby documentation is pretty good, however there have been several changes between v1.x and v2, so if you're googling for help, it might be out of date. Here's some Gatsby resources I've found useful:
- How to build a React and Gatsby-powered blog in about 10 minutes
- Why I built this blog with Gatsby.js and Contentful
- SEO in Gatsby
Gatsby plugins I'm using
- gatsby-awesome-pagination for paginating the articles index.
- gatsby-plugin-sitemap, to generate a sitemap tree
- gatsby-plugin-google-analytics, for wiring up GA
- gatsby-transformer-yaml for referencing author information across all articles.
Stay tuned
Now that I'm up and running with this performant, easy-to-manage website, I'll be dedicating more time to writing. Look out for new posts soon.