An Introduction to the Jamstack
Davis Gitonga / January 11, 2021
7 min read •
"JAMstack" is a modern architecture designed to make the web faster, safer, and easier to scale.
With most internet traffic coming from mobile devices (55.73% market share), users have become increasingly impatient — we want a website to load as fast as possible. (Google also seems to be losing patience and now factors site speed into its famous ranking algorithms.)
What You'll Learn
In this article, we dive into the new, modern approaches to building blazing fast and secure websites.
We'll also build and deploy a simple Jamstack app using Eleventy, a static site generator and deploy it to Netlify.
You should be familiar with:
- The basics of HTML
- The concept of server-side programming
- Authoring content in Markdown syntax
- Command line basics
For the practical part of this article, you'll need to have Node and NPM installed on your computer. Use
node -v on the command line to find your local Node version.
What is the Jamstack?
Mathias Biilmann, CEO and Co-founder of Netlify, coined the term Jamstack. He describes it as;
In other words, it is a way of deploying and serving websites that can be served directly from a CDN and don't rely on requests hitting an active application server.
Let's take a glance at each individually.
Decoupling the frontend from the backend allows for more modular development where we can take advantage of the large ecosystem of third-party APIs to provide page website functionality.
Websites are pre-built and served as static HTML pages from a CDN. These are often pre-built from source files, such as Markdown, using a static site generator for content sites, or a build tool for web apps.
CDN (Content Delivery Network)
A geographically distributed network optimized for serving assets to users. It provides redundancy and improves delivery performance by servicing requests from the infrastructure closest to the user making the request.
To generate the markup that represents a view in advance of when it is required. It happens at build time instead of on-demand so that web servers do not need to perform this activity for every request received.
A Jamstack architecture can bring all kinds of benefits to the sites and project workflows.
Let's check out some benefits Jamstack provides that make it an attractive option.
Static sites have few avenues for attack since it's just HTML files and external API consumption. You need not worry about server or database vulnerabilities.
Jamstack sites embody these principles to enhance security:
- A minimal surface area with mostly read-only hosting infrastructure.
- Decoupled services exposed to the build process and not the public.
- An ecosystem of independently operated and secured external services consumed via APIs.
If your product suddenly goes viral and has many active users, the CDN seamlessly compensates.
A good CDN will have edge nodes distributed globally so that your site is always served to a visitor from the closest server. That improves site performance when considering the geographical location of your site's audience.
Hosting static files is cheap or even free.
Although financial costs are often the most blatant, the Jamstack significantly reduces the cost of innovation and improves team efficiency.
Performance is critical to user experience (UX), user retention, and conversion. Simply put, time is money. Therefore, the faster sites are delivered, the more value they can unlock.
Pre-built markup and assets are delivered to the browser as quickly as possible as they are easy to serve and are closer to the user thanks to the use of a CDN.
The figure below compares both legacy web stack and Jamstack request life cycles.
Better developer experience
Learning and using Jamstack is fun. Web developers can focus on the problem they're attempting to unravel without being tied to a monolithic architecture. That usually means quicker and more focused development.
The following tips will help you realize the real power behind the Jamstack.
Since all markup and assets are pre-built, a CDN is used to serve them. That provides better performance.
Each deployment is a snapshot of the site. That helps guarantee a consistent version of the website globally.
Once a build is uploaded, the CDN invalidates its cache. That means that your new site build is live in an instant.
Git centered workflows
Everything in version control.
Your codebase lives in a Version Control System, such as Git. The main benefits are: change history for every file, collaborators, and traceability.
Your server is notified when a new build is required, typically via webhooks. The server builds the project, updates the CDN, and the site goes live.
Here is how an ideal Jamstack workflow would look like
- The source for the website is a hosted repository that stores content and code together as editable files.
- Whenever the code changes, a build process is triggered that pre‐renders the website, creating final HTML from templates, content, and data.
- The prepared, rendered assets are published globally on a CDN, putting them as close to end users as physically possible.
The figure below describes the Jamstack workflow;
Building the Static Site
We'll dive right in and set up Eleventy, a static site generator.
To begin with, let's create a directory for our project and navigate into it.
mkdir eleventy-blog cd eleventy-blog
We'll go ahead and install Eleventy as a global dependency using NPM.
npm i -g @11ty/eleventy
If you run into any errors when installing the package globally. The solution is running the command with admin privileges i.e.
Then create a new file,
README.md with some content.
echo '# First Jamstack site.' > README.md eleventy
eleventy will compile any files matching valid input template file extensions (
.md is one of them) in the current directory into the output folder (defaults to
eleventy --serve to start up a web server. Then open the Local Access URL
http://localhost:8080/README/ in your web browser of choice to see your Eleventy output.
Let's use Netlify Drop to deploy this site.
Visit https://app.netlify.com/drop, and drag & drop the
_site folder generated by Eleventy into the browser window.
Netlify will publish your static assets and give you a link
https://[your-site].netlify.app to view the site live.
In this article, you've learned about the Jamstack architecture and should now understand how it works and the advantages it offers.
You've also built and deployed a simple static site using Eleventy and Netlify.
I recommend checking out the resources below to continue exploring the Jamstack.
- Choosing a static site generator
- Modern Web Development on the Jamstack (O'Reilly, 2019) Jamstack book
- jamstack.org: a comprehensive guide for building Jamstack sites and home to the global Jamstack community.
- jamstack.wtf: a simple guide to help you understand why Jamstack exists and how to get started.
- Jamstack Explorers Learning Platform created by Netlify Team
- YouTube Video: Rise of the Jamstack talk by Mathias Biillman
- Podcast: Jamstack Radio