Creating a schema in Sanity for blog posts 📃

If by the end of this lesson things are not working, there will be a screenshot at the very end that you can reference to make sure your files are in the right place

Creating the schema

Create a file named post.js inside of your /studio/schemas folder and paste this text inside of it.

const post = {
  title: 'Post',
  name: 'post',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    {
      name: 'slug',
      title: 'Slug',
      type: 'slug',
    },
    {
      name: 'publishedAt',
      title: 'Published at',
      type: 'datetime',
    },
    {
      name: 'body',
      title: 'Body',
      type: 'array',
      of: [
        {
          type: 'block',
        },
      ],
    },
  ],
  preview: {
    select: {
      title: 'title',
    },
  },
}

export default post

This looks far more complicated than it actually is. You are essentially creating an object to add data to later.

name is the key name in your object with the values being what you add later. So this Post schema will read like...

post = {
 title,
 slug,
 publishedAt,
 body
}

title is the text that displays over the field when you create a post (I will point this out when we have our schema fully implemented)

type is simply the type of the value that will be inside of the key. You can find a list of the types here... Sanity schema types

The body object might seem a little odd, but this is just how you add a Rich Text editor. More info on that can be found here... Sanity block type

slug is going to be used for our url

Adding your new Post schema to Sanity

So you created a schema for a blog post, but that's all you've done, Sanity doesn't know it exists. Luckily adding it to our list of schemas is incredibly simple now.

Inside of your /studio/schemas/index.js file you should see this

export const schemaTypes = []

Now all you need to do is import your post.js file and add it to that array of schemas and you're ready to start writing your posts.

import post from './post'

export const schemaTypes = [post]

It might be beneficial for you to take a look inside of your /studio/sanity.config.js file to help get an understanding of how this is working. You should see these 2 sections in there.

import {schemaTypes} from './schemas'

schema: {
    types: schemaTypes,
  },

This is importing the schemaTypes variable from above with our array of schemas and assigning it to the schema.types value.

Writing a post in our studio dashboard

If you cd into your studio folder and run sanity start, like we've done in the previous lessons, you should now see your 'desk' with Post.
If you click Post it will open up all of your posts, but at the moment you don't have any.
Click the pencil and paper icon next to post and you should see a form with all of the fields we specified on our post schema.

There's a lot going on here so I figured I'll break each important item down.

1. This is the name of your project which by default is the name of your folder. I only mention this because you can actually edit this part in your sanity.config.js by changing the title value if you want it looking a little more professional.

2. This is a list of all of your schemas displayed by the title we gave them in the file. Currently we only have 1 so this is alright.

3. This is letting you know which schema you are currently under and will display all of your entries for that schema. So we are under our 'Post' schema and currently do not have any posts.

4. The button to add an entry for your select schema.

5. This is the form section that will pop up after you click on section 4.

6. Remember earlier how I mentioned that I will point the title out? Well now I am! These are what we defined in our schema as the title.

7. Pretty self explanatory, but this is the entry field for the section.

8. This is the body input that we added in our schema. See how adding that array type gives us this Rich Text editor?

9. Button to publish your entry.

10. Additional options for your entry, including to unpublish or delete it.

Creating a post

If you fill out the 4 inputs and click Publish, you should now see a post in the middle section displaying the title of your post.

You can edit the post with the pencil icon next to it.

Another good thing to point out is that this currently displays the title of our post. This isn't done automatically, we implemented that inside of our post schema with this section.

preview: {
    select: {
      title: 'title',
    },
  },

If you were to change 'title' to 'body' it would instead display the body of your post in this section.

I also want to point out the slug input. With Sanity v2 it is simple to force your slugs to be standardized so that your url's can all follow a similar pattern. In v3 I'm not entirely sure how to make this work anymore so I would advise you to try and keep your slugs in some sort of consistent pattern manually (like copying the title in lowercase and exchanging spaces for dashes).

Mission Accomplished

You should be all set to write as many posts as you want.
As an exercise you could look at the Sanity docs for additional schemas to practice implementing, or even try creating your own.
This is simple enough, just create a new file like we did for our post.js, add the code for the schema, import that into index.js and add it to our array!

In the next post I will explain how to display your posts on your page instead of just in your studio dashboard.

References