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)

Chapter 2: Introduction to Sanity

Throughout this book, we will build a news and events website and make use of Sanity.io as a structured content framework. We will explore how to create and manage content and new types of content by adding custom fields, defining validation rules for the fields, and customizing Sanity Studio. We will also learn how to source our content to a frontend framework through the Graph-Relational Object Queries (GROQ) Sanity.io query language and GraphQL.

We will make use of JavaScript React-based Gatsby as our frontend framework and we will run through the components of the framework, showing how to manage routes, pages, and single components such as images, calendars, forms, listings, and more.

We will host the application on Netlify, which is a platform for automating the deployment of web projects. We will manage our code through the GitHub distributed source code versioning system and connect it to Netlify, in order to trigger automated deployment every time we add a new feature to our code repository.

This chapter will cover the following main topics:

  • Account setup
  • Introduction to Sanity.io
  • Creating a project
  • Introducing Sanity Manage
  • Sanity Studio overview