In The Waddle Garage

Building our website with Gatsby & Contentful

Dan Burton  •  20 November, 2019

We've recently relaunched the Waddle website. You're probably reading this article on our site, so the chances are you're looking at it right now. Hopefully you like it and find it quick and easy to use. One of the reasons it works so well is that it’s been built with a static site generator called Gatsby and headless CMS Contentful.

The all-new Waddle website

You’ll often find those two mentioned in the same breath. They allow you to build websites with the modern internet in mind; for speed and to offer users, developers and marketers a superior web experience. Here’s why we chose them.

Right from the start, we knew that picking the correct tools with which to build the website was a crucial decision. They had to be aligned with the way we work at Waddle. We had enough experience using older technologies such as WordPress to know that they weren’t the answer - we would end up with something that we wouldn't want to support internally. With the example of WordPress, it is relatively old, insecure, and is built in PHP (and we have a room full of Java and React developers!). These days there are much better ways to build a static website.

Selecting the right tool for this project was essential as we were trying to achieve two things:

  • To quickly and professionally build a website for our UK partners Natwest Rapid Cash in time for their official launch
  • Relaunch our own website

Gatsby uses React, so it made perfect sense for us. It was also a highly flexible solution. If Natwest had a preference for using another CMS, then assuming we build our site with the right layers of abstraction and take advantage of the variety of plugins available out of the box in Gatsby, we would be able to integrate with most other CMS platforms quite easily.

What is a static site generator?

It’s a platform that allows you to develop a website without needing an application server to run it. Essentially, it’s just a bunch of html, css and javascript files. Once it’s built you could stick the entire project in a folder on any web server and it would work. This makes it different to, for example, our main Waddle platform – which runs on an application server. That’s an application that starts up and keeps churning in the background.

We can compare it once again to WordPress - with that traditional setup you’d need to have PHP installed and a web server like Apache running. That requires more overhead to maintain. With Gatsby it's just files on a file server (for us, hosted in an S3 bucket in AWS) and that’s it – super-fast, and low maintenance.

In fact, by using Gatsby we don’t even need Contentful to be available at any given moment in time - if it were to go down, our website and all of it's content will still be available. With WordPress, if your Apache server is dead, then your CMS is down and so is your website.

What is a headless CMS?

It’s an API-first CMS. It offers a way for marketers to write content and then present it to developers in a way they can consume, in whichever context they need it. That could be a mobile app or a static website or a traditional enterprise application.

Headless CMS Contenful defines the content, but not the context in which it's being used

This makes it different from a traditional CMS which not only holds the content, but is also a piece of software hosting the entire website.

With Contentful you’re defining the content but not the context in which it’s being used. Gatsby takes care of the templating layer, whilst Contentful takes care of the data. By separating the view, it follows the same patterns as a web app. Our core platform could have a web app or a desktop app, but the data behind it is the same. It all comes from the same source. The idea behind Contentful is the same. The content is data and what you do with that is up to you. I see it as a CMS that cares about developers

Gatsby and Contentful - the dream team

They work together so well. It’s incredibly easy to integrate Contenful with Gatsby. At build time, Gatsby will pull all the currently published content from Contentful via GraphQL queries that you write, and using the results you can then dynamically generate entire pages or individual components. The functionality of which all just comes out of the box.

Five reasons we picked Gatsby & Contentful

1) At Waddle we use React every day

It’s how we develop the Waddle platform. We can use the same components. It’s a language and framework we’re all comfortable with.

If you’re building static sites with a team of application developers Gatsby makes a lot of sense. If you’re using WordPress you can’t just get someone here to jump in and work on it. It’s just not going to happen. It enabled us to have anyone in the team work on it.

2) It’s built for speed and SEO

It’s a better web experience. From a marketing point of view there are a lot of benefits. It allows you to optimise each page so you can climb up the Google search results. And easily control the way content is shared on social media.

And as well as SEO it has been built with speed as it’s number 1 priority. It returns page views really quickly – that’s the core of Gatsby. The problem with WordPress is that it’s generally quite slow, depending on who it’s hosted with.

3) It’s a decoupled solution

As I mentioned, if Rapid Cash had a preference for another CMS such as Sanity or even WordPress, we could integrate Gatsby with it without too much work. That gives us the flexibility to build decoupled from whatever it was that they might want to use. And that was incredibly useful working so remotely geographically and over different time zones.

4) We could get up and running quickly

Using Gatsby and Contentful allowed us to get up and going quickly without too much overhead. Minimal configuration is required, and due to the culture of autonomy we have fostered within Waddle we have the ability to choose the right tools for the job - and that’s the core of working the Waddle way. The added benefit of having access to a large ecosystem of Gatsby plugins for common tasks also enabled us to concentrate our build efforts on the content of the site itself.

5) It’s modern

Gatsby and other similar JAMStack technologies allow faster, lightweight, modular static site development. That puts it in line with the rest of our stack and the technologies we’re using. We’re always looking to leverage the latest tech where it makes sense to do so, and Gatsby is now another tool in our belt.

You Might Also Be Interested In...

Ready to get started?

Connect your accounting software to see how much you could borrow