front matter

foreword

It’s a great pleasure for me to write this foreword to Brian and Raymond’s new book on the Jamstack. Both Brian and Raymond have been part of this dynamic movement that’s changed the face of the modern web over the last 5 to 10 years.

I first met Brian at the start of 2015 when he was speaking about static site engines at the HTML 5 meetup in San Francisco. This was in the earliest days of Netlify, while the product was still in private beta, and before I had even coined the term Jamstack, at a time when just a few early adopters across the industry had started to believe that the web could be simpler, faster, safer, and better to develop with if we embraced the idea of decoupling the web UI from backend infrastructure and business logic.

It was meeting with and talking to these early adopters in different areas of our industry, like Brian, Raymond, and many others working on SaaS applications, headless CMSs, real-time web databases, interactive experiences on the web, and so on, that helped my cofounder and I build conviction that there was a broad, industry-wide change about to happen and that we needed a name for it and a nomenclature around it.

One night, in conversation with a friend, I came up with the term Jamstack and the rest—as they say—is history. We started circulating this term among the people we had connected with as well as the community that was already starting to form around Netlify at the time—Brian and Raymond among them—and the term started spreading.

Today the Jamstack ecosystem is at an interesting point of potential and tension. On the one hand, there’s no doubt that the Jamstack architecture has changed the modern web for the better: we’ve seen a groundswell of platforms, frameworks, APIs, web databases, content, and commerce platforms emerge and grow up around the category, and the web is a second-to-none platform to develop for today. On the other hand, some of the initial principles around simplicity and of prebaking a ready-to-serve frontend are being challenged by different approaches to on-demand edge-based rendering layers and hybrid build tools, where developers sometimes have to navigate different rendering models on a page-by-page basis.

I’ve always known Brian and Raymond as curious minds always searching for simple and approachable tool chains that stay close to the fundamentals of the web. And this book is very much a practitioner’s guide to the Jamstack, where you can take a tour with these two experienced Jamstack developers through a selection of the different build tools and site generators you’ll encounter in today’s Jamstack landscape, learn how to get productive, and make your own choices among different approaches for different projects.

The landscape of tools and frameworks will always be shifting and changing on the web, and no tool will ever be the right one for every problem you will encounter. Building a solid understanding of the strengths and tradeoffs that each tool brings, and developing a good instinct for how each tool feels, will help you better evaluate and navigate the rapidly evolving Jamstack ecosystem as existing frameworks change and innovate, and as new tool chains emerge.

—Mathias Biilmann Christensen

CEO and cofounder, Netlify

preface

Both Brian and I have been fortunate to have been in the web development business for many years. We’ve seen the good (evergreen browsers!), the bad (you’ll get those new features in a year or two!), and the even worse (tables for layout totally make sense). As developers with a bit of experience (and gray hair), we both were excited about the introduction of the Jamstack (or static sites, as it was originally called). In many ways, it was a modern take on building the web that we fell in love with at the start of our careers—one based on simple files that we carefully handcrafted in text editors. But the Jamstack was also much more practical and sensible by making use of the best aspects of modern development frameworks and adopting modern best practices.

As proponents of the Jamstack, we both feel that there’s no better time for developers to get involved. While the Jamstack has been around for a few years now, as a whole, it’s still very new, and the tools and technologies around it are just now becoming mature and gaining mainstream adoption. We both think that the Jamstack is a compelling framework for building websites that’s likely to be useful for most developers. That being said, there’s also a strong need for a book that introduces readers to the Jamstack while also giving them multiple examples of what can be built with it.

As we’re different people with different opinions, you’ll see different tools discussed here, which will hopefully give you an appreciation for the breadth of options available to the aspiring Jamstack developer. We both agree that there’s almost always a way to solve a problem using the Jamstack; the crucial bit is finding the solution that works best for you and your team. While going through the examples in this book, try to focus on the problems being solved, and if you aren’t necessarily happy about the “how,” be happy with the knowledge that there are always alternative solutions that can work much better for you.

—Raymond Camden

acknowledgments

This book, like any good (and hard-won) project, was the work of many people. First, we would both like to thank our esteemed (and very patient) editor, Katie Johnson. Thank you for taking the time to explain the processes as well as putting up with our (totally valid!) excuses. We also appreciate the hard work of all the people at Manning who helped produce this book.

Raymond would like to thank Brian for agreeing to work with him, even though his instincts told him otherwise. The next book will be even more fun, right?

Brian would like to thank Raymond for pushing him into writing this book, and remains grateful even if he complained a lot during the process.

We’d both like to thank all the folks in the Jamstack community who work on the tools or write the articles that this book was built on. No technology can succeed without a great community behind it, and Jamstack definitely has that.

To all the reviewers: Alex Lucas, Amit Lamba, Anshuman Purohit, Baskar Rao Dandlamudi, C. Daniel Chase, Casey Burnett, Conor Redmond, David Cabrero, Fabrice Gouédard, Frans Oilinki, George Thomas, Jason Gretz, John McNew, Jonathan Cook, Mario Ruiz, Matej Strašek, NaveenKumar Namachivayam, Rodney Weis, Sachin Singhi, Satej Sahu, Scott Stroz, Sergio Arbeo, Sheik Uduman Ali M, Steve Albers, Theo Despoudis, Tristan V. Gomez, and Zoheb Ainapore, your suggestions helped make this a better book.

about this book

