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:
yarn add gatsby-theme-blog-sanity
Set up your environment variables in .env.development
:
GATSBY_SANITY_PROJECT_ID=xxx
GATSBY_SANITY_DATASET=production
SANITY_TOKEN=xxx
In your gatsby-config.js
:
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`
});
module.exports = {
plugins: [
{
resolve: 'gatsby-theme-blog-sanity',
options: {
sanity: {
projectId: process.env.GATSBY_SANITY_PROJECT_ID,
dataset: process.env.GATSBY_SANITY_DATASET,
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,
}
}
}
]
}