This document is a translated version of the official steps explained in Japanese. If you would like to check the English version, we recommend referring to the official page.

• Hello, Studio
• Local development
• Creating a schema
• Deploying your Studio

Starting Sanity Studio

We will launch Sanity Studio, which will serve as the basis for the content management we will be implementing going forward.

Instead of the commands provided in the guide, execute the following commands.

In order to set up the same as the sample, we will answer each question as follows.

Once the project has been created, navigate to the path you created and execute the following command.

When you execute it, the URL will be displayed, so please access it. After logging in, the following screen will be displayed.

You were able to log in, but since you have not defined any content, nothing will be displayed.

Creating a schema

Regarding the creation of Sanity Studio schemas, the configuration file states the following (excerpt only)

The contents of the file being read above are as follows.

Sanity allows you to define content schemas using TypeScript.

I would like to create a schema for event information. Create the file apps/studio/schemaTypes/eventType.ts.

Let's load this schema into index.ts.

Once the above changes are applied, the management screen that is currently running will be updated, enabling you to add content called "Event."

In this way, the items defined in the schema are defined as content items.

Next, we will add the Artist and Venue schemas.

The artist samples are as follows.

Next, create a Venue.

Reflect the above two in index.ts.

After the change, refer to the Sanity Studio screen to see the updates.

Next, update the event schema. Several fields are provided on the official website, which you will add in order. The completed code will look like this.

There are two additional points to note regarding field types.

• reference: This type is a field that references content of a different schema type.
• block: A field type that allows you to create content that is as versatile as rich text.

Importing sample data

Download the sample data provided on the official website, create a data folder in day-one, and move it there.

Next, execute the following command in the studio path to import (replace path as appropriate).

When the import is successful, the following message will be displayed.

After the import is complete, check Sanity Studio to confirm that the content has been imported.

The server is now ready for content editing.

To avoid having to select the host name every time you deploy in the future, add the host name to the sanity.cli.ts file along with the studioHost line.

Now, you can automatically deploy Studio by simply executing the command.

Summary

This time, we introduced how to start Sanity Studio. For a more detailed step-by-step explanation, please refer to the official guide.

• Hello, Studio
• Local development
• Creating a schema
• Deploying your Studio

The code up to this point is available in the following repository/branch.

• Day One - Step 1

Learning GROQ

In addition to GraphQL, GROQ is another mechanism provided for retrieving data stored in Sanity. In this article, we will verify the operation of GROQ.