The Jamstack Book was written to help readers get an understanding of what working with the Jamstack really entails while also providing multiple real-world examples that apply that understanding. It begins by giving several different examples of building common website archetypes using popular static site generators. We then explore other parts of the Jamstack ecosystem that will be useful once developers start creating real-world projects using Jamstack tools.

Who should read this book

The Jamstack Book is for web developers who are looking to embrace, or at least consider, working with the Jamstack methodology. The reader should have a basic understanding of web fundamentals (HTML, JavaScript, and CSS) but need not be an expert in any particular aspect. This book will help cement the many benefits of using the Jamstack by providing multiple examples, such as blogs and documentation sites.

How this book is organized: A road map

The book has 10 individual chapters:

• Chapter 1 explains what exactly is meant by Jamstack and why developers should consider it.

• Chapter 2 introduces Eleventy and demonstrates a very simple brochure-ware site.

• Chapter 3 introduces Jekyll and walks you through building a blog.

• Chapter 4 makes use of the Hugo static site generator and explains how to build a documentation site.

• Chapter 5 demonstrates e-commerce with the Jamstack and uses Next.js.

• Chapter 6 explains how Jamstack sites can be moved into production.

• Chapter 7 demonstrates adding dynamic elements back into static web pages.

• Chapter 8 introduces serverless computing, with a focus on how it complements the Jamstack.

• Chapter 9 talks about how CMSs (content management systems) can be integrated with the Jamstack.

• Chapter 10 wraps things up with a look at how you can migrate to the Jamstack.

Developers can choose to read the book directly from beginning to end; however, chapters 2 through 5 serve as examples of different types of sites that can be built with the Jamstack and can be read in any order.

About the code

Installation instructions for the tools used in this book can be found as follows:

• Chapter 2 covers the installation of Eleventy. The latest installation instructions can be found at https://www.11ty.dev/docs/getting-started/.

• Chapter 3 covers the installation of Jekyll. The latest installation instructions can be found at https://jekyllrb.com/docs/installation/.

• Chapter 4 covers the installation of Hugo. The latest installation instructions can be found at https://gohugo.io/getting-started/installing/.

• Chapter 5 covers the installation of Next.js. The latest installation instructions can be found at https://nextjs.org/docs/getting-started.

This book contains many examples of source code, both in numbered listings and in line with normal text. In both cases, source code is formatted in a fixed-width font like this to separate it from ordinary text. Sometimes code is also in bold to highlight code that has changed from previous steps in the chapter, such as when a new feature adds to an existing line of code.

In many cases, the original source code has been reformatted; we’ve added line breaks and reworked indentation to accommodate the available page space in the book. In rare cases, even this was not enough, and listings include line-continuation markers (➥). Additionally, comments in the source code have often been removed from the listings when the code is described in the text. Code annotations accompany many of the listings, highlighting important concepts.

You can get executable snippets of code from the liveBook (online) version of this book at https://livebook.manning.com/book/the-jamstack-book. The complete code for this book can be downloaded from the GitHub repository at https://github.com/cfjedimaster/the-jamstack-book.

liveBook discussion forum

Purchase of The Jamstack Book includes free access to liveBook, Manning’s online reading platform. Using liveBook’s exclusive discussion features, you can attach comments to the book globally or to specific sections or paragraphs. It’s a snap to make notes for yourself, ask and answer technical questions, and receive help from the author and other users. To access the forum, go to https://livebook.manning.com/book/the-jamstack-book/discussion. You can also learn more about Manning’s forums and the rules of conduct at https://livebook.manning.com/discussion.

Manning’s commitment to our readers is to provide a venue where a meaningful dialogue between individual readers and between readers and the author can take place. It is not a commitment to any specific amount of participation on the part of the author, whose contribution to the forum remains voluntary (and unpaid). We suggest you try asking the authors some challenging questions lest their interest stray! The forum and archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.

Other online resources

There are multiple places where folks can learn more about the Jamstack and keep up on the latest changes. Here’s a list of resources to consider:

• Jamstack.org is a great high-level website about Jamstack, with many links to other resources. You can join its Discord channel as well.

• The New Dynamic (https://www.tnd.dev/) is another great “meta” resource with its own Slack.

• JAMstacked (https://jamstack.email/) is a weekly newsletter Brian curates with the latest news on Jamstack blogs, events, and more.

about the authors

Raymond Camden is a senior developer evangelist for Adobe. He works on the Document Services APIs to build powerful (and typically cat-related) PDF demos. He is the author of multiple books on web development and has been actively blogging and presenting for almost 20 years. Raymond can be reached at his blog (www.raymondcamden.com), @raymondcamden on Twitter, or via email at [email protected]. He’s married with eight kids (yes, you read that right) and multiple furry creatures.

Brian Rinaldi is a developer experience engineer at LaunchDarkly with over 20 years of experience as a developer for the web. Brian is actively involved in the community running developer meetups via CFE.dev and Orlando Devs. He’s also the editor of the JAMstacked newsletter, a biweekly Jamstack focused newsletter.

about the cover illustration

The figure on the cover of The Jamstack Book is “Femme des Environs de Rome,” or “Woman from the Surroundings of Rome,” taken from a collection by Jacques Grasset de Saint-Sauveur, published in France in 1797. Each illustration is finely drawn and colored by hand.

In those days, it was easy to identify where people lived and what their trade or station in life was just by their dress. Manning celebrates the inventiveness and initiative of today’s computer business with book covers based on the rich diversity of regional culture centuries ago, brought back to life by pictures from collections such as this one.