Why use Drupal + Gatsby together?

Using Drupal as a headless CMS with Gatsby is a great way to get an enterprise-quality CMS for free, paired with a great modern development experience and all the benefits of the JAMstack, like performance, scalability, and security.

It only takes a few steps to use Gatsby with Drupal as a headless CMS (also known as decoupled Drupal).

An example Gatsby + Drupal site

How to implement Drupal + Gatsby

Quick start

This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the Quick Start guide, then come back.

gatsby-config.js

Hooking up Gatsby to a new or existing Drupal site takes only a few steps.

An example of how to include the gatsby-source-drupal plugin in your gatsby-config.js file:

Why use Gatsby and Drupal together?

“Decoupled Drupal” has become an increasingly popular approach to building enterprise-grade websites, and has the full-throated support of Drupal community leaders. Using Gatsby in a decoupled Drupal setup allows your team to access the powerful content modeling and access workflow capabilities of Drupal 8, as well as the powerful UI creation & performance toolset of Gatsby.

Configuring Gatsby Live Preview

The Gatsby Drupal Module enhances the content editor experience when using Gatsby with Drupal as a data source. This module provides Gatsby live preview capabilities using your Gatsby Cloud account or on your locally running Gatsby development server.

While not required in order to build a Gatsby site that uses Drupal data, this module is the place where additional features are added to improve the Gatsby and Drupal integration.

Interested in learning more?

Using Gatsby together with Drupal offers a powerful, full-featured, open-source, and free alternative to expensive enterprise content management systems. To learn more:

Try it on Gatsby Cloud!