Decoupled Drupal + Gatsby: Getting Started

Lately, we've been using Gatsby with Drupal for projects where we need it decoupled.

Gatsby is a unique project. It's most often evaluated as a static site generator compared to the likes of Jekyll and Hugo. While Gatsby can generate a static website, it's more accurately described as a content mesh.

Gatsby uses GraphQL to pull in one or more sources to generate site content. There is a large list of Gatsby source plugins including: Drupal, WordPress, YouTube, Twitter, Hubspot, Shopify and Google Sheets just to name a few. It's optimized for blazing fast performance. Since it's built using React, it can be used to build hybrid sites. Along with generating static pages it can also render client-side content. It can pull in dynamic data, add password protected content and take advantage of features typically not found in static generated sites.

Similar to Drupal, Gatsby is open source. It has a devoted and ever-growing community, with an expanding plug-in library which makes building your site even easier.

With this combination we can leverage Drupal as a content authoring platform and utilize Gatsby to render the frontend.

The screencasts below show how quickly you can configure a Drupal 8 website to pair with Gatsby.

With our Drupal 8 website set up, the next step is to configure Gatsby to pull the Drupal site's content.

Now it's time to automate your Drupal to Gatsby content deployment to Netlify.

Download a Transcription of this Screencast

Download Transcription