Diggama Logo
Integration

Diggama + Gatsby

Create blazing-fast static sites with Gatsby's powerful data layer and Diggama's structured content.

GraphQL Data Layer

Query Diggama content through Gatsby's unified GraphQL layer.

Blazing Fast

Pre-rendered pages, optimized images, and code splitting out of the box.

Image Processing

Gatsby Image handles optimization, lazy loading, and responsive images.

src/templates/blog-post.tsx
import { graphql } from 'gatsby'

export const query = graphql`
  query BlogPostQuery($slug: String!) {
    diggamaBlogPost(slug: { eq: $slug }) {
      title
      content
      publishedAt
      featuredImage {
        childImageSharp {
          gatsbyImageData(width: 800)
        }
      }
    }
  }
`

export default function BlogPost({ data }) {
  const post = data.diggamaBlogPost

  return (
    <article>
      <h1>{post.title}</h1>
      <GatsbyImage image={post.featuredImage} alt="" />
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}

Integration Features

Source Plugin

gatsby-source-diggama pulls content into Gatsby's data layer.

Incremental Builds

Only rebuild pages that changed. Fast builds at scale.

Preview Support

Preview draft content in Gatsby Cloud or locally.

Webhook Triggers

Automatic rebuilds when content changes in Diggama.

Start building with Gatsby

Get started with our Gatsby starter and source plugin documentation.

Need help with Gatsby?

Our team can help you set up Diggama with your Gatsby project.