The Jamstack Book

The Jamstack Book

by Raymond K. Camden, Brian Rinaldi
Released May 2022
Publisher(s): Manning Publications
ISBN: 9781617298882

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Jamstack = JavaScript, APIs, and Markup. Use established standard technologies to build super-fast static websites without sacrificing rich, dynamic features.

In The Jamstack Book, you will learn how to:

  • Use different static site generators to build websites
  • Deploy Jamstack sites with 11ty, Next.js, Hugo, and Jekyll
  • Add dynamic capabilities like form processing and eCommerce
  • Enhance your Jamstack site with serverless capabilities
  • Integrate a CMS with a Jamstack site

Jamstack sites use JavaScript, APIs, and Markup to create fast, dynamic pages without the overhead of heavyweight frameworks. The Jamstack Book is your essential guide to this exciting new web architecture. Written by renowned Jamstack experts Raymond Camden and Brian Rinaldi, it’s filled with real-world projects to develop and hone your skills.

You’ll learn how to lay out and generate a site, set up your own CMS, and add dynamic features like user logins and search functionality. Confusing jargon is demystified. Plus, you’ll get the chance to try out different static site generators and find the one that works best for you. Pick up this book today, and you’ll discover how the Jamstack answers your need for speed and simplicity.

About the Technology
JavaScript, APIs, and pre-rendered Markup put the JAM in Jamstack. This modern web architecture delivers the quick load times of static sites along with the dynamic functionality you need for user-friendly interactive features. Built with lightweight standards and tools, Jamstack sites are fast, secure, easy to maintain, and naturally optimized for mobile and SEO.

About the Book
The Jamstack Book teaches effectively by creating a portfolio of sites, ranging from a simple blog to an eCommerce store. Each new project introduces important skills, including cloud deployment, user logins, and search. You’ll get hands-on experience with tools like 11ty, Next.js, and Netlify. As your skills grow, the examples become more sophisticated, including serverless technology, dynamic forms, and an integrated CMS.

What's Inside
  • Use different static site generators to build websites
  • Add dynamic capabilities like form processing and eCommerce
  • Enhance your Jamstack site with serverless capabilities
  • Integrate a CMS with a Jamstack site


About the Reader
For web developers and CMS site developers.

About the Authors
Raymond Camden is the author of multiple books on web development and has been blogging and presenting for almost twenty years. Brian Rinaldi has been involved in static site and Jamstack development since the early days.

Quotes
Very much a practitioner’s guide to the Jamstack. Take a tour with two experienced Jamstack developers, and learn how to get productive.
- From the Foreword by Mathias Biilmann Christensen, CEO and Cofounder, Netlify

Gives you all the resources you need to build lightning-quick Jamstack sites using familiar technologies.
- Theo Despoudis, WP Engine

Great for building your first Jamstack website, from choosing the correct framework to deployment and production.
- Matej Strašek, Exoticca

Clear and complete….If you want to master the Jamstack, this is the book to read!
- Fabrice Gouédard, Cinéville

