Integrations

Gatsby Integration

⏱ Setup time

~10 minutes

🔧 Strategy

Build trigger + Pull API

📦 Requirements

Gatsby 4+, Netlify/Gatsby Cloud

Gatsby is a static site generator. Unlike Next.js with ISR, Gatsby requires a full rebuild to show new content. Blogree integrates with Gatsby by triggering build hooks on Netlify or Gatsby Cloud whenever a new post is published.

Step 1 — Set Up the Gatsby Pull Plugin

Install gatsby-source-blogree to fetch your posts at build time:

npm install gatsby-source-blogree

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-blogree',
      options: {
        apiKey: process.env.BLOGREE_API_KEY,
        apiUrl: process.env.BLOGREE_API_URL,
        siteId: process.env.BLOGREE_SITE_ID,  // from Blogree → Sites → your site
      },
    },
  ],
};

This adds BlogreePost nodes to your GraphQL schema during build.

Step 2 — Query Posts in Your Pages

// src/pages/blog.js
import { graphql } from 'gatsby';

export const query = graphql`
  query BlogListQuery {
    allBlogreePost(sort: { published_at: DESC }) {
      nodes {
        id
        slug
        title
        excerpt
        published_at
        tags
      }
    }
  }
`;

export default function BlogPage({ data }) {
  return (
    <ul>
      {data.allBlogreePost.nodes.map(post => (
        <li key={post.id}>
          <a href={`/blog/${post.slug}`}>{post.title}</a>
        </li>
      ))}
    </ul>
  );
}

// src/pages/blog/{BlogreePost.slug}.js — Auto-generated page
import { graphql } from 'gatsby';

export const query = graphql`
  query BlogPostQuery($id: String!) {
    blogreePost(id: { eq: $id }) {
      title
      body { html }
      meta { title description og_image }
      published_at
    }
  }
`;

export default function BlogPost({ data }) {
  const post = data.blogreePost;
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
    </article>
  );
}

Step 3 — Set Up Build Hook Webhook

Since Gatsby needs a rebuild for new content, you use a build hook URL as your Blogree webhook URL. This triggers a new build whenever Blogree publishes a post.

💡

Get your build hook URL from your hosting provider. In Netlify: Site Configuration → Build & deploy → Build hooks → Add build hook. In Gatsby Cloud: Site Settings → Webhook → Copy URL.

# Netlify build hook format:
https://api.netlify.com/build_hooks/your-hook-id-here

# Gatsby Cloud build hook format:
https://webhook.gatsbyjs.com/hooks/data-source/your-hook-id-here

Paste this URL as the Webhook URL for your site in the Blogree dashboard. Now every time you publish a post in Blogree, it sends a POST request to this URL, triggering a new Gatsby build that includes the new post.

⚠️

Gatsby builds typically take 2–5 minutes. Your new post won't appear on the site until the build completes and the new static files are deployed. For instant publishing, consider migrating to Next.js with ISR.

Step 4 — Environment Variables

# .env.production
BLOGREE_API_KEY=bk_live_xxxxxxxxxxxx
BLOGREE_API_URL=https://api.blogree.com
BLOGREE_SITE_ID=site_abc123

# Also set these in your Netlify/Gatsby Cloud environment variable settings

Build Performance Optimization

For sites with many posts, use Gatsby's incremental builds to only rebuild changed content. Enable this in your Gatsby Cloud settings or with Netlify's Gatsby plugin:

npm install gatsby-plugin-netlify

// gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-plugin-netlify',  // enables incremental builds on Netlify
    // ... other plugins
  ],
};