Creating a schema in Sanity for blog posts 📃
Published: 2022-07-17 00:37:03

_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.

```javascript
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... 
```javascript
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](https://www.sanity.io/docs/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](https://www.sanity.io/docs/block-type)

`slug` is going to be used for our url

<hr />

## 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
```javascript
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.
```javascript
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. 
```javascript
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.

<hr />

## 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.



![Studio dashboard with post schema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/010jhyarnevjlfnet527.png)

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.

<hr />

## 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. 

![Post and URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwztg97y2lx6oqvn83jp.png)

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.
```javascript
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).

<hr />

## 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.

<hr />

## References


![File Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m21dy331rte3o3qqqpoh.png)