Set Up Sanity CMS to Power a SvelteKit Blog

Ben Patton
InstructorBen Patton
Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated a year ago

Instead of writing all of our posts as files in our code editor, we can get the benefit of a CMS to help us store our content. We will use Sanity to write our posts in markdown. Then we can use Sanity's javascript client in our project get our content data from our CMS.

Instructor: [0:00] We can come in to our terminal. Right now, we are in our my-sveltekit-blog directory. If we just cd up one level, now we can run npm create sanity@latest. Yes, we want to create a new project, SvelteKit Blog, the default data set configuration. We'll just let it do that and we'll choose the blog schema. For this one, we'll keep with TypeScript.

[0:33] We'll do npm run npm run dev. Now we can go to localhost:3333. It may ask you to login, so make sure you can login. Now that we're logged in, we can see that we have our documents. Currently, there's nothing there. If we come to Posts and we click Create a Post, you can see that it gives us a couple of fields.

[1:01] One thing we need to do is go ahead and stop the server, and we need to install the Sanity plugin, plugin-markdown. Then we need to come into our Sanity config, import {markdownSchema} from sanity-plugin-markdown. Then we just need to add it to our plugins, save that.

[1:32] Now we can restart our server. We haven't changed anything yet, but we can come into our schemas, let's go to Posts, and let's change the body to be Markdown. If we save that, we see it's a little different now. Now we can test this. Let's add an H1. This is an H1. Let's add some...This is italics, bold, block quote, and you can preview it.

[2:13] We can also add images. If we come down, I have this silly meme, we can just drop it. We see that it has added it. If we preview, we'll see that it does keep it there. With that, we have our Sanity CMS up and running and able to handle Markdown.

egghead
egghead
~ 5 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today