Skip to content

Stablo is a minimal blog website template built with Next.js, TailwindCSS & Sanity CMS

License

Notifications You must be signed in to change notification settings

alejosilvalau/stablo

 
 

Repository files navigation

Stablo Blog Template - Next.js & Sanity CMS

Stablo is a JAMStack Blog template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates. It comes with free & pro version.

Deploy to Vercel & Sanity

Live Demo

Free Version Demo →

Pro Version Demo →

Features

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
  Deploy for free Purchase Pro
Upgrade to Pro
Click the above button for one-click clone & deploy for this template. Read quick start guide below.

Template Preview

Next.js Front-end Preview

Sanity CMS Preview

Backend Sanity CMS Preview

Installation

Step 1: Clone & Deploy

Deploy to Vercel & Sanity

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:

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

Step 2: Add Content

Once 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.

Step 3: Set up the project locally

  1. Clone the github repo you have created in step 1
  2. Run the following command to link vercel & pull the .env variables
npx vercel link

Then run the following command

npx vercel env pull
  1. Open the Project in VSCode and open the terminal
  2. Run the following commands from terminal
npm install
# or
pnpm install

Step 3: Import Demo Data

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

Step 4: Finish it up!

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

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.

  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. Get it from https://sanity.io/manage

NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz
  1. /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

  1. Install Sanity CLI globally (if not already)
npm install -g @sanity/cli
  1. 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

Sponsor

image

About

Stablo is a minimal blog website template built with Next.js, TailwindCSS & Sanity CMS

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 99.6%
  • CSS 0.4%