SanityPress

An opinionated and minimally styled starter template with Tailwind CSS and pre-built schema and modules for rapid website development.

⚛️ Neutrino, 🔭 Umbra and 🍃 Foliage themes now available as a bundle!

Visit here for more Studio screenshots.

🖋️ Published on Sanity.io
⚡ Perfect Lighthouse scores on desktop and 99/100 on mobile.
🚀 Checkout the demo site, documentation and blog.

Key Features

✨ Modern Frontend Development with Next.js (App Router, RSC, Typescript) and Tailwind CSS.
📕 Pre-configured Sanity schema for rapid content structuring.
📘 Pre-built frontend components for rapid website development.
✏️ Visual editing right inside the Sanity Studio.
📜 Auto-generated Table of Contents component based on headings.
⌨️ Auto-generated sitemap.xml and blog rss.xml.

Getting Started

Directions are also found on the docs.

1. New repo

Clone, fork or use the template from the GitHub template.

2. Get a new Sanity project ID

From the Sanity.io Manage dashboard, create a new project from scratch (blank schema) with CLI.

3. Update environment variables

# /next/.env.local
NEXT_PUBLIC_BASE_URL = ...
NEXT_PUBLIC_SANITY_PROJECT_ID = ...
NEXT_PUBLIC_SANITY_TOKEN = ... # retrieve from https://sanity.io/manage
NEXT_PUBLIC_REVALIDATE = ... # number in seconds; leave empty for `revalidate: false`

# /sanity/.env.local
SANITY_STUDIO_PROJECT_ID = ...
SANITY_STUDIO_PREVIEW_URL = ... # your live or staging site URL

4. Populate the Studio with content

Open your new Sanity Studio and add (and publish):

a Site document with a title field.
a Page document with the slug index to use as the Home page.
[Optional] a Page document with the slug 404 to use as the Page not found page.

5. Set up deployments

Update the Root Directory (Vercel) / Project Directory (Netlify) with a value of next. This tells the deployment service to serve the next/ directory and not the root.

Optionally, install either of the following plugins to add a widget to your Studio Dashboard:

# Vercel — https://www.sanity.io/plugins/vercel-dashboard-widget
npm i sanity-plugin-dashboard-widget-vercel

# Netlify — https://www.sanity.io/plugins/sanity-plugin-dashboard-widget-netlify
npm i sanity-plugin-dashboard-widget-netlify

6. Customize the frontend

Feel free to adjust styles, add more schema and modules, and more.

Staging

Create a new git branch (call it anything—e.g. staging or preview) and set an environment variable specific to that branch in your deployment service (Vercel or Netlify):

# Environment variable for the staging branch (in Vercel, Netlify, etc.)
ENABLE_PREVIEW = true

Now you can use the preview deployment URL to share staged content (unpublished changes) with your team or clients.

External References

Want to support future updates? Purchase a theme or buy me a coffee ☕!

nuotsu/sanitypress