Using Sanity to Manage Blog Content

Sanity.io is more than a Headless CMS. They like to call themselves a Structured Content Platform, and I see why they make the distinction. I've used several Headless Content Management Systems (CMS), and Sanity is pretty unique in comparison. For convenience sake and to limit confusion, I'll refer to Sanity as a Headless CMS for the remainder of this article.

Goals

When I was considering content management strategies for this blog, my main objective was to have the most enjoyable, frictionless content creation experience possible, while maintaining high-level freedom in how I create, store, and retrieve my content. Otherwise, I'd never use it and would be another developer on the long list of those who have a single "How I Made This Blog" post 😂

The strategy also had to work well with my existing Next.js site and TypeScript. I've been spoiled by ctrl + spacebaring my way through data in VS Code, as well as all the other wonderful benefits of TypeScript.

The last major requirement was first-class MDX support. More on the benefits of MDX later. I did not want to store or manage MDX through git / GitHub. I wanted my content to exist separately from my application, so I could update one without affecting the other (a bit of Separation of Concerns for my fellow engineers). I really enjoy being able to rebuild and deploy my app with a simple git push through Vercel's CI/CD system. But I did not want to trigger that process every time I added a new blog post or fixed a typo.

Now that you understand what I was trying to accomplish, we'll get into how Sanity has exceeded my expectations in reaching these goals.

A few cool things about Sanity

• You get a fully open-sourced and responsive editor built in React, extensible to your heart's desire, and hosted in the cloud
• Rich text content is HTML-free. Your content as data
• Content structures are truly flexible
• You get a full API-suite with the same backend capabilities as Sanity Studio
• Live preview with Next.js

Sanity Studio React 💙 App

The first of these awesome qualities is exemplified very well by the fact that I'm writing this post from my phone, in my own instance of Sanity Studio, hosted in the cloud, on my own personalized domain. I can create content from anywhere.

Furthermore, because Sanity Studio is a React app at its core, I was able to extend the content editing experience with some of their awesome official & community plugins, all of which are open-source too by the way. Of course, I had to write a bit of my own code as well 😄

Content as Data

Now, since content is just data, I can use a plugin and one of Sanity's Rich Text fields to write MDX! This conveniently allows me to author the majority of the content in markdown, while also enabling me to include custom React components, like this one:

Pretty cool right? Here's what the last few lines of MDX for this post look like in Sanity Studio:

This conveniently allows me to write the majority of the content in
markdown, while also enabling me to include custom React components, 
like this one:

<Callout>
👋 Hello from [sanity](https://www.sanity.io/)!
</Callout>

Pretty cool right?

Not to mention, I can just grab all this data from the Sanity API, REST or GraphQL, and apply all of the nice styling and syntax highlighting however I see fit! That's a whole other post though 😂

Live Preview with Next.js

Sanity's live preview is hands down the best preview mode for any Headless CMS.

Real-time

The previews are instant. You don't have to click save in Sanity Studio. You don't have to refresh the preview version of the blog page. You can see updates in the preview page as you type.

Even better with ISR & fallback: 'blocking'

No rebuilding to publish. Just click publish on Sanity studio, refresh the blog page a couple times, and boom 💥 Your changes appear!

Bonus goodies

• Pricing
• Other plugins
• GraphQL, GROQ, & TypeScript
• Best Headless CMS experience for a dev, or someone who wants to hire a dev to configure it

Ultimate customization and control. Can configure it to suit your needs exactly

Honorable mentions

shoutout article

What's next?

Now that you know how and why I use Sanity to manage content for my blog, you may be wondering:

• How I Built My Blog