contents

front matter

foreword

preface

acknowledgments

about this book

about the authors

about the cover illustration

1 Why Jamstack?

1.1 What is the Jamstack?

1.2 A brief history of Jamstack

The rise of static site generators

From static sites to JAMstack

From JAMstack to Jamstack

1.3 The benefits of Jamstack architecture

Performance

Security

Cost

1.4 When Jamstack may not be the right choice

1.5 Popular sites built with the Jamstack

Smashing Magazine

Nike

Impossible Foods

Restaurant Brands International (RBI)

Digital.gov

1.6 What you’ll learn in this book

2 Building a basic Jamstack site

2.1 Working with Eleventy

Creating your first Eleventy site

Working with template languages

Adding layouts and includes

Using collections in your Eleventy site

Working with data

2.2 Let’s build Camden Grounds

2.3 Going further with Eleventy

3 Building a blog

3.1 Blogging with Jekyll

3.2 Your first Jekyll site

3.3 Writing a Jekyll post

A liquid refresher

3.4 Working with layouts and includes

Layout inheritance

Using includes

3.5 Creating additional files

3.6 Working with data

3.7 Configuring your Jekyll blog

3.8 Generating your site

3.9 Building a Jekyll blog

3.10 Going further with Jekyll

4 Building a documentation site

4.1 Requirements of a documentation site

The example site requirements

4.2 Choosing the right tools

What is a headless CMS?

Headless CMS options

Why Netlify CMS?

Static site generator (SSG) options

Why Hugo?

4.3 Building the example site

Installing Hugo

Creating a new Hugo site

Setting up the Hugo Book theme

Installing Netlify CMS

Modeling content in Netlify CMS

Deploying to Netlify

Configuring GitHub for authentication

Configuring Netlify for authentication

Editing content as an admin

The open authoring workflow

Simplifying the open authoring workflow

4.4 What’s next?

5 Building an e-commerce site

5.1 Requirements of an e-commerce site

The example site requirements

5.2 Choosing the right tools

What is headless e-commerce?

Headless e-commerce options

Why Commerce.js?

Static site generator options

Why Next.js?

5.3 Getting set up to build the example e-commerce site

Setting up Next.js

Setting up Commerce.js

Setting Next.js environment variables

Loading the Commerce.js SDK

5.4 Building the Jam Store e-commerce site

Creating the product listing component

Building the product listing

Building the Product Detail page

Enabling add-to-cart functionality

Building the shopping cart

Adding Markdown content

5.5 What’s next?

6 Deployment

6.1 Web servers—The tried-and-true way

6.2 Cloud file storage providers

Amazon S

Other cloud file storage hosting options

6.3 Azure Static Web Apps

6.4 Deploying with Vercel

6.5 Deploying with Netlify

7 Adding dynamic elements

7.1 Forms, forms, and more forms

Using Google Forms

Integrating FormCake

Other options

7.2 Adding search

Searching with Lunr

Other options

7.3 Other dynamic options

8 Working with serverless computing

8.1 What is serverless computing?

8.2 Building serverless functions with Netlify

Adding serverless computing to Camden Grounds

More on Netlify functions

8.3 Building serverless functions with Vercel

Your first Vercel serverless function

Vercel functions with dynamic path support

Adding serverless functions to Camden Grounds (again)

9 Adding a content management system

9.1 Types of headless CMSs

Pros and cons of Git-based headless CMSs

Pros and cons of API-based headless CMSs

9.2 Exploring popular headless CMSs

Contentful

Sanity

Defining a content model using Sanity

9.3 Using WordPress

Installing WordPress locally with Local

Installing the Gatsby plug-ins for WordPress

Setting up Gatsby

Exploring Gatsby’s data layer

Consuming WordPress content in Gatsby

Next steps in using WordPress as a headless CMS

9.4 Connecting a CMS using a site builder

WeWeb

Strattic

Stackbit

9.5 What’s next?

10 Migrating to the Jamstack

10.1 What kind of site are you migrating?

Content-heavy sites

Web applications

Large sites

10.2 What functionality do you need to migrate?

Popular third-party Jamstack services

10.3 Making the move

Don’t move everything at once

Pick a headless CMS up front

Consider building templates from scratch rather than porting

Keep as much as possible

10.4 What’s next?

index