Stablo – Minimal Blog Template

Stablo – Minimal Blog Template
Type: Code
Framework: Next.js
CSS: Tailwind

The Stablo Blog Template is a JAMstack blog template built with Next.js, Tailwind CSS, and Sanity CMS. It offers both a free version and a pro version with various features. This template can be used to create a blog with different homepage layouts, blog post templates, and more. Below are the installation steps:

Features:

  • Next.js v13
  • /app Directory
  • Tailwind CSS
  • Sanity CMS (v3)
  • Mobile Responsive
  • Dark & Light Mode
  • Working Contact Page
  • Archive (Pagination)
  • Category Pages (Pro Version)
  • Author Pages (Pro Version)
  • Search Page (Pro Version)
  • Various Homepage Layouts (Pro Version)
  • Different Blog Post Templates (Pro Version)
  • 6 Months Support (Pro Version)
  • Free Updates

Installation Steps:

Step 1: Deploy to Vercel

  1. Use the provided Deploy Button to deploy the starter using Vercel.
  2. This deployment will create a new repository on GitHub, a Sanity project, and configure the necessary settings.
  3. You can also deploy to other services like Netlify or Cloudflare Pages if you prefer.

Step 2: Set up the project locally

  1. After deploying, clone the GitHub repository to your local machine using the git clone command.
  2. Use the npx vercel link command to link your Vercel project to your local repository.
  3. Use the npx vercel env pull command to pull the .env variables to your local system.
  4. You will now have an .env.local file that contains the necessary environment variables. You can also manually create this file if needed.
  5. Install project dependencies using npm install, yarn install, or pnpm install (if you prefer to use pnpm).

Step 3: Import Demo Data (Optional)

  1. If you want to import demo data to make your project look like the demo, follow these steps:
  2. Install @sanity/cli globally using npm install -g @sanity/cli or pnpm install -g @sanity/cli.
  3. Log in to Sanity using the sanity login command.
  4. Run the npm run sanity-import or pnpm sanity-import command to import demo content from /lib/sanity/data/production.tar.gz.

Step 4: Finish It Up

  1. Run your project using npm run dev, yarn dev, or pnpm dev.
  2. The Next.js frontend will be running on http://localhost:3000.
  3. Access Sanity Studio using http://localhost:3000/studio or by running it on a separate server using npm run sanity or pnpm sanity.

Step 5: Redeploy

  1. After making changes and configurations, redeploy to Vercel by pushing changes to your GitHub repository.
  2. You can also deploy to Vercel using the npx vercel --prod command.

Manual Installation: If you cannot use the one-click deploy option, you can manually clone the repo and follow the provided instructions for setting up environment variables, allowing CORS origins, and continuing with the installation steps.

For personalized support and assistance, consider purchasing the Pro version of the template.

Note: The template is available as a free version and a Pro version with additional features, support, and a commercial license. Make sure to choose the version that suits your needs.

Sign In

Register

Reset Password

Please enter your username or email address, you will receive a link to create a new password via email.