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 โ
Follow the installation guide to setup the stablo template.
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.
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
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.
To look like what you have seen in the demo, with all the content and images, follow the below steps:
- 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
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
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
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:
- Go to the API section of your Sanity project on sanity.io/manage or run
npx sanity hook create
- Click "Create webhook"
- Set the Name & Description
- Set the URL to https://YOUR_NEXTJS_SITE_URL/api/revalidate
- Choose Dataset to "production" or choose the one you prefer.
- Trigger on: "Create", "Update", and "Delete"
- Set Filter: _type == "post"
- Projection: Leave empty
- Status: Keep it enabled
- HTTP method: POST
- HTTP Headers: Leave empty
- API version: v2021-03-25
- Include drafts: No
- Secret: Set to the same value as SANITY_REVALIDATE_SECRET (create a random one if you haven't)
- Save the cofiguration
- Add the secret to Vercel:
npx vercel env add SANITY_REVALIDATE_SECRET
- Redeploy with
npx vercel --prod
to apply the new environment variable
If you need support or help, please contact us via https://web3templates.com/support.