Giter Site home page Giter Site logo

becuts-blog-proj's Introduction

Stablo Blog Template - Next.js & Sanity CMS

Stablo is a JAMStack Starter template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates.

Click here to see live demo โ†’

Deploy to Vercel & Sanity
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

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
Deploy to Vercel & Sanity

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.

  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

becuts-blog-proj's People

Contributors

cvolticz avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.