Community Plugin

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,
        }
      }
    }
  ]
}