How to setup a self-hosted Sanity Studio

Update September 3, 2020: I updated this post to fix some inconsistencies and ensure the information is correct and up to date. I also made some changes to formatting to make it easier to follow.

If you have started using Sanity, you probably know that Sanity will host your Studio for you, but did you know that you can also self-host your Sanity Studio on a domain of your choice? That could be a completely new domain or a subdomain of your main blog.

In this post, I will show you how to set up CI/CD with Netlify for your Sanity Studio on a subdomain of your primary domain. While this post describes how to set up Sanity Studio in Netlify, it could just as well apply to how you host most sites in Netlify.

Sign in/up to Netlify

First of all, you will need a Netlify account. So if you haven't signed up for one already head over to netlify.com and sign up. If you sign up with your Github, Gitlab or Bitbucket account, you make it easier to connect with your repo.

Connect to your repo

Once you've signed up, you should see a dashboard with a big button to the top left that says New site from Git. Go ahead and click that. It will take you to a new screen where you select your repository.

Netlify has support for mono repo now, so if your Sanity Studio follows that structure – it does if you used any of the Sanity starters or followed that same structure – you can point to that repo. You will tell Netlify later how to know which part of the mono repo it should use to build the Studio.

Once you've selected the repo, you go on to a new screen that lets you set up which branch to deploy from and what build commands to use. Change the Branch to deploy if you need; otherwise, you can click Deploy site. You will need some extra set up that Netlify doesn't allow yet at this stage. For now, Netlify runs the build command in the root and generates a random name for you. You can change the name and the domain in the next step.

Deploy settings

Netlify takes you to an overview screen for the new project. This interface is where you find all the details of your Netlify project and where you can change deploy settings, add domain name etc.

Let's start with the deploy settings. Go to Settings -> Build & deploy -> Continuous Deployment and take a look at the Build settings; this is where you set up the build commands and point to the Sanity Studio folder.

1. Point the Base directory to the folder that holds the code to your Sanity Studio, relative to the root of your project.
2. Under Build command, you set the build script from package.json (eg npm run build/yarn build).
3. Point the Publish directory to the dist folder (that's where Sanity's build command puts the built files). Netlify prepopulates the path to the Studio folder, so you don't need to add that manually.

Congratulations, you should now have a working set up for automatic Netlify builds. You can trigger a build in two ways:

1. Push some code changes to the repo.
2. Click the Deploys tab and trigger a new deploy by clicking the Trigger deploy button. You don't need to clear the cache, so the first option (Deploy site) is enough.

Tip: you can check the build logs under the Deploys tab, then select the deploy from the list.

As an aside, Netlify made some changes to their mono repo management a while back. By pointing the base directory to the Sanity Studio folder, Netlify is better able to filter code changes in a mono repo. If your code changes didn't touch the Sanity Studio, it wouldn't trigger a new build.

Add domain

Next up is pointing to your custom domain. Let's say you want to host your Sanity Studio on studio.yourdomain.com. Start by going to Settings -> Domain management -> Domains. Under Custom domains, click the button to Add custom domain. Type in your subdomain and click Verify. Netlify will now try to verify the domain. If the domain isn't registered, you can register through Netlify. Otherwise, you'll see a message saying something like: "yourdomain.com already has an owner. Is it you?" Click the Yes, add domain button.

DNS configuration

You need to set up the DNS records to either point the CNAME record to Netlify or use Netlify DNS. Which one to use is up to you, if you're unsure, don't use Netlify DNS if you host other parts of your site on other services. Either or, you get excellent directions from Netlify on how to set it up.

It might take a little while before the DNS changes have propagated, but in my experience, it's usually quite fast. Netlify will then issue a free SSL certificate for your site to enable https for your Sanity Studio automatically.

Add the subdomain to Sanity allowlist.

The final step is to add the new subdomain to the allowlist in your Sanity.io account. You can do this in two ways:

1. Via the web interface
2. Via the CLI

Via the web interface

Login to your Sanity account and select the project from the list. Go to Settings -> API and click the button Add new origin under CORS Origins. Add the studio URL, including https:// and enable Allow credentials.

Via the CLI

In your terminal, navigate to the Sanity Studio folder (it will enable Sanity to grab the project from the sanity.json context) and run the following command, replacing <your-domain> with the domain you deployed the Studio to:

sanity cors add https://<your-domain> --credentials

Wrapping up

As you can tell, there isn't that much to it. Netlify makes automatic deployments with CI/CD, SSL and custom domain easy. Those are just a few of Netlify's full arsenal of tools, so feel free to browse around and read more about the different tools Netlify provides.