Jamstack has revolutionized the way we think about building for the web by providing a simpler developer experience, better performance, lower cost and greater scalability.
This simple guide will help you understand why it exists and how to get started.
Table of contents
What is Jamstack
— Mathias Biilmann (CEO & Co-founder of Netlify).
Websites are served as static HTML files. These can be generated from source files, such as Markdown, using a Static Site Generator.
Today, Jamstack is used to more broadly refer to an architectural approach for building websites. Though there are varying opinions on what exactly Jamstack means today, these attributes are present in most sites that claim to be Jamstack sites:
The front end uses tooling separate from the back end. The front end is typically built using a static site generator. And the back end is often integrated with the front through the use of APIs used during the build process. Server-side processes can also be run using serverless functions.
Here are the main benefits provided by the Jamstack.
Serve pre-built markup and assets over a CDN.
No need to worry about server or database vulnerabilities.
Hosting of static files is cheap oreven free.
Better developer experience
Front end developers can focus on the front end, without being tied to a monolithic architecture. This usually means quicker and more focused development.
If your product suddenly goes viral and has many active users, the CDN seamlessly compensates.
The following tips will help you leverage the best out of the stack.
Content delivery network
Since all the markup and assets are pre-built, they can be served via CDN. This provides better performance and easier scalability.Learn more
Each deploy is a full snapshot of the site. This helps guarantee a consistent version of the site globally.Learn more
Once your build is uploaded, the CDN invalidates its cache. This means that your new build is live in an instant.Learn more
Everything in version control
Your codebase lives in version control system, such as Git. The main benefits are changing the history of every file, collaborators and traceability.Learn more
Your server is notified when a new build is required, typically via webhooks. Server builds the project, updates the CDNs and the site is live.Learn more
Here's an ideal Jamstack workflow:
A brief history of Jamstack shows its growth in popularity.
However you decide to generate your HTML assets is up to you. The three most common approaches are:
Simple and effective method of writing HTML, it's ideal for super simple pages.
Static Site Generators
Most Jamstack sites are powered by a static site generator. There's no enforcement on which SSG you decide to use.
Tools that bring Jamstack to less technical users, while enabling developers to customize sites through modern tooling.
Your built site needs to be hosted somewhere. There are great services that provide this for free and with ease.
Jamstack websites don't have to be static. There are great services available to help bring some dynamic data to your product.
You can also abstract your own functions into reusable APIs.
As you add features to your site, you may want to store user profiles, shopping cart data, game levels, or other dynamic data. There are many DBaaS (database as a service) tools out there today.
Many Jamstack products have dynamic comment sections. These are typically used on blogs.
A great way to interact with your audience. Tools like Netlify support this by default, though there are other form-based services.
Setting up an online store on the Jamstack has never been easier.
Rely on third party services to integrate a search functionality.
Jamstack sites can also be controlled via a Content Management System, these are typically known as Headless CMS. Once a change in the CMS is made, a new build of your site will be triggered and then deployed as static assets.
Here's a list of hand-picked Jamstack resources ranging from learning materials to third party services.
- Awesome Static Website Services
- A List of Content Management Systems for Jamstack Sites
- A List of Static Site Generators for Jamstack Sites
- A List of Themes and Starters for Jamstack Sites
- A curated collection of tools and services
- New to Jamstack? Everything You Need to Know to Get Started
- What is the concept behind Jamstack
- Jamstack ecosystem
- Jamstack modern web development
- Smashing Magazine just got 10x faster
- Ghost on the Jamstack
- Jamstack with Gatsby, Netlify and Netlify CMS
- Jamstack Conf 2022
- The Rise of the Jamstack talk by Mathias Biilmann
- The New Front-end Stack talk by Mathias Biilmann
- The New Dynamic curated videos
- How freeCodeCamp Serves Millions of Learners Using the Jamstack
- Modern Web Development on the Jamstack (O'Reilly, 2022)
- Hugo in Action (Manning, 2022)
- Working with Static Sites (O'Reilly, 2017)
The goal of this project is to gather the concept of Jamstack in a straight-forward way to encourage other developers to adopt the workflow.