Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

gatsby-theme-blog-sanity

A Gatsby theme to pull blog posts from Sanity.io. This theme doesn’t provide much by way of styling, but it’s hooked up to theme-ui’s Gatsby plugin for easy style overrides.

To install:

# in your Gatsby project, install the theme
yarn add gatsby-theme-blog-sanity

Set up your environment variables in .env.development:

# get these values from manage.sanity.io
# REQUIRED
GATSBY_SANITY_PROJECT_ID=xxx
GATSBY_SANITY_DATASET=production

# OPTIONAL — set this if you want live draft updates
SANITY_TOKEN=xxx

In your gatsby-config.js:

// see https://www.gatsbyjs.org/docs/environment-variables/
require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`
});

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-blog-sanity',
      options: {
        sanity: {
          // get these values from manage.sanity.io
          projectId: process.env.GATSBY_SANITY_PROJECT_ID,
          dataset: process.env.GATSBY_SANITY_DATASET,

          // optional — set this if you want live draft updates
          token: process.env.SANITY_TOKEN,
        }
      }
  ]
}

Options

option default description
basePath / the path where the blog should be created (e.g. /blog)
baseUrl window.location.origin URL used for SEO tags
includePathInPosts true if false, blog posts will not include the basePath (e.g. /my-post); by default, posts include the basePath (e.g. /blog/my-post)
sanity.projectId the Sanity project ID from Sanity Studio
sanity.dataset the Sanity dataset (usually “production” by default)
sanity.token a Sanity read token (see your API settings)
sanity.watchMode true in develop if token is set, else false when true, updates the UI in real time during development
sanity.overlayDrafts true in develop, false in production when true, displays draft content

The sanity options are passed directly through to gatsby-source-sanity. See the docs for additional information on what these options mean.

Kitchen sink example

In your gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-blog-sanity',
      options: {
        basePath: '/blog',
        baseUrl: 'https://example.com',
        sanity: {
          projectId: 'xxx',
          dataset: 'production',
          token: 'xxx',
          watchMode: true,
          overlayDrafts: false,
        }
      }
    }
  ]
}