Christian Lobaugh
Person drawing at desk

Improving the content editor for my basic Gatsby blog

Creating a Gatsby Blog - upgrading setup

Now that we have a blog, let's upgrade the Sanity Studio to give us more power and a better writing experience.

Step 1 - Download the repository and test

Sanity’s starter gives you a mono repo that contains the gatsby site and the Sanity studio together. The gatsby site is under the web directory and the studio is h set the studio directory. When you run npm run dev from the root of the project it will run both in dev mode which includes hot reloading. This lets you edit the gatsby site and the studio and see them working together.

Let's start by downloading the code. Do a git clone of our repository to our local dev environment.

git clone repository

cd respoitory

npm install

npm run dev

you should now be able to open 2 local browsers and see your web site at localhost:8000 and your studio at localhost:3333. Both have hot reloading so as you make changes to either, you will see those changes immediately in the browser.

Once you have verified the site is running, Ctrl + C to stop the dev, so we can do some work.

Step 2 - Upgrade Sanity

We want to update the base Sanity code to make sure we are starting with the latest and greatest. To do this, we will change to the studio directory and then use the Sanity CLI

cd studio

sanity upgrade

Step 3 - Remove the side bar

The side bar to the right of the studio is quite nice when you are new to Sanity, but at some point you will likely want to remove it. Fortunately, there is a link on the bar to take you to instructions on how to do that (https://www.sanity.io/docs/remove-this-sidebar). It's a simple change to the sanity config. (Note: My instructions differ slightly from the page above at this point as their instructions are currently incomplete. I've let them know and I expect they will correct this soon)

1. Open the sanity.json file located at the root of your studio folder.

2. Locate the parts array.

3. Delete the following object from the parts section (remember to delete any trailing commas as well):

{
  "implements": "part:@sanity/default-layout/studio-hints-config",
  "path": "studioHintsConfig.js" 
}

4. Delete the following from the plugins section (remember to delete any trailing commas as well):

"@sanity/studio-hints"

5. Save the sanity.json file, then quit and restart the studio server with sanity start

Step 4 - Turbo charge the studio

This is where the fun starts. Sanity’s studio is pretty nice out of the box, but we can add some really nice things to make it really special. I'm going to break these changes down over several posts but here is a quick list of what I'm looking at:

  1. Upgrade the block portable text options
    1. Add better inline image than the one that comes with
    2. improve the URL to toggle external link or not
    3. add video embed
    4. add code block
  2. Split pane
  3. Additional view options
    1. web preview
    2. seo/social preview
    3. accessibility preview
  4. media helper
  5. seo auditing


The first thing I'm going to tackle is a need I have for this specific post - support for code blocks inside the portable text editor. It's so much nicer to write and read code that is formatted well. I've not done this with Sanity yet, so hopefully this goes smoothly. I'll detail how this goes in my next post. If you are reading this post before I implement the code block, then forgive the poor formatting of my command line and code examples.