Live Demo

Netlify Astro and Sanity minimal starter with visual editing.

Create local project from this repo and run:

npm install

If you are not already signed into Sanity via the CLI, install the CLI package and then run the login command.

npm install -g @sanity/cli
sanity login

This will open a browser and walk you through the authentication process.

Once authenticated, you'll be able to create a Sanity project and import content.

npm run create-project

Note: You may want to sign into Sanity in the browser and rename your project.

Once the project exists and you've set the environment variables, you can import the content.

npm run import {projectId}

Replace {projectId} with the project ID output from the previous command.

Sign into Sanity to create an editor token, navigate to the following address (replace the SANITY_PROJECT_ID with your project ID) https://www.sanity.io/manage/personal/project/SANITY_PROJECT_ID/api#tokens. Then create .env file in you repo, copy & paste the following environment variables into the file and set their values.

SANITY_PROJECT_ID="..."
SANITY_DATASET="..."
SANITY_TOKEN="..."

Sanity Studio code exists for this project in the studio directory. First, install the dependencies in this directory.

cd studio
npm install

Then create a .env file in the studio directory with the following environment variables and set their values:

SANITY_STUDIO_PROJECT_ID="..."
SANITY_STUDIO_DATASET="..."

Then run the studio locally.

sanity dev

If you want to see the content, you can open your browser and navigate to localhost:3333.

Then you can run the Astro.js development server in root directory:

npm run dev

Install Netlify Visual Editor CLI:

npm install -g @stackbit/cli

And the Stackbit development server.

stackbit dev

This outputs your own Netlify Visual Editor URL. Open this, register or sign in, and you will be directed to Netlify Visual Editor for your new project.

Here are a few suggestions on what to do next if you're new to Netlify Visual Editor:

• Learn how Netlify Visual Editor works
• Check Netlify Visual Editor reference documentation

If you get stuck along the way, get help in our support forums.