Chapter 3: Exploring Sanity Studio

Now that we have a basic Jamstack application installed and configured and have learned about the basic sections of the dashboard and desk, we will begin to build a news and events website based on the example blog that is created.

The main topics that we will cover in this chapter are as follows:

• Modifying the example author
• Removing and adding articles
• Modifying the website settings and redeploying the website

In the Sanity Studio dashboard, the Recent blog posts widget will display a few example articles, so the first step will be to remove those articles and add our own.

Technical requirements

A web browser is needed.

Modifying the example author

The sample author created in the previous chapter is simply an example, so we will modify and personalize the author to our own name. Follow along with each step as we use Sanity Studio to modify the author.

Modifying the existing author

Follow these steps in order to learn how to do this task:

1. Click the Desk icon in the top navigation bar, as shown:
   

   Figure 3.1 – Sanity Studio

   While Dashboard provides a broad overview of the contents, Desk provides a means to view, create, modify, and delete the project's contents.

2. Click Authors in the Content navigation menu (located on the left), as shown:
   

   Figure 3.2 – Authors navigation menu item

3. Click on the example author, My Name, in this case.
4. Change Name to your actual name. Here, the name Christopher John Pecoraro is used as an example.
5. Click the Generate button to generate a new slug. This will be the URL used for the author's profile page.
6. Click the Upload button to upload a new image.
7. Modify the caption and alternative text as appropriate.
8. Modify the biography as appropriate.

   At this point, the article should be showing a draft status. This author is not saved yet:

   

   Figure 3.3 – Draft status

9. Click the Publish button:

Figure 3.4 – Publish button

At this point, the author profile is published and should be displaying a Published status. The latest version of it will be available for use:

Figure 3.5 – Published notification

Notice that the Content menu is collapsed like an accordion, as shown in the following screenshot. The text is displayed vertically:

Figure 3.6 – Author entry

Clicking on the Content bar will display the topmost menu again in Desk.

Creating an additional author

At this point, we only have one author; however, most news websites have more than one author, so follow these steps to create a second author:

1. Click Authors in the Content navigation menu (located on the left), as shown:
   

   Figure 3.7 – Authors menu item

2. Click on the pencil icon to create an additional author, as shown:
   

   Figure 3.8 – Authors header and add new icon

3. Enter a first and last name.
4. Click the Generate button to generate a new slug.
5. Optionally, upload an avatar or profile picture.
6. Add a caption and alternative text.
7. Enter a biography.
8. Click the Publish button as in the previous section:

Figure 3.9 – New author details

We have replaced the example author with two new authors. Similarly, there is additional example content that needs to be dealt with. In the same way that in this section an example author was created, several example articles were created, too.

Removing and adding articles

Now we will remove these articles and begin to create our own content. This will allow us to create our own website.

Removing example articles

Follow these steps to remove the example articles:

1. Click on Blog posts in the main Content menu. Click on the first article.
2. At the bottom of the interface, there is a context menu on the right side of the floating bar, next to the Publish button. Click the down arrow icon and a menu will appear as shown. Delete will be one of the options; click it:
   

   Figure 3.10 – Publish menu

3. A confirmation dialog menu will appear, so click the Delete now button:
   

   Figure 3.11 – Delete confirmation modal

4. Repeat steps 1–3 for each of the articles.

Now that we have removed all of the articles, we will add our first news article.

Creating a new article

Follow the steps to create a new article:

1. From the main Content menu, click the Blog posts menu item.
2. Click on the pencil icon to create a new article.
3. Enter a title for the article.
4. Click Generate to generate the slug.
5. Select a Published at date. At the time of writing, this must be selected and not left as is with the placeholder text:
   

   Figure 3.12 – New blog post form, part 1

6. Upload an image by clicking the Upload button.
7. Enter a Caption and Alternative text:
   

   Figure 3.13 – New blog post form, part 2

8. Complete the Excerpt section by writing a short summary of the article.
9. Select the author by clicking on the Add button and selecting a name and then clicking the Close button.
10. Optionally, select a category.
11. Complete the Body section by entering the contents of the article:
    

    Figure 3.14 – New blog post form, part 3

12. Click the Publish button as in the previous example to publish. The status should change from DRAFT (as indicated by a pencil icon next to the title in the Blog posts menu) to Published.

Modifying the website settings and redeploying the website

Lastly, we need to modify the website settings. After everything is set up correctly, the next step will be to redeploy the website with the changes that we have performed in this chapter.

Setting the website name

Returning to the main Content menu, click the Settings menu item. These settings are the title of the website, a description, a list of keywords, and the website author. For this example, the title will be News and Events:

1. Modify the title.
2. Modify the description.
3. Click the Publish button on the bottom bar:

Figure 3.15 – Settings form

At this point, we have learned about Sanity Studio's basic functionality through creating, deleting, and modifying content using Sanity Studio. Next, we will instruct Netlify to deploy a new version of the website. Netlify will run scripts to enable Gatsby to use the new content together with its templates to create a new version.

Redeployment through Netlify

Follow these steps to redeploy the website using the Netlify platform:

1. Click on the Dashboard icon to return to the dashboard, as shown in the following screenshot:
   

   Figure 3.16 – Link to the dashboard

2. Click the Deploy button that corresponds to the blog website, as shown:
   

   Figure 3.17 – Netlify sites list

   The status will change from Success (green-colored) to Building (orange-colored) during the build process, as shown in the following screenshot:

   

   Figure 3.18 – Netlify Building status

   The build time will vary, but eventually, the status will return to Success.

3. Click the website URL that corresponds to Frontend to view the changes. A reload of the page may be required:
   

   Figure 3.19 – Project info section

4. The website will display an article with its excerpt, as shown in Figure 3.20:

Figure 3.20 – Article excerpt

Summary

In this chapter, we have learned how to use the basic features of Sanity Studio. We are now able to configure basic website information based on the initial example content. We can add, modify, and delete the various content elements. We cannot yet modify the structure of Sanity's documents, though.

In the next chapter, we will learn about Sanity's entities and their relations.