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:
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.
A web browser is needed.
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.
Follow these steps in order to learn how to do this task:
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.
Figure 3.2 – Authors navigation menu item
At this point, the article should be showing a draft status. This author is not saved yet:
Figure 3.3 – Draft status
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.
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:
Figure 3.7 – Authors menu item
Figure 3.8 – Authors header and add new icon
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.
Now we will remove these articles and begin to create our own content. This will allow us to create our own website.
Follow these steps to remove the example articles:
Figure 3.10 – Publish menu
Figure 3.11 – Delete confirmation modal
Now that we have removed all of the articles, we will add our first news article.
Follow the steps to create a new article:
Figure 3.12 – New blog post form, part 1
Figure 3.13 – New blog post form, part 2
Figure 3.14 – New blog post form, part 3
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.
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:
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.
Follow these steps to redeploy the website using the Netlify platform:
Figure 3.16 – Link to the dashboard
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.
Figure 3.19 – Project info section
Figure 3.20 – Article excerpt
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.