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

Add Butter to your Gridsome app and get back to more interesting problems

Try ButterCMS free

"Best CMS on the market"



ButterCMS is an API-based Gridsome blog engine that integrates with Gridsome. Use ButterCMS for your Gridsome apps to add CMS-powered blogs, dynamic pages, and more. Butter plays well with all view-layers including React, Angular, Jade, and Vue.

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 Gridsome

Our blog engine has a simple API and drop-in Gridsome SDK.

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 Gridsome app

Setup in minutes

Official Gridsome Guide



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

First you'll need to configure a bit of code in your Gridsome project so that it can pull in your Blog posts from ButterCMS. The key bit of code is the config code that connects your project to gridsome via the npm "gridsome-source-buttercms" module. In your gridsome project, open the gridsome.config.js file.

Replace the AuthToken with your ButterCMS token. Page Posts is baked into ButterCMS, so you don’t have to explicitly declare it in your gridsome.config.js file.

module.exports = {
  siteName: 'Gridsome',
  plugins: [{
    use: "gridsome-source-buttercms",
    options: {
      authToken: 'a985f3f782f2005...<your AuthToken>',
      collections: [''],
      pages: '',
      pageTypes: ''
    }}
  ]
}

Next in your components folder, create PostCard.vue with the following code:

<template>
  <div class="post-card__content-box">
    <div class="post-card__header">
      <g-image
        alt="Cover image"
        v-if="post.featured_image"
        class="post-card__image"
        :src="post.featured_image"
      />
    </div>
    <div class="post-card__content">
      <h2 class="post-card__title" v-html="post.title" />
      <p class="post-card__description" v-html="post.summary" />
      <PostMeta class="post-card__meta" :post="post" />
    </div>
  </div>
</template>

<script>
import PostMeta from "~/components/PostMeta";

export default {
  components: {
    PostMeta
  },
  props: ["post"]
};
</script>

<style lang="scss">
.post-card {
  margin-bottom: var(--space);
  position: relative;

  &__content-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

  &__header {
    margin-left: calc(var(--space) * -1);
    margin-right: calc(var(--space) * -1);
    margin-bottom: calc(var(--space) / 2);
    margin-top: calc(var(--space) * -1);
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
    flex-basis: 25%;
    &:empty {
      display: none;
    }
  }
  &__content {
    flex-basis: 75%;
  }
  &__image {
    border: 2px solid gray;
    width: 80%;
    margin-left: 20px;
    margin-right: auto;
    box-shadow: 1px 10px 30px 0 rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    align-content: center;
  }
  &__title {
    margin-top: 0;
    margin-bottom: 0;
  }

  &__description {
    margin-top: 0;
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 1px 10px 30px 0 rgba(0, 0, 0, 0.1);
  }

  &__tags {
    z-index: 1;
    position: relative;
  }

  &__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    text-indent: -9999px;
    z-index: 0;
  }
}
</style>

Next, build another component PostMeta.vue in components with this code:

<template>
  <div class="post-meta">Posted {{ post.published }}.</div>
</template>

<script>
export default {
  props: ["post"]
};
</script>

<style>
.post-meta {
  font-size: 0.8em;
  opacity: 0.8;
}
</style>

You’ll use your PostCard component in Index.vuefile in the Pages folder. Replace everything inside the component with this code:

<template>
  <Layout>
    <!-- List posts -->
    <div class="posts">
      <PostCard
        v-for="edge in $page.posts.edges"
        :key="edge.node.id"
        :post="edge.node"
      />
    </div>
  </Layout>
</template>

Then add your GraphQL query:

<page-query>
query {
  posts: allButterPosts(order: ASC) {
    edges {
      node {
        id
        title
        url
        published  (format: "MMMM Do, YYYY")
        slug
        summary
        body
        featured_image
        tags {
          name
          slug
        }
      }
    }
  }
}
</page-query>

And finally, update your <script> and <style> tags:

<script>
import PostCard from "~/components/PostCard.vue";

export default {
  components: {
    PostCard
  },
  metaInfo: {
    title: "Hello, ButterCMS!"
  }
};
</script>

<style>
</style>

And that’s it! Restart your gridsome server by running gridsome develop and when you navigate to http://localhost:8080 you should see this:



Try ButterCMS in your Gridsome 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 Gridsome

Gridsome is a free and open source Vue.js-powered framework for building websites & apps that are fast by default. Gridsome generates static html that hydrates into a Vue SPA once loaded in the browser.

Blog Engine for these technologies and more

Ruby, Rails, Node.js, Python, ASP.NET, C#, Flask, Django, Next.js, Go, PHP, React, Phoenix, Elixir, Angular, Vue.js, Gatsby.js, Pelican, Express.js, Flutter, Gridsome, Java, Spring, React Native, Ionic, Nuxt.js

Try Butter free for 30-days

Try ButterCMS in your Gridsome app

Get started now

Sign up with Google Sign up with Github
or