Stablo - A minimal blog website template built with Next.js, TailwindCSS & Sanity CMS
Stablo Blog Template – Next.js & Sanity CMS
Stablo is a JAMStack Starter template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates.
Click the above button for one-click clone & deploy for this template. Read quick start guide below.
Template Preview
Sanity CMS Preview
Quick Start
To use this template and configure sanity and deploying to vercel, we recommend the “One Click Deploy” method. Just follow the GUI and you will have an exact copy of what you see in the live demo .Using this method will automatically configure the following tasks for you.
- Signup/Login to Sanity CMS (if not already)
- Create a Sanity Project
- Add required CORS & API settings in the project
- Create new Repository in Github
- Install Sanity Integration in Vercel
- Add required
.env
variables - Deploy Sanity Studio – Content Manager
- Import Demo Content (as seen in live demo)
- Deploy to Vercel
To setup one click deployment, click the above link below and follow the steps.
Local Development
Again, we recommend you to use the one-click deploy first which will create a github repo. You can then clone the github repo to your local system and change following .env
variables.
- ~root/
.env.local
Change .env.local.example
placed in the root folder and rename it to .env.local
and add your sanity project ID. Get it from https://sanity.io/manage
NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz
/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.
# .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
// sanity.json
// ...
"api": {
"projectId": "xxyyzz",
"dataset": "production"
},
// ...
Run Next.js frontend
You can use the normal Next.js method to run the frontend. Just run the following command and a live server will open on http://localhost:3000
yarn dev
Run Sanity Studio CMS
- Install Sanity CLI globally (if not already)
npm install -g @sanity/cli
- Run
To run sanity studio server, run the following command in your terminal. It will open a live server on http://localhost:3333
yarn sanity
# or
cd studio && sanity start