Table of contents

  1. inside front cover
  2. The Jamstack Book
  3. Copyright
  4. dedication
  5. contents
  6. front matter
    1. foreword
    2. preface
    3. acknowledgments
    4. about this book
      1. Who should read this book
      2. How this book is organized: A road map
      3. About the code
      4. liveBook discussion forum
      5. Other online resources
    5. about the authors
    6. about the cover illustration
  7. 1 Why Jamstack?
    1. 1.1 What is the Jamstack?
    2. 1.2 A brief history of Jamstack
      1. 1.2.1 The rise of static site generators
      2. 1.2.2 From static sites to JAMstack
      3. 1.2.3 From JAMstack to Jamstack
    3. 1.3 The benefits of Jamstack architecture
      1. 1.3.1 Performance
      2. 1.3.2 Security
      3. 1.3.3 Cost
    4. 1.4 When Jamstack may not be the right choice
    5. 1.5 Popular sites built with the Jamstack
      1. 1.5.1 Smashing Magazine
      2. 1.5.2 Nike
      3. 1.5.3 Impossible Foods
      4. 1.5.4 Restaurant Brands International (RBI)
      5. 1.5.5 Digital.gov
    6. 1.6 What you’ll learn in this book
    7. Summary
  8. 2 Building a basic Jamstack site
    1. 2.1 Working with Eleventy
    2. 2.1.1 Creating your first Eleventy site
    3. 2.1.2 Working with template languages
    4. 2.1.3 Adding layouts and includes
    5. 2.1.4 Using collections in your Eleventy site
    6. 2.1.5 Working with data
    7. 2.2 Let’s build Camden Grounds
    8. 2.3 Going further with Eleventy
    9. Summary
  9. 3 Building a blog
    1. 3.1 Blogging with Jekyll
    2. 3.2 Your first Jekyll site
    3. 3.3 Writing a Jekyll post
      1. 3.3.1 A liquid refresher
    4. 3.4 Working with layouts and includes
      1. 3.4.1 Layout inheritance
      2. 3.4.2 Using includes
    5. 3.5 Creating additional files
    6. 3.6 Working with data
    7. 3.7 Configuring your Jekyll blog
    8. 3.8 Generating your site
    9. 3.9 Building a Jekyll blog
    10. 3.10 Going further with Jekyll
    11. Summary
  10. 4 Building a documentation site
    1. 4.1 Requirements of a documentation site
    2. 4.1.1 The example site requirements
    3. 4.2 Choosing the right tools
    4. 4.2.1 What is a headless CMS?
    5. 4.2.2 Headless CMS options
    6. 4.2.3 Why Netlify CMS?
    7. 4.2.4 Static site generator (SSG) options
    8. 4.2.5 Why Hugo?
    9. 4.3 Building the example site
    10. 4.3.1 Installing Hugo
    11. 4.3.2 Creating a new Hugo site
    12. 4.3.3 Setting up the Hugo Book theme
    13. 4.3.4 Installing Netlify CMS
    14. 4.3.5 Modeling content in Netlify CMS
    15. 4.3.6 Deploying to Netlify
    16. 4.3.7 Configuring GitHub for authentication
    17. 4.3.8 Configuring Netlify for authentication
    18. 4.3.9 Editing content as an admin
    19. 4.3.10 The open authoring workflow
    20. 4.3.11 Simplifying the open authoring workflow
    21. 4.4 What’s next?
    22. Summary
  11. 5 Building an e-commerce site
    1. 5.1 Requirements of an e-commerce site
    2. 5.1.1 The example site requirements
    3. 5.2 Choosing the right tools
    4. 5.2.1 What is headless e-commerce?
    5. 5.2.2 Headless e-commerce options
    6. 5.2.3 Why Commerce.js?
    7. 5.2.4 Static site generator options
    8. 5.2.5 Why Next.js?
    9. 5.3 Getting set up to build the example e-commerce site
    10. 5.3.1 Setting up Next.js
    11. 5.3.2 Setting up Commerce.js
    12. 5.3.3 Setting Next.js environment variables
    13. 5.3.4 Loading the Commerce.js SDK
    14. 5.4 Building the Jam Store e-commerce site
    15. 5.4.1 Creating the product listing component
    16. 5.4.2 Building the product listing
    17. 5.4.3 Building the Product Detail page
    18. 5.4.4 Enabling add-to-cart functionality
    19. 5.4.5 Building the shopping cart
    20. 5.4.6 Adding Markdown content
    21. 5.5 What’s next?
    22. Summary
  12. 6 Deployment
    1. 6.1 Web servers—The tried-and-true way
    2. 6.2 Cloud file storage providers
      1. 6.2.1 Amazon S3
      2. 6.2.2 Other cloud file storage hosting options
    3. 6.3 Azure Static Web Apps
    4. 6.4 Deploying with Vercel
    5. 6.5 Deploying with Netlify
    6. Summary
  13. 7 Adding dynamic elements
    1. 7.1 Forms, forms, and more forms
    2. 7.1.1 Using Google Forms
    3. 7.1.2 Integrating FormCake
    4. 7.1.3 Other options
    5. 7.2 Adding search
    6. 7.2.1 Searching with Lunr
    7. 7.2.2 Other options
    8. 7.3 Other dynamic options
    9. Summary
  14. 8 Working with serverless computing
    1. 8.1 What is serverless computing?
    2. 8.2 Building serverless functions with Netlify
    3. 8.2.1 Adding serverless computing to Camden Grounds
    4. 8.2.2 More on Netlify functions
    5. 8.3 Building serverless functions with Vercel
    6. 8.3.1 Your first Vercel serverless function
    7. 8.3.2 Vercel functions with dynamic path support
    8. 8.3.3 Adding serverless functions to Camden Grounds (again)
    9. Summary
  15. 9 Adding a content management system
    1. 9.1 Types of headless CMSs
    2. 9.1.1 Pros and cons of Git-based headless CMSs
    3. 9.1.2 Pros and cons of API-based headless CMSs
    4. 9.2 Exploring popular headless CMSs
    5. 9.2.1 Contentful
    6. 9.2.2 Sanity
    7. 9.2.3 Defining a content model using Sanity
    8. 9.3 Using WordPress
    9. 9.3.1 Installing WordPress locally with Local
    10. 9.3.2 Installing the Gatsby plug-ins for WordPress
    11. 9.3.3 Setting up Gatsby
    12. 9.3.4 Exploring Gatsby’s data layer
    13. 9.3.5 Consuming WordPress content in Gatsby
    14. 9.3.6 Next steps in using WordPress as a headless CMS
    15. 9.4 Connecting a CMS using a site builder
    16. 9.4.1 WeWeb
    17. 9.4.2 Strattic
    18. 9.4.3 Stackbit
    19. 9.5 What’s next?
    20. Summary
  16. 10 Migrating to the Jamstack
    1. 10.1 What kind of site are you migrating?
    2. 10.1.1 Content-heavy sites
    3. 10.1.2 Web applications
    4. 10.1.3 Large sites
    5. 10.2 What functionality do you need to migrate?
    6. 10.2.1 Popular third-party Jamstack services
    7. 10.3 Making the move
    8. 10.3.1 Don’t move everything at once
    9. 10.3.2 Pick a headless CMS up front
    10. 10.3.3 Consider building templates from scratch rather than porting
    11. 10.3.4 Keep as much as possible
    12. 10.4 What’s next?
    13. Summary
  17. index
  18. inside back cover

Product information

  • Title: The Jamstack Book
  • Author(s): Raymond K. Camden, Brian Rinaldi
  • Release date: May 2022
  • Publisher(s): Manning Publications
  • ISBN: 9781617298882