Introduction

In this tutorial, we will learn how to create a blog website using React, Gatsby.js, and Sanity.io. We will also explore the powerful functionality of Sanity’s rich-text editor.

Getting Started

To begin, make sure you have React and Gatsby.js installed on your computer. Then, create a new Gatsby.js project with the following command:

npx gatsby new my-blog

After the project is created, navigate to the project directory:

cd my-blog

Setting up Sanity.io

Sanity.io is a headless CMS that will handle our blog content. To set it up:

1. Go to https://www.sanity.io/ and create a new project.
2. Install Sanity’s CLI tool by running the following command:

npm install -g @sanity/cli

3. Initialize Sanity in your project directory:

sanity init

4. Follow the prompts to create a new Sanity project.

Adding the Rich-Text Editor

Sanity’s rich-text editor allows us to create and edit blog posts with text formatting, images, and more. To enable it:

1. Inside your Sanity project directory, add the following dependency:

npm install @sanity/block-content-to-react

2. Create a new schema for your blog posts in the Sanity studio:

sanity post create post

3. Add the following code to your schema:

import { blocksToTextContent, serializers } from 'post' 

export default {
  name: 'post',
  type: 'document',
  fields: [
    { name: 'title', type: 'string' },
    { name: 'content', type: 'array', of: [{ type: 'block' }] },
  ],
  preview: {
    select: { title: 'title', content: 'content' },
    prepare({ title, content }) {
      const textContent = blocksToTextContent(content)
      return {
        title: title || textContent || 'Untitled',
        subtitle: textContent && textContent.length > 50 ? `${textContent.slice(0, 50)}...` : null,
      }
    },
  },
}

4. Update your Sanity studio by running the following command:

sanity deploy

Creating the Blog Website

Now let’s set up the blog website using Gatsby.js and connect it to Sanity.io:

1. Install the Gatsby plugin for Sanity:

npm install gatsby-source-sanity

2. In your Gatsby.js project’s `gatsby-config.js` file, add the following configuration:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-sanity',
      options: {
        projectId: 'your-project-id',
        dataset: 'your-dataset',
        watchMode: true,
        token: 'your-token',
      },
    },
  ],
}

3. Restart your Gatsby.js development server:

gatsby develop

Conclusion

With the setup complete, you can now start creating blog posts using Sanity’s rich-text editor, and your Gatsby.js website will display them dynamically. This combination of technologies provides a powerful and flexible solution for building and managing a blog website.