Gatsby.js Logo

Gatsby.js Blog Engine

You've got better things to do than build another blog

Add Butter to your Gatsby.js app and get back to more interesting problems

Try ButterCMS free

ButterCMS is an API-based Gatsby.js blog engine that integrates seamlessly with new and existing Gatsby.js apps. Add ButterCMS to your Gatsby.js app in minutes using our Node.js API client. Use ButterCMS with Gatsby.js to enable dynamic content in your apps for blogs, pages, and more.

Above is quick video of integrating Butter's blog engine into an application.

Butter's Blog API slides right into our apps and helps avoid having yet another WordPress site.

Daniel, Founder of Collective Idea

All your requirements, solved

  • ButterCMS Feature Image Use main domain (for SEO)
  • ButterCMS Feature Image Friendly admin interface
  • ButterCMS Feature Image Upload images and media
  • ButterCMS Feature Image Edit slugs and meta tags
  • ButterCMS Feature Image Tag and categorize posts
  • ButterCMS Feature Image RSS/Atom Feeds
  • ButterCMS Feature Image Search
  • ButterCMS Feature Image Webhooks

Powerful admin interface

Integrates with Gatsby.js

Our blog engine has a simple API and drop-in Gatsby.js source plugin.

Save development time

Save thousands of dollars worth of development time with our easy setup.

Gives you great SEO

Host your blog on your main domain and customize slugs and meta tags.

Try ButterCMS in your Gatsby.js app

Setup in minutes

Official Gatsby.js Guide



Integrating Butter into your Gatsby.js app is dead simple. Here's a mini tutorial to get a feel for of setting up your blog home and blog post pages. For full a integration guide check out our Official Gatsby.js Guide

See our API reference for additional options such as filtering by category or author. The response also includes some metadata we'll use for pagination.

Displaying Posts

In src/pages/blog.js

import React from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../components/Layout'
import SEO from '../components/seo'

class BlogIndex extends React.Component {
  render() {
    const { data } = this.props
    const siteTitle = data.site.siteMetadata.title
    const posts = data.allButterPost.edges

    return (
      <Layout location={this.props.location} title={siteTitle}>
        <SEO title="Blog Home" />

        <div>
          {posts.map(({ node }) => {
            const title = node.seo_title || node.slug
            return (
              <div
                key={node.slug}>
                <h3>
                  <Link to={`/blog/${node.slug}`}>
                    {title}
                  </Link>
                </h3>
                <small>{node.date}</small>
                <p>{node.summary}<p>
              </div>
            )
          })}
        </div>
      </Layout>
    )
  }
}

export default BlogIndex

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allButterPost {
      edges {
        node {
          id
          seo_title
          meta_description
          slug
          categories {
            name
            slug
          }
          author {
            first_name
            last_name
            email
            slug
            bio
            title
            linkedin_url
            facebook_url
            instagram_url
            pinterest_url
            twitter_handle
            profile_image
          }
          body
        }
      }
    }
  }

Creating a blog template

Now we've listed our blog posts in src/pages/blog.js, using Gatsby createpages API we'll generate blog post pages using a template:

In src/pages/template/blog-post.js:

import React from 'react'
import { Link, graphql } from 'gatsby'

import Bio from '../components/Bio'
import Layout from '../components/Layout'
import SEO from '../components/seo'

class BlogPostTemplate extends React.Component {
  render() {
    const post = this.props.data.allButterPost.edges[0].node
    const siteTitle = this.props.data.site.siteMetadata.title
    const { previous, next } = this.props.pageContext

    return (
      <Layout location={this.props.location} title={siteTitle}>
        <SEO title={post.seo_title} description={post.description} />
        <div>
          <div>
            <h1>{post.seo_title}</h1> <span>{post.date}</span> •
            {post.categories.map(category => (
              <span>{category.name}</span>
            ))}
            <hr />
            <div
              dangerouslySetInnerHTML={{ __html: post.body }}
            />
            <Bio />
            <ul>
              <li>
                {previous && (
                  <Link to={`/blog/${previous.slug}`} rel="prev">
                    ← {previous.seo_title}
                  </Link>
                )}
              </li>
              <li>
                {next && (
                  <Link to={`/blog/${next.slug}`} rel="next">
                    {next.seo_title} →
                  </Link>
                )}
              </li>
            </ul>
          </div>
        </div>
      </Layout>
    )
  }
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    allButterPost(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          id
          body
          seo_title
          date
          categories {
            name
          }
        }
      }
    }
  }
`

Configure the source plugin

Here you'll specify the config that will be needed to pull down data from butter. make sure to add your api_token from your dashboard, in this guide we will be add CMS capability to a Gatsby for blogging, marketing pages, and more. Below is an example gatsby-config.js file that you'll want to configure for your app. We dive into more detail on the config file in the official guide.

// Example gatsby-config.js file
module.exports = {
{
      resolve: `gatsby-source-buttercms`,
      options: {
        authToken: ``,
        // Optional. Returns values for the supplied content field keys.
        contentFields: {
          keys: [`faq_items`, `faq_headline`],
          // Optional. Set to 1 to enable test mode for viewing draft content.
          test: 0,
        },
        // Optional. Array of page slugs.
        pages: [`homepage`],
        // Optional. Array of page types.
        pageTypes: [`customer_case_study`],
      },
    },
}

Now our app has a working blog that can be updated easily in the ButterCMS dashboard.

Try ButterCMS in your Gatsby.js app

About ButterCMS

ButterCMS is an API-based, or "headless", CMS. We're a hosted service and we maintain all of the infrastructure. For more information on how we compare to a traditional CMS check out API-based CMS vs Traditional CMS.

How do you compare to Wordpress?

In short, we offer all the same easy-to-use editing capabilities of Wordpress but are significantly easier for developers to setup and maintain. This means you spend less time working on your CMS and more time focusing on things important to your business.

Learn more about how we're a wordpress alternative.

What's my blog going to look like?

Unlike CMS's you might be used to, we don't control or host any of your templates. The design of your blog (HTML + CSS) lives in your application along side the rest of your app. Your application calls our Blog Engine API to get the raw blog post content and then injects it into your own templates during rendering. This has many benefits including blog your instantly matching the rest of your site branding giving it a unique feel; not the cookie-cutter blog themes you'll experience with other CMS's.

Can I import my existing blog content?

Yep. To import content from another platform, simply send us an email.

What kind of database can I use?


No database required! We're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.

Can I host this?


No, we're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.

I have other questions


We're happy to help.

Chat with us

About Gatsby.js

Gatsby lets you build blazing fast sites with your data, whatever the source. Liberate your sites from legacy CMSs and fly into the future.

Blog Engine for these technologies and more

Ruby, Rails, Node.js, Python, ASP.NET, C#, Flask, Django, Go, PHP, React, Phoenix, Elixir, Angular, Vue.js, Gatsby.js, Pelican, Next.js

Try Butter free for 30-days

Try ButterCMS in your Gatsby.js app

Get started now

Sign up with Google Sign up with Github
or