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

Installation

Follow the installation guide to setup the stablo template.

Step 1. Clone the Repo

Unzip the downloaded zip or clone the github repo to your local machine. Then open the project fodler in your favorite code editor. We prefer VSCode.

Step 2. Setup .env Variables.

Open the project folder and rename .env.local.example placed in the root folder into .env.local and add your sanity project ID. You can create a new project by visiting this link: https://www.sanity.io/get-started/create-project

If you already have a project, copy the project ID from https://sanity.io/manage

NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz

Step 3. Allow CORS Origins

To make the studio work properly, you must add CORS origin in Sanity. Visit https://www.sanity.io/manage/personal/project/<project-id>/api in your browser to add CORS origin.

Click Add CORS origin button and enter the URL as http://localhost:3000 and check the Allow credentials checkbox.

Step 4: Import Demo Data (Optional)

To look like what you have seen in the demo, with all the content and images, follow the below steps:

1. if you have not installed @sanity/cli install it globally first.

npm install -g @sanity/cli
# or
pnpm install -g @sanity/cli

Then login to sanity using sanity login command

sanity login

Now, you will be able to import demo content by running the sanity-import command. The files are located at /lib/sanity/data/production.tar.gz and will load automatically by running the below command.

npm run sanity-import
# or
pnpm sanity-import

Step 5: Finish it up!

Now, run your project using the below 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:3000/studio or you can run it on a separate https://localhost:3333 server using the following command.

npm run sanity
# or
pnpm sanity

Step 6. Deploy Changes

Once all of the above changes is made, make sure to redeploy to vercel once again to see all of your changes in production.

You can git push the changes and it should automatically trigger a new deployment. If not, you can also deploy to vercel using the following command.

npx vercel --prod

Sanity Webhooks & Revalidation

To revalidate the cache when a post is updated, You should set up to receive a validated GROQ-powered Webhook from Sanity.io: https://www.sanity.io/docs/webhooks. Check out the code at /pages/api/revalidate.ts

Here are the steps:

1. Go to the API section of your Sanity project on sanity.io/manage or run npx sanity hook create
2. Click "Create webhook"
3. Set the Name & Description
4. Set the URL to https://YOUR_NEXTJS_SITE_URL/api/revalidate
5. Choose Dataset to "production" or choose the one you prefer.
6. Trigger on: "Create", "Update", and "Delete"
7. Set Filter: _type == "post"
8. Projection: Leave empty
9. Status: Keep it enabled
10. HTTP method: POST
11. HTTP Headers: Leave empty
12. API version: v2021-03-25
13. Include drafts: No
14. Secret: Set to the same value as SANITY_REVALIDATE_SECRET (create a random one if you haven't)
15. Save the cofiguration
16. Add the secret to Vercel: npx vercel env add SANITY_REVALIDATE_SECRET
17. Redeploy with npx vercel --prod to apply the new environment variable

Help and Support

If you need support or help, please contact us via https://web3templates.com/support.