SitePoint
Blog
Forum
Library
Login
Join Premium
Toggle sidebar
Jumpstart Jamstack Development
Toggle community discussions
Close
Content
Files
Bookmarks
Preface
Jumpstart Jamstack Development
Jumpstart Jamstack Development
Foreword
Contributors
About the reviewers
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
1
History of the Jamstack
The evolution of the Jamstack
HTML
Server-side includes
The Common Gateway Interface
Forms
Web page preprocessors
Content Management Systems
WordPress
Ajax
JavaScript frameworks
The rise of the cloud
High-speed access
The rise of the Jamstack
The Jamstack acronym explained
Jamstack advantages
Our Jamstack
GatsbyJS
Sanity.io
Netlify
Getting started with the Jamstack
Installation
Prerequisites
Summary
Introduction to Sanity
Technical requirements
Account setup
Introduction to Sanity.io
What is GROQ?
Creating a project
Introducing Sanity Manage
Sanity.io project pages
Sanity Studio overview
Navigation
Summary
Exploring Sanity Studio
Technical requirements
Modifying the example author
Modifying the existing author
Creating an additional author
Removing and adding articles
Removing example articles
Creating a new article
Modifying the website settings and redeploying the website
Setting the website name
Redeployment through Netlify
Summary
Sanity Configuration and Schemas
Technical requirements
Modeling content with schemas
Cloning the project
Exploring the project's folders
Schema relationships
A one-to-one relationship
A one-to-many relationship
Extending, modifying, and deploying the schema
The event schema
The venue schema
The schema file
Deploying the schema
Summary
Sanity's GROQ Language
Technical requirements
Why GROQ?
Installing Vision
GROQ versus SQL
Basic queries with GROQ
Selecting all events
Selecting all upcoming events
Selecting all past events
Selecting upcoming virtual conference and non-virtual conferences
Selecting specific event fields
Selecting specific fields from relationships
Advanced GROQ
Getting events by venues
Formatting the response
Count result
Summary
Sanity's GraphQL Playground
Technical requirements
An introduction to GraphQL
Deploying the GraphQL API
Basic GraphQL syntax
GROQ versus GraphQL
GraphQL playground basics
Query parameters
Summary
Gatsby – An Introduction
Technical requirements
Gatsby, built on React
Gatsby basic project structure
gatsby-config.js
dotenv
Key Gatsby files
Gatsby folders
The gatsby develop command
Summary
Gatsby and GraphQL
Technical requirements
GraphQL in GatsbyJS
GraphiQL, a GraphQL navigator
Summary
Gatsby Source Plugins
Technical Requirements
Understanding plugins
Node Package Manager
Semantic versioning
Installing a package from npm
Searching, installing, and configuring plugins
The Gatsby Plugin Library
Searching for a plugin
Installing and configuring the gatsby-source-filesystem plugin
Installing and configuring the gatsby-transformer-remark plugin
Installing and configuring the gatsby-source-drupal plugin
Summary
Further reading
Building Gatsby Components
Technical requirements
React components
Tag convention
Understanding the types of components
Gatsby page components
Gatsby template components
Gatsby partial components
Summary
APIs – Extending Gatsby
Technical requirements
Introduction to APIs
Gatsby – APIs
Creating a Netlify form
Configuring a token form in Sanity
Configuring a Netlify function
Summary
APIs – Alexa Skills
Technical requirements
Alexa skill life cycle
Skill interface
Skill service
Creating the skill
Configuring the skill through the skill interface
Build
Code
Test
Summary
Tying It All Together
Technical requirements
Gatsby.js layout modifications
Introducing Tailwind CSS
Installing the Tailwind CSS framework
Using the Tailwind CSS framework
Improving and formatting the event list
Preparing for deployment
Cleaning up the code
Toggling the venue visibility
Summary
Deployment Using Netlify and Azure
Technical requirements
Introduction to Netlify
Netlify plugins
HTML Minify
Advanced configuration through the netlify.toml file
Netlify deployment via the command line
Azure Static Web Apps deployment
Static web app creation
Static web app continuous deployment
Summary
Conclusion
Summary of concepts
The Jamstack's future
Jamstack, JAMstack, and JAM Stack
The Jamstack community resources
Contributing to Jamstack projects
Contributing to Sanity
Contributing to Gatsby
Contributing to Netlify
Final thoughts
Leave a review - let other readers know what you think
Open text modal
Community Questions
Close