The Jamstack Book
Beyond static sites with JavaScript, APIs, and markup
Raymond Camden, Brian Rinaldi
- 280 pages
- English
- ePUB (mobile friendly)
- Available on iOS & Android
The Jamstack Book
Beyond static sites with JavaScript, APIs, and markup
Raymond Camden, Brian Rinaldi
About This Book
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 insideUse 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 siteAbout the reader
For web developers and CMS site developers. About the author
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. Table of Contents
1 Why Jamstack?
2 Building a basic Jamstack site
3 Building a blog
4 Building a documentation site
5 Building an e-commerce site
6 Deployment
7 Adding dynamic elements
8 Working with serverless computing
9 Adding a content management system
10 Migrating to the Jamstack
Frequently asked questions
Information
1 Why Jamstack?
- Defining Jamstack as an architecture for web applications rather than a prescriptive stack of technologies
- How Jamstack formed in response to dynamic web page development that had become cumbersome, slow, and insecure
- Benefits of Jamstack, including page speed, security, and cost
- Exploring well-known websites that are built with the Jamstack
1.1 What is the Jamstack?
- A Jamstack site is primarily built on static assets. Jamstack sites are always deployed as static files. This means that they are not dynamically generated by an application server when the user requests a page; instead, the site files are generated at build time. For a Jamstack site, every user who requests a specific page in their browser will get the same static asset returned. However, this does not mean the content is static. In fact, modern Jamstack sites offer an array of rendering options for the content of pages, including fully static and server-side rendering.
- A Jamstack site is built using a static site generator. The static assets in a Jamstack site are generated using a static site generator (SSG). At a very basic level, a SSG is a tool that takes templates and combines them with content. Content can be stored in files as Markdown, YAML, or JSON files or be pulled from APIs. The content and template combine to dynamically generate the siteās HTML, CSS, and JavaScript assets. This is similar to the process a dynamic web server like PHP might go through on each user request, but, instead, the majority of this process happens at build time before the site is even deployed.
- A Jamstack site leverages APIs. What differentiates a Jamstack site from a simple static site is that, although it is comprised of static assets, it can be very dynamic. The first key ingredient to creating this dynamic functionality is the use of APIs. These APIs can be called by the browser client at run time or even called by the static site generator at build time.
- A Jamstack site uses JavaScript for dynamic functionality. The second key ingredient to making a Jamstack site dynamic is its ability to call APIs and other services asynchronously on the client via JavaScript. JavaScript is what allows the static assets to change dynamically via document object model (DOM) manipulation. Client-side JavaScript powers things like user logins or shopping carts.
1.2 A brief history of Jamstack
- The user would request a page from the browser.
- The browser would hit the web application server, which would load the requested page built using some form of scripting language.
- The scripting language would make calls to the database for things like user information, product information, and/or content.
- The data and script would be combined to generate the HTML that was then sent to the user.
- PerformanceāEach piece of this process entailed small performance costs, from the application server processing the request to the database processing queries, to generating the final HTML. Since this process repeated on each page request for every user, the costs could add up quickly and could be compounded when a web application server or database was under heavy load.
- SecurityāBy nature these applications left a wide surface area open to potential attack. These could include things like vulnerabilities in the web application server to the scripting langu...