Sourcing from Drupal

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.

• Follow the gatsby-source-drupal installation instructions to add the plugin to your Gatsby site

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:

• Read a Drupal agency’s introduction to Gatsby
• Watch Kyle Mathews’ presentation on Gatsby + Drupal
• Get started with Robert Ngo’s Decoupling Drupal with Gatsby tutorial and watch his Evolving Web 2018 Drupal conference presentation
• Example site that demonstrates how to build Gatsby sites that pull data from the Drupal CMS.
• Take a free course on building a Gatsby site with Drupal.
• Read Gatsby blog posts on Gatsby + Drupal.
• Watch a video series on getting started with Gatsby and Drupal.