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)

Creating a project

After you have successfully created accounts on Sanity.io, GitHub, and Netlify, we can begin with the project creation, using the Sanity.io Blog with Gatsby starter project.

The Uniform Resource Locator (URL) for Sanity.io project creation is https://www.sanity.io/create.

Click on the Create project link, as shown in the following screenshot:

Figure 2.1 – Sanity create page

Figure 2.1 – Sanity create page

There are three steps to complete for creating our very first project, as follows:

  1. Log in to your Sanity.io account using one of the aforementioned methods, and add the Project title. Sanity needs this section to create a new Sanity project for you. We can set the Project title as <Your Name> hands-on Jamstack. The following screenshot shows an example of this:
    Figure 2.2 – Connect to Sanity.io

    Figure 2.2 – Connect to Sanity.io

    Sanity will create a repository for the project. Click the Sign In button to connect to your GitHub account and rename the repository as your-name-hands-on-Jamstack.

    Note

    You cannot have any spaces in the name.

    Optionally, you may set it as a private repository. On each git push to the remote repository, the website will be automatically redeployed, as illustrated in the following screenshot:

    Figure 2.3 – Connect to GitHub

    Figure 2.3 – Connect to GitHub

    Sanity will automatically deploy your application to Netlify and make it available to the web.

  2. Click the Connect button to connect to your Netlify account, and we are ready to go! You should see the following message:
    Figure 2.4 – Connect to Netlify

    Figure 2.4 – Connect to Netlify

  3. Now, press the Create project button, as illustrated in the following screenshot, and in a short amount of time the project will be set up:
Figure 2.5 – Create project

Figure 2.5 – Create project

Once the project is created, Sanity will deploy two web applications to Netlify.

The first web application is the frontend website driven by Gatsby that connects to the Sanity-hosted backend.

The URL structure format is as follows:

https://website-name.netlify.com

You can see that it takes the form of the project name plus the Netlify domain.

The other web application is Sanity Studio, where we can manage the content. The URL structure format is as follows:

https://website-name-studio.netlify.com

You can see that it takes the form of project name, a dash, the word studio, and then the Netlify domain.

Let's start exploring Sanity.