Deploy Sanity and Sveltekit to Production
We are now ready to deploy. We can first deploy our CMS by running the command npm run deploy. Make sure you are in that project's terminal when you deploy.
Next we need to set up a github repository for our app. Then we can push our code to the repository.
Finally, we can go to Vercel. Create an account if you do not have one and link it to your github. If you are creating an account you will need to make sure that you give Vercel permission to read your repositories or a selected repository.
Then in your Vercel dashboard click 'New Project' and choose your newly created project for your SvelteKit blog.
Add your environment variables (you can copy and paste them)
Then deploy 🎉
After deployment go to the url it provides and now you have a deployed blog.
To make sure all works as expected go ahead and log in to Sanity. Choose your project. It will be named whatever name you gave it when creating your Sanity project. Then click "Open Sanity Studio".
Now navigate to Posts and click the create new post icon. Go ahead and create a second post. Click "Publish" and then navigate back to your posts page on your blog site and now we have posts uploading to our site as we write them.
Note: If you are already on the the /posts page on your blog site when you go back to it, you will need to refresh the page.
Instructor: [0:00] Sanity is really simple to deploy. We can just say, npm run deploy. We'll just leave all the defaults for now.
[0:08] With that deployed, we can now work on setting up our SvelteKit front-end with GitHub and then Vercel. Let's open GitHub. First, we want to come in and let's click New. We're just going to call this SvelteKit Blog Front-end, public, Create Repository, and we can just grab this command, copy it.
[0:38] Let's come back into our terminal, make sure you're in My SvelteKit Blog terminal, and then paste that from GitHub. There we go. We'll see that it's added all of the files. Then, now we can just run, and git created our SvelteKit blog, and then just push domain.
[1:03] Let's go to Vercel. Make sure you have an account, are logged in. Add a new project. We just created this SvelteKit blog front-end. Let's import that and let's give it some environment variables. We can just copy and paste these. If you haven't seen this, it's pretty cool. There we go.
[1:25] Now, if we click Deploy. Let's go to the dashboard and let's click the domain. Now is the moment of truth. There is our first post from CMS. If we go to the page, and there we go, we have our blog up and running.
[1:44] Now we want to make sure that this is working with our deployed version of our Sanity Studio. We can go to Sanity and log in. It may want you to go through the authorization process with GitHub OAuth.
[1:58] Once you do that, then open your project, give it the name that you gave it in your Sanity config, and then go to Open Sanity Studio, and then Posts. Let's click to add a new post, just call it Second Post. Generate the slug, give it the author.
[2:19] We made categories mandatory, so let's add a category Sanity. We'll publish it to the current time. We'll say, "Yay, our second post." You can just give it some more excitement. Before we publish that, let's go back to our post page and see it's not there. Then once we click publish, it was published successfully.
[2:53] Then if we refresh, we're now getting our second post. It's working how we expected. We have our deployed version of our site and our deployed version of our CMS. Now, we can write blog posts and then they will show up on our deployed blog site.