Deploying Sanity Studio with Surge

Step 1: Setting Up your Sanity Studio Project

NOTE: You can skip this step if you already have a project set up.

First, install the Sanity CLI:

npm i -g @sanity/cli

To initiate a new project and download the Studio code to your computer, run the following in the command line:

sanity init

The Sanity CLI will walk you through the necessary steps to set up a project, letting you choose a schema template. When you're done with these steps, the CLI will download the source code and configuration to get you started. To start a local development server, cd into the project folder and run the following command:

sanity start

Step 2: Preparing for Deployment

First, install the Surge CLI:

npm install --global surge

Open your package.json and add scripts as below:

"scripts": {

"start": "sanity start",

"build": "sanity build",

"deploy": "cd dist && surge"

}

Step 3: Deploy With Surge

To deploy run:

npm run build && npm run deploy

Once Sanity Studio is deployed, you will need to add it's URL to Sanity’s CORS origins settings. You can do this from the command line:

sanity cors add https://your-url.surge.sh --credentials

Alternatively, you can navigate to manage.sanity.io, find your project and under Settings > API, add the Studio URL to the CORS origins list. You should allow credentials as the Studio requires authentication for added security.

Sanity – The Content Operating System that ends your CMS nightmares

Sanity replaces rigid content systems with a developer-first operating system. Define schemas in TypeScript, customize the editor with React, and deliver content anywhere with GROQ. Your team ships in minutes while you focus on building features, not maintaining infrastructure.

Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.