Ever wanted to use Drupal as a headless CMS with Gatsby.js? This short blog will guide you through what Gatsby.js is and will showcase a working prototype too.
What is Gatsby.js
Gatsby is a free open source framework based on React for developing fast websites and apps. It’s been around for a while now but in recent years it has really taken off with the emergence of jamstack technologies. Think of it as a static site generator and much more.
How Does Gatsby work?
Data Sources
Gatsby doesn’t care where your data comes from… It might be markdown, JSON or from your favourite CMS…
Build
At build time, Gatsby creates an internal GraphQL server of all of this data collected and in React we can query this to display our webpage and break these out into components (header, navigation footer etc.)
Deploy
Because the pages that are generated are static HTML, it can be hosted pretty much anywhere. (Github pages, Netlify, AWS etc..)
Why should you use it?
- It’s really fast… Performance and accessibility are fundamentals components to the framework
- The support and documentation is really good
- It’s a modern tech stack, built in React and GraphQL
- Progressive web app technology is baked into it… (basically it means that a site can be installed like an app, served offline etc.)
- Network effect (lots of developers are embracing it!) and a great community around it
So, who is using Gatsby.js?
The main website for React is using it to render their documentation, they have been using successfully for a few years now. Gatsby.js is an ideal use case for a wiki/documentation website, out of the box it comes with an Accessible routing plumbed in.
Spotify have created a simple brochureware website to showcase their work, stories and tools. They are using Gatsby.js in conjunction with a CMS called Contentful.
Holland and Barret are using Gatsby.js to render their Front End page alongside their Adobe ecommerce platform.
Gatsby + Drupal example
I’ve whipped up a little demo extracting recipe’s from an Drupal 8 site and displaying it on a fresh installation of Gatsby.js.
Drupal 8 site (Recipes) - https://dev-gatsbydave.pantheonsite.io/
Gatsby Front End site - https://hardcore-brown-3cbd09.netlify.app/
To take it even further with what Gatsby.js can provide, I have also installed a build hook so when a new recipe gets published on the Drupal site it will also rebuild on the Gatsby.js Front End site.
To summarise, Gatsby.js is something to consider when you’re looking to rebuild your Drupal website, whether that being a simple brochureware site to something more advanced like an online store.
Contact our experts on [email protected] to find out how we can help you optimise and innovate your Drupal site, or ask us a question in the comment box below.
