If you've been curious about using a headless CMS for your next project, you're in the right place. This guide walks you through setting up Sanity, a flexible CMS that makes content management easy. By the end, you'll have a working blog powered by Sanity and Gatsby.
Step 1: Setting Up Your Sanity Project
1.1 Install the Sanity CLI
Make sure Node.js and npm are installed. Then run:
npm install -g @sanity/cli1.2 Create a New Sanity Project
Create a new project:
sanity initChoose:
- Project Name:
my-sanity-blog - Dataset:
production - Template: Clean project with no predefined schemas
Then move into the project:
cd my-sanity-blog1.3 Launch Sanity Studio
Start the studio:
sanity startOpen http://localhost:3333 to see the studio.
Step 2: Creating Your First Schema
2.1 Create blogPost.js
Inside the schemas folder, create blogPost.js:
export default {
name: 'blogPost',
type: 'document',
title: 'Blog Post',
fields: [
{
name: 'title',
type: 'string',
title: 'Title',
},
{
name: 'slug',
type: 'slug',
title: 'Slug',
options: { source: 'title', maxLength: 96 },
},
{
name: 'body',
type: 'array',
title: 'Body',
of: [{ type: 'block' }],
},
{
name: 'mainImage',
type: 'image',
title: 'Main Image',
options: { hotspot: true },
},
{
name: 'author',
type: 'reference',
to: [{ type: 'author' }],
},
{
name: 'publishedAt',
type: 'datetime',
title: 'Published At',
},
],
};2.2 Register the Schema
Update schema.js:
import createSchema from 'part:@sanity/base/schema-creator';
import schemaTypes from 'all:part:@sanity/base/schema-type';
import blogPost from './blogPost';
export default createSchema({
name: 'default',
types: schemaTypes.concat([blogPost]),
});Restart the studio:
sanity startYou should now see Blog Post as a document type.
Step 3: Connecting Sanity with Gatsby
3.1 Create a Gatsby Project
npm install -g gatsby-cli
gatsby new my-gatsby-blog
cd my-gatsby-blog3.2 Install the Sanity Source Plugin
npm install gatsby-source-sanity3.3 Configure gatsby-config.js
require('dotenv').config();
module.exports = {
plugins: [
{
resolve: 'gatsby-source-sanity',
options: {
projectId: 'your_project_id',
dataset: 'production',
apiVersion: '2023-11-12',
token: process.env.SANITY_TOKEN,
useCdn: true,
},
},
],
};Add your token in .env:
SANITY_TOKEN=your_sanity_token3.4 Query Sanity Data
Create src/pages/blog.js:
import React from 'react';
import { graphql } from 'gatsby';
export const query = graphql`
query {
allSanityBlogPost {
nodes {
title
slug {
current
}
body {
children {
text
}
}
publishedAt
}
}
}
`;
const BlogPage = ({ data }) => {
const posts = data.allSanityBlogPost.nodes;
return (
<div>
<h1>My Blog</h1>
{posts.map((post) => (
<div key={post.slug.current}>
<h2>{post.title}</h2>
<p>{post.body[0]?.children[0]?.text}</p>
</div>
))}
</div>
);
};
export default BlogPage;3.5 Run Gatsby
gatsby developVisit http://localhost:8000/blog.
Step 4: Deploying Your Site
You can deploy to Netlify or Vercel:
- Push to GitHub
- Connect the repo
- Deploy
Conclusion
That’s it — you now have a working blog with Sanity as a CMS and Gatsby as the frontend. If you want help customizing the schema or UI, feel free to reach out.