I never thought I’d say it but… this blog was created on WordPress (WP). In the past I’ve used quite a few different CMS but never really got on with WP. However, team it up with Gatsby & Netlify and you’ve got a very slick way to manage content and have a ridiculously quick site at the same time.

So when I say WordPress, I do in fact mean headless WordPress. The reason I’ve not really got on with it in the past is because I saw way too many sites that were painfully slow and I’d hear horror stories about plugins (having way too many and ones that caused security issues). However, after recently revisiting WordPress I am converted.

The Gutenberg editor is fantastic. I know it divides people but after using quite a few CMS it has a very nice offering straight out of the box. The sheer amount of functionality you get makes it a pleasure to write with and the 'full screen mode’ makes me feel like I’m using Dropbox Paper, which I’m a fan of using as it’s so simplistic and clean.

Gatsby #

Moving on from WordPress, the second key bit of tech I’m using is Gatsby. What is it? As their website states:

'Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps'

As I mentioned in my first blog, I feel as though JavaScript, especially React, is taking over with many websites going down the progressive web app (PWA) route. A really cool, recent example is the Harry's razor brand in which they launched https://www.shopflamingo.com/. Harry’s aim was for a 'performant, visually-appealing, and secure site' which led them to choose Gatsby. This blog post (from Harry's) and this one from Gatsby go into lots of detail if you're interested.

So what’s so good about Gatsby? First, I want to say just how good the docs are. It’s quite rare to find such logical, clear and concise docs. The starter tutorial is a great way to delve straight into building pages, components and even learning how to use graphql with markdown files. It also goes into how to set up basic Sass module files which are very nice.

You also get a number of other things that I won’t go into detail about in this post, such as code splitting and a really concise way of handling responsive images. All in all you can have a basic site set up very quickly. Which, leads me on to how to deploy the thing. This is where Netlify comes in.

Netlify #

Netlify is a service that offers hosting and serverless backends for static websites. IMHO it’s pretty damn good. After you’ve created an account one of the first things your met with is the option to sync up any repo from either Github, GitLab or Bitbucket. Once you’ve hooked up your repo Netlify will then rebuild your site upon and changes being made to the master branch. How good is that! And… with a nifty WordPress plugin (https://wordpress.org/plugins/notification/) you can set up a hook to rebuild your site upon publishing or updating a page or post (many more options) so that once you’ve finished building your site you don’t have to manually trigger a build for the latest post/page to be visible.

What’s more is that for a personal site, such as this one, it’s absolutely free! What’s not to love about that.

So there’s my take on the Gatsby and WordPress combo. I hope to continue posting about Gatsby with anything I find useful, be that a particular plugin or possibly just handy snippets that may be of use to someone else that I may end up implementing on this site. If you’ve any questions, get in touch here or via Twitter @kieranphilipbro.

---

• Next: Sass Interpolation