Learn Gatsby - Content Management & CMS Integration

#Introduction

Content is king on a Gatsby site, and Gatsby excels at pulling content from anywhere. Whether content is written as Markdown files by developers or managed by editors through a CMS, both end up in the same data layer.

Episode 9 covers sourcing Markdown and MDX, integrating headless CMSs like Contentful and Strapi, preview mode, and content modeling with query optimization.

#Sourcing Markdown and MDX

#Markdown with gatsby-transformer-remark

Plain Markdown is sourced with gatsby-transformer-remark as we discussed in episode 5. Each file becomes a MarkdownRemark node containing frontmatter, html, and excerpt.

#MDX with gatsby-plugin-mdx

MDX combines Markdown and JSX: you can insert React components directly inside content files. Install it:

npm install gatsby-plugin-mdx @mdx-js/react

Register the plugin in gatsby-config.js, and .mdx files are ready to use. Here's an example frontmatter and MDX content:

---
title: "Halo Dunia"
date: "2026-08-10"
tags:
  - intro
---
 
Selamat datang di post pertama.
 
<Button>Tombol Interaktif</Button>

Components like <Button> inside MDX can be imported via MDXProvider or scoped per page — this is the power of MDX for documentation and interactive tutorials.

#Creating Slugs from Frontmatter

To give each post a clean URL, create a slug in gatsby-node.js via onCreateNode:

Create slug from frontmatter

exports.onCreateNode = ({ node, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === "Mdx") {
    createNodeField({
      node,
      name: "slug",
      value: `/blog/${node.frontmatter.title.toLowerCase().replace(/ /g, "-")}`,
    })
  }
}

createNodeField adds a custom slug field to the node, which can later be queried to create a page for each post.

#Headless CMS Integration

#Contentful with gatsby-source-contentful

A headless CMS stores content in the cloud and exposes it via an API. Contentful is the most popular example:

npm install gatsby-source-contentful

Its configuration uses tokens from the Contentful dashboard:

Configure gatsby-source-contentful

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-contentful",
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
  ],
}

spaceId and accessToken should come from environment variables rather than being hard-coded. After a build, each content type appears as a GraphQL type, for example ContentfulArtikel.

#Sanity and Strapi

Sanity uses gatsby-source-sanity with projectId and dataset configuration. Strapi uses gatsby-source-strapi with apiURL and collectionTypes. The pattern is the same: a source plugin pulls data, a transformer prepares images, and then the data can be queried.

#Preview Mode and CMS-Driven Workflows

#Preview for Editors

Content editors want to see the result before publishing. Platforms like Gatsby Cloud and Netlify provide deploy previews: every CMS change triggers a preview build with a unique URL. Gatsby also supports Content Sync, which updates pages incrementally as content changes.

#Webhooks as Triggers

A CMS-driven workflow usually relies on webhooks: when content is published, the CMS calls the hosting platform's webhook URL to trigger a new build. This keeps the site in sync with the latest content without manual polling.

#Content Modeling and Query Optimization

#Clear Content Models

The key to a tidy CMS is content modeling: decide upfront on content types, required fields, and relationships. A simple model example: a post has title, slug, excerpt, featuredImage, and a relationship to its author. Good modeling makes queries consistent and forms easy for editors to fill out.

#Optimizing CMS Queries

CMS data can be huge. Recommended practices: fetch the minimum fields with GraphQL, filter out unused nodes, and cap the node count with limit. For long posts, avoid pulling the full body on listing pages — excerpt and slug are enough.

#Conclusion

Episode 9 completed content management: sourcing Markdown and MDX, integrating headless CMSs like Contentful, Sanity, and Strapi, preview mode, and content modeling with query optimization.

Key takeaways:

• MDX enables JSX inside Markdown; gatsby-plugin-mdx turns it on.
• Create slugs via createNodeField in onCreateNode.
• A CMS source plugin maps content types to GraphQL types.
• CMS configuration uses environment variables, not hard-coded values.
• Webhooks trigger new builds when content changes.
• Clear content modeling leads to simple queries.

In the next episode, episode 10, we'll discuss forms and interactivity — forms with client-side state, submissions via Netlify Forms and serverless handlers, client-side navigation, and patterns for accessibility and user feedback.