Welcome back. Let's explore my solution of working with blog posts. My requirements were simple: ability to create and update posts easily enough that it could be done from a smart phone, that is using a web interface and without having to manually deploy new version of the site. If the process was to be too laborious, I would hardly find the motivation to write them.

In this post, I will show you the initial setup, my schemas, how I connected Sanity to my front end app and how updates to the content are handled.

In the previous part, I picked Sanity as the headless CMS. In my repository, I created folder for this part of the project and followed this page from their docs. The documentation is, by the way, awesome and a huge help. I'd like to mention, that this project started on Sanity v2 and during development I migrated to v3, so the following description is not entirely accurate to my experience.

After creating an account, you get a free hosted database. After all setup will be done, as editors, we will interact with this database using Sanity Studio - web app that you can host yourself, but Sanity also hosts for you.

Interesting thing to mention is that you can have multiple datasets in a single project. This feature is very useful during development. You can have one dataset for production (you are reading this post from it) and a second one for development.

All content is stored as documents. Every document has a type and fields, also with types. You have your usual types such as string, number and array, but the most important one for blogposts is the block type.

You can imagine the block type as a paragraph. The main part of this article is basically an array of blocks and other types. What is great about blocks is two things: it provides you with a built-in editor in Sanity Studio and you can customize them.

I added multiple things to the default block:

• Heading style
• External and internal links
• Footnotes
• Edit
• Inline $\LaTeX$

Schema is the list of definitions of our data types. In my case, it looks like this:

1// We import object and document schemas
2import { post } from './post'
3import { source } from './source'
4import { series } from './series'
5import { tag, tags } from './tag'
6import { repo } from './repo'
7
8import { portableText } from './portableText/portableText'
9import { codeToken } from './portableText/codeFile'
10
11// Then we give our schema to the builder and provide the result to Sanity
12export default [
13  // The following are document types which will appear
14  // in the studio.
15  post,
16  series,
17  source,
18  portableText,
19  codeToken,
20  tags,
21  tag,
22  repo
23]

Let's look at a simple type definition:

1import { defineField } from "sanity";
2import { BulbOutlineIcon } from '@sanity/icons';
3
4export const tip = {
5    name: 'tip',
6    title: 'Tip',
7    type: 'object',
8    icon: BulbOutlineIcon,
9    fields: [
10        defineField({
11            name: 'title',
12            title: 'Title of tip',
13            type: 'string',
14            initialValue: '',
15            description: "Title of the tip",
16        }),
17        defineField({
18            name: 'text',
19            title: 'Text of tip',
20            type: 'portableText',
21            initialValue: '',
22            description: "Content of the tip",
23        }),
24    ],
25}

fields define the properties and their types, most of the other fields define the interface for the editor. icon, for example, customizes the look in my editor.

I have discovered multiple helpful plugins. For example, the Latex support I mentioned earlier is done by LaTex input plugin.

A very useful one for developers is the Vision plugin. It lets you very easily write and test GROQ queries.

Sanity is a very flexible tool you can use to quickly create simple but infinitely customizable content management tool for your project.