In this guide, we will see how to install and setup a template with Sanity CMS. If you have downladed a template which supports CMS, please follow this guide.

One Click Deploy #

If you have downloaded a free template with CMS, such as Stablo Blog Template or similar, you will have an option to install & deploy in one click. If you have that option, please click on the One Click Deploy button in the Github homepage or get the URL from README.md inside the project folder.

To configure the CMS Template with Sanity & Vercel, we recommend the "One Click Deploy" method if available. It will help you to setup the following:

Signup/Login to Sanity CMS (if not already)
Create a Sanity Project
Add required CORS & API settings in the project
Create a new Repository on Github
Install Sanity Integration in Vercel
Add required .env variables
Deploy Sanity Studio
Content Manager
Import Demo Content (as seen in the live demo)
Deploy to Vercel

Upgrading to the Pro Version #

If you have downloaded a Pro Template which also have a free version with CMS included, we recommend you to first install using the One Click Deploy option.

Once free version is deployed, open your github repo you have created in the installation process and then clone it to your local system. Now open the ZIP folder of Pro Template you have downloaded and extract it. Inside it, you can see a folder with the template name. Now copy the files inside that folder and replace it with the cloned Github Repo.

This will create a new changes in the git, which you can create a commit and push request to your github which will automatically upgrade the template to Pro. You can now start making your changes as needed.

In case you installed the free template earlier, you can still replace it with the new files, but this time, please use the Git compare option to skip the changes you made. Then you can merge it as usual.

Manual Installation #

If the template do not provide a One Click Deploy, or you want to install it manually, please follow the steps:

1. Create a Project #

Once you downloaded the template, Extract the Downloaded ZIP file and move the template to your favorite location. eg: /works. Now Open it in your code editor (we recommend VSCode) and please follow the steps.

2. Set Environment Variables #

Follow the steps to set environment variables for Sanity CMS.

1. ~root/.env.local

Change .env.local.example placed in the root folder and rename it to .env.local and add your sanity project ID. Create or get it from https://sanity.io/manage

NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz

2./studio/.env.development or /studio/sanity.json

To develop sanity cms locally, you also need to add the Project ID and Dataset in either .env or in sanity.json file. Change .env.development.example placed in the root folder and rename it to .env.development and add the Project ID and Dataset Name.

# .env.development
SANITY_STUDIO_API_PROJECT_ID=xxyyzz
SANITY_STUDIO_API_DATASET=production

or you can directly replace the project ID in the /studio/sanity.json if you prefer.

// sanity.json
  // ...
  "api": {
    "projectId": "xxyyzz",
    "dataset": "production"
  },
  // ...

For more configuration such as importing demo, please check Configuration Docs.