Book Image

Jumpstart Jamstack Development

By : Christopher Pecoraro, Vincenzo Gambino
Book Image

Jumpstart Jamstack Development

By: Christopher Pecoraro, Vincenzo Gambino

Overview of this book

Jamstack (JavaScript, API, and Markup) enables web developers to create and publish modern and maintainable websites and web apps focused on speed, security, and accessibility by using tools such as Gatsby, Sanity, and Netlify. Developers working with Jamstack will be able to put their knowledge to good use with this practical guide to static site generation and content management. This Jamstack book takes a hands-on approach to implementation and related methodologies that will have you up and running with modern web development in no time. Complete with step-by-step explanations of essential concepts, practical examples, and self-assessment questions, you'll begin by building an event and venue schema structure, and then expand the functionality, exploring all that the Jamstack has to offer. You’ll learn how an example Jamstack is built, build structured content using Sanity to create a schema, use GraphQL to expose the content, and employ Gatsby to build an event website using page and template components and Tailwind CSS Framework. Lastly, you’ll deploy the website to both, a Netlify server and the Microsoft Static Web Apps Service, and interact with it using Amazon Alexa. By the end of this book, you'll have gained the knowledge and skills you need to install, configure, build, extend, and deploy a simple events website using Jamstack.
Table of Contents (17 chapters)

Sanity Studio overview

The starter project is a blog site where a user may add the following:

  • Blog posts
  • Authors
  • Categories

Throughout this book, we are going to extend this functionality by creating a news and events website, adding new types of content and new types of fields.

We will manage the application settings and content from Sanity Studio.

Click on the Studio link from the Sanity Studio details section given below the top-level menu.

The first screen contains the Sanity Studio Dashboard, where there are some useful widgets that we are going to explore now.

Navigation

From the Navigation menu, all sections of Sanity Studio may be accessed, as illustrated in the following screenshot:

Figure 2.10 – Sanity Studio navigation menu

Figure 2.10 – Sanity Studio navigation menu

Clicking on the Pencil sign will open a pop-up where you can choose to add a Blog post, an Author, or a Category.

From the Search field, you can look for any Blog post, Author, and Category.

Dashboard and Desk are the two main sections of the application. Let's discuss these in detail.

Dashboard

In the Dashboard section, we have shortcuts divided in blocks that link to all the sections included in Sanity Studio.

Edit your content

From this shortcut, the user has access to subpages of the Desk section, such as the following:

  • Settings
  • Blog posts
  • Authors
  • Categories

Netlify sites

This block lists the Netlify sites created for a project. We can click View or Admin to perform operations on our application. If any website content is changed, a deployment may be triggered by clicking on the Deploy button.

Sanity Studio is the application we are currently using, and Blog Website is our blog application.

Project info

This block lists all information relating to Sanity projects, as follows:

  • Project ID
  • Dataset
  • Frontend
  • GROQ
  • GraphQL
  • GitHub repository

Project users

Similar to the Team section of the Sanity Manage page, Project users lists all the current project's users.

Recent blog posts

As the block title indicates, a list of five recent blog posts will be shown here. Clicking on each blog post title will bring you to the Edit page for that specific blog post.

Desk

From the Desk section of Sanity Studio, the settings and content may be managed.

Settings

The application comes with some basic settings that we will extend during this book.

Basic settings include the following:

  • Title
  • Description
  • Keywords
  • Author

Blog posts

A blog post is a piece of content created by an author. It comes with some preconfigured fields, such as the following:

  • Title
  • Slug
  • Published at
  • Main image
  • Excerpt
  • Authors
  • Categories
  • Body

Authors

Authors are the creators of a piece of content, such as a blog post. Similar to Blog post, this section has preconfigured fields, such as the following:

  • Name
  • Slug
  • Image
  • Biography

Categories

Categories are used to categorize a piece of content. A category may be also used to filter content during a search.

As with the Blog posts and Authors sections, it has a few predefined fields, namely Title and Description.