Name: Set Up Sanity CMS to Power a SvelteKit Blog
Uploaded: 2023-04-14T09:54:22-05:00
Description: 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.

Create a new SvelteKit project

Understand the Structure of a Svelte Component

Add a Route to a SvelteKit Application

Add an Error Page and Layouts to SvelteKit Routes 

Add TailwindCSS to a SvelteKit Project and Build a NavBar Component

Load Data on a SvelteKit Page with +page.js load Function 

Render Dynamic Pages in SvelteKit with Parameter Based Routing

Set Up Sanity CMS to Power a SvelteKit Blog

Query Sanity Content with GROQ to Return a List of Posts

Query a Sanity CMS from a SvelteKit Blog Frontend with +page.server.js

Load a Single SvelteKit Post Dynamically & Render Markdown with MDSvex

Parse and Infer Data Being Fetched in SvelteKit with Zod and JSDoc

Deploy Sanity and Sveltekit to Production

Build a Sanity CMS Powered SvelteKit Blog

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.

https://app.egghead.io/api/v1/lessons/svelte-set-up-sanity-cms-to-power-a-sveltekit-blog/subtitles

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.

Set Up Sanity CMS to Power a SvelteKit Blog

Share this video with your friends

Course

Build a Sanity CMS Powered SvelteKit Blog