Get started

Start building your website!

Set up your environment

You will first need to have node and npm/yarn installed

Step 1. Unzip your downloaded folder:

Mac - double click to unzip your file
Windows - extract zip files

Step 2. Open the unzipped template in your code editor:

VSCode documentation can be found here (opens in a new tab)

Step 3. Install your dependencies

Open up your terminal in your code editor and install your dependencies. The following instructions will be using npm, but you can also install your dependencies using yarn.

npm

npm install

Step 4. Install the Sanity CLI

The Sanity docs can be found here (opens in a new tab)

npm

# Running the CLI without global installation
npx -y sanity@3
 
 
# Alternatively installing the CLI globally
npm install --global sanity@3

Step 5. Create a Sanity project

npm

npx create sanity@3 init --env

After running the command, you will be prompted to configure your project:

Create a new project
Set your project name: i.e. My Portfolio
Use Use the default dataset configuration? Yes
Would you like to add configuration files for a Sanity project in this Next.js folder? No

Ensure that you select `no` when asked if you would like add config files for your Sanity project

Step 6. Create Sanity api read token

Navigate to your Sanity Projects (opens in a new tab) and click on your new project
Click on the API tab and then Tokens
Create a new API token, i.e. viewer
Copy the API token generated and set it to the NEXT_PUBLIC_SANITY_TOKEN variable in your .env file.

Step 7. Get it running 🏃🏽‍♂️

This is where the fun begins

How to run locally

To run your code locally, run the following command

npm

npm run dev

How to upload your data

To learn more about sanity - read the docs here (opens in a new tab)

When you run your code for the first time, you will see a page which guides you to your studio - your studio is where you control all your websites content - where you upload and edit all your of data

You can access your data by appending your base url with /studio

When you publish any changes it takes roughly a minute to update, so give it some time

How to preview your website

Preview mode allows you to preview your data before publishing it for the world to see. It provides you with real time data.

You can go on preview mode by appending your base url with /api/preview

To exit preview mode, append your base url with /api/exit-preview

Introduction Deployment