Stablo is a JAMStack Blog template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates. It comes with free & pro version.
Feature | Free Version | Pro Version |
---|---|---|
Next.js Codebase | ✅ | ✅ |
Tailwind CSS | ✅ | ✅ |
Integrated with Sanity CMS | ✅ | ✅ |
One-Click Deploy | ✅ | ✅ |
Mobile Responsive | ✅ | ✅ |
Dark & Light Mode | ✅ | ✅ |
Working Contact Page | ✅ | ✅ |
Pagination | ❌ | ✅ |
Category Pages | ❌ | ✅ |
Author Pages | ❌ | ✅ |
Search Page | ❌ | ✅ |
Homepage - Default | ✅ | ✅ |
Homepage - Alternate | ❌ | ✅ |
Homepage - Minimal | ❌ | ✅ |
Homepage - Lifestlye | ❌ | ✅ |
Homepage - Two Column | ❌ | ✅ |
Blog Post - Default | ✅ | ✅ |
Blog Post - Minimal | ❌ | ✅ |
Blog Post - Lifestlye | ❌ | ✅ |
Blog Post - with Sidebar | ❌ | ✅ |
6 Months Support | ❌ | ✅ |
Free Updates | ✅ | ✅ |
License | GPL-2.0 | Commercial |
Pricing | Free | $49 |
Click the above button to deploy for this template on vercel. It is the easist way to clone the repo, configure sanity and deploy to vercel.
The above deploy will automatically configure the following:
.env
variablesOnce you have deployed the website, visit https://your-published-url.com/studio
URL and add your content before visiting your website. Or you will see a blank / broken website. To import demo data as seen in the demo, follow the below steps inside.
.env
variablesnpx vercel link
Then run the following command
npx vercel env pull
npm install # or pnpm install
To look like what you have seen in the demo, with all the content and images, follow the below steps:
Run the following commands from terminal
npm run import # or pnpm import
Now, refresh your published URL again and you will be able to see your website. To continue develop locally, run the following command
npm run dev # or pnpm dev
Now your project should be up and the Next.js frontend will be running on http://localhost:3000.
Sanity Studio can be accessed using http://localhost:3333 by running the following command.
npm run sanity # or pnpm sanity
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.
.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" }, // ...
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
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
A minimal blog website template built with Next.js, TailwindCSS & Sanity CMS
Stablo is a JAMStack Blog template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates. It comes with free & pro version.
Feature | Free Version | Pro Version |
---|---|---|
Next.js Codebase | ✅ | ✅ |
Tailwind CSS | ✅ | ✅ |
Integrated with Sanity CMS | ✅ | ✅ |
One-Click Deploy | ✅ | ✅ |
Mobile Responsive | ✅ | ✅ |
Dark & Light Mode | ✅ | ✅ |
Working Contact Page | ✅ | ✅ |
Pagination | ❌ | ✅ |
Category Pages | ❌ | ✅ |
Author Pages | ❌ | ✅ |
Search Page | ❌ | ✅ |
Homepage - Default | ✅ | ✅ |
Homepage - Alternate | ❌ | ✅ |
Homepage - Minimal | ❌ | ✅ |
Homepage - Lifestlye | ❌ | ✅ |
Homepage - Two Column | ❌ | ✅ |
Blog Post - Default | ✅ | ✅ |
Blog Post - Minimal | ❌ | ✅ |
Blog Post - Lifestlye | ❌ | ✅ |
Blog Post - with Sidebar | ❌ | ✅ |
6 Months Support | ❌ | ✅ |
Free Updates | ✅ | ✅ |
License | GPL-2.0 | Commercial |
Pricing | Free | $49 |
Click the above button to deploy for this template on vercel. It is the easist way to clone the repo, configure sanity and deploy to vercel.
The above deploy will automatically configure the following:
.env
variablesOnce you have deployed the website, visit https://your-published-url.com/studio
URL and add your content before visiting your website. Or you will see a blank / broken website. To import demo data as seen in the demo, follow the below steps inside.
.env
variablesnpx vercel link
Then run the following command
npx vercel env pull
npm install # or pnpm install
To look like what you have seen in the demo, with all the content and images, follow the below steps:
Run the following commands from terminal
npm run import # or pnpm import
Now, refresh your published URL again and you will be able to see your website. To continue develop locally, run the following command
npm run dev # or pnpm dev
Now your project should be up and the Next.js frontend will be running on http://localhost:3000.
Sanity Studio can be accessed using http://localhost:3333 by running the following command.
npm run sanity # or pnpm sanity
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.
.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" }, // ...
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
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