Stablo Pro - Next.js & Sanity CMS Blog Template

Thank you for purchasing Stablo Pro. The advanced Pro version of Stablo Blog Template. Stablo is a JAMStack Blog Template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates.

Click here to see live demo →

Template Preview

Sanity CMS Preview

Quick Start

To use the Stablo Pro Template and configure Sanity & Vercel, we recommend the "One Click Deploy" method of Stablo Free Template First. 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 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

1. One click Deploy Free Version

To setup one click deployment, click the above link below and follow the steps. Once you have completed the following steps, you will have the Stablo Free Version running on Vercel. Now follow the steps to configure the Stablo Pro version.

2. Upgrade to Stablo Pro Version

Once free version is deployed, open your github repo you have created for the Stablo Blog and clone it to your local system. Now open the ZIP folder from Web3Templates and extract it. Inside you can see a folder named stablo-pro. Now copy the files inside that folder and replace it with the cloned Blog path.

Now create a commit and push request to your github which will automatically upgrade the content to Pro. You can now start making your changes as needed.

In case you installed stablo free earlier, you can still do a replace with the new files, but this time, use the Git compare option to filter your changes. Then you can merge it as needed.

Local Development

Instead of one-click deploy, If you prefer to do everything manually, Extract the Downloaded ZIP file and move the stablo-pro to your favorite location. eg: /works. Now Open it in your code editor (we recommend VSCode) and please follow the steps.

~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

/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"
  },
  // ...

Run Sanity Studio CMS

Install Sanity CLI globally (if not already)

npm install -g @sanity/cli

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

Import Demo Data

First, download the demo content as zip from the download link you received after purchase. Inside the ZIP, you can find a production.tar.gz file which you should move to the yourProject/studio folder.

Now, you can import the demo data to your sanity studio by using Sanity CLI. To run, open the studio path in the terminal by running cd studio and then run the following command.

sanity dataset import production.tar.gz production

This step is optional, but recommended because otherwise, without any data, you cannot run front-end as it will throw errors. You can delete or modify the data later once you are done with customization.

Run Next.js frontend

Once you have Sanity studio and Data, 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

rwmsousa/blog-exemple