Step-by-Step Guide: How to Build a Blog with Sanity CMS

npm install -g @sanity/cli

sanity init

cd my-sanity-blog

sanity start

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

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

sanity start

npm install -g gatsby-cli
gatsby new my-gatsby-blog
cd my-gatsby-blog

npm install gatsby-source-sanity

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

SANITY_TOKEN=your_sanity_token

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;

gatsby develop