"Jamstack" is an architecture for web apps that promises to be faster and easier to create than the traditional client/server architecture.

In this article, we'll take a dive into the Jamstack architecture to better understand how it works and the advantages it offers. 

We'll also build and deploy a very simple Jamstack app using 

For the practical part of this article, you'll need to have 

 installed on your computer. The examples included assume a Linux-based system.

Rather than serving pages from a web server, Jamstack sites are static pages served directly from a CDN which allows for greater speed and security.

Interactivity and personalization can be provided by JavaScript, which can be used for HTTP connections to API services like cloud databases, payment gateways, content management, etc.

Rather than having a backend web app serving dynamic pages by generating HTML on the fly, Jamstack apps consist of pre-rendered static pages. Since most developers wouldn't want to write their app in HTML, a 

Since Jamstack sites consist only of static assets, this means the site can be served by a distributed file-serving network aka a 

Without any web server to provide functionality, how can a Jamstack site be as dynamic as a traditional web app? For example, how can you personalize your site without a database with customer data to populate authenticated pages?

Most dynamic functionality in a Jamstack app will be provided by JavaScript running in the user's browser. With the emergence of the single-page application app architecture provided by JavaScript frameworks like React, Angular, and Vue, frontend apps can simulate multi-page sites without the need for a web server.

Recently, there here have sprung up many companies providing API-based services including cloud databases (e.g. 

These API services can all be connected to static apps using AJAX requests during the app lifecycle, thereby greatly enhancing the possible feature set for a Jamstack app.

While the idea of Jamstack apps has existed in one form or another for quite a while, Jamstack has only recently become a viable and attractive architecture as the evolution of the ecosystem permitted it. 

For example, without modern JavaScript frameworks and the emergence of API services, Jamstack apps would be severely lacking in functionality when compared to traditional apps.

Let's look at some of the advantages Jamstack provides that make it an attractive option.

Since a Jamstack app does not have a backend server, it can be quite cheap to host. This is because backend apps usually require a web server to be listening all the time for requests, whereas CDN file serving is done with a centralized web server that you won't have to pay as much for.

Jamstack apps will often be faster, since CDN content is served at the network edge. This means that your static files may be served from data centers around the world that are physically closer to your users, reducing latency of requests.

While a web server can also be distributed it will still likely be slower than an optimized CDN.

Even more importantly,  static files are computationally much easier to serve than rendering HTML on the fly, and therefore can be served significantly faster.

Since there is no backend server, Jamstack apps can be more secure than traditional apps since there are much fewer exploitable public interfaces. This means that you, as the developer, don't need to be concerned about server security, authentication management, database exploits etc, which are all sources of vulnerability.

 since the content is distributed across a network, providing another way in which Jamstack can be more secure.

It should be noted that Jamstack apps still have security vulnerabilities - just less than traditional apps. For example, your serverless functions and API calls to cloud services can still introduce security holes.

Of course, Jamstack is not a silver bullet and it may not always be the superior solution.

Getting rid of the web server definitely provides advantages, but there are downsides too.

It might be argued that it's harder to develop Jamstack apps, especially for developers who are traditionally backend developers. Also, Jamstack can't take advantage of the enormous ecosystem of backend software that makes web development easier, including frameworks like WordPress, or Laravel. 

It's also worth noting that most of the advantages of Jamstack are accrued for apps with many users. If you're building an internal tool, like an admin dashboard, you won't get near as many advantages of Jamstack, and it may be wise to stick with a traditional web server solution. 

Now we're clear on what Jamstack apps are and why you might create one. The question now, is, how do you make them?

The center-piece of a Jamstack app is usually the static-site generator. This is a framework that will turn your content into static files ready to be deployed.

These can range from simply (e.g. Eleventy) to more complex (e.g. Next.js). On the simple end, the generator might be little more than a CLI tool that turns markdown into HTML. On the complex end, the generator may allow you to create a feature-rich single-page app to present your static content.

Examples of static-site generators include Next.js, Gatsby, Nuxt.js, Eleventy, and Jekyll.

As discussed, static sites are usually hosted on a CDN. While you could use a CDN service directly, like 

, or AWS S3, it's easier to use a static hosting provider like Netlify or 

The advantage these services offer is that they're geared for Jamstack sites (indeed, the term "Jamstack" was coined by Mattias Billman, CEO of Netlify) and include many useful features that will help in deploying static sites. 

For example, both Netlify and Vercel provide a Git server that you can push to to trigger a build of your site, environment variable management, serverless functions, CI, and more.

Let's see how to build a simple Jamstack site - a blog. To do this, we'll use the Eleventy static-site generator and deploy it to Netlify.

To begin with, let's create a folder for our project and change into it.

Let's now create a markdown file which will be used for the home page content:

# Welcome

This is my first Jamstack site

One of the advantages of Eleventy is that it is very simple to use. In fact, with just one file we can create a build!

We'll use npx (a CLI tool packaged with NPM that allows you to run a package without installing it) and call the Eleventy binary which will create a build:

<h1>Welcome</h1>
<p>This is my first Jamstack site</p>

Of course, this is not a valid HTML page since it's missing document tags. So let's create a

 that Eleventy will use to render our markdown file with.

$ mkdir _includes
$ touch _includes/layout.liquid 

 templating language is one that Eleventy can read and provides a very simple way to provide layouts. Here's the content you should add to your layout file:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{{ title }}</title>
    </head>
    <body>
        {{ content }}
    </body>
</html>

Let's add some frontmatter to the top of the file to allow for some configuration. We'll add a 

 property which tells Eleventy the layout template to use, as well as a 

---
layout: layout.liquid
title: My Jamstack site
---
  
# Welcome

This is my first Jamstack site

Run Eleventy again, and here's the updated content you'll see for 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Jamstack site</title>
    </head>
    <body>
        <h1>Welcome</h1>
		<p>This is my first Jamstack site</p>
    </body>
</html>

While very simple, this is a perfectly valid static site!

Let's use Netlify to deploy this site. First, register for a free Netlify account at 

 folder generated by Eleventy into the browser window. 

Netlify will automatically create a new app and deploy the static files. You can then view your site at https://[your-site].netlify.app!

In this article, you've learned about the Jamstack architecture and should now have an understanding of how it works and the advantages it offers. 

You've also built and deployed a very simple static blog using Eleventy and Netlify. If we connected an API service to this app, we'd have a bonafide Jamstack app.

To continue your discovery of Jamstack, I recommend the following next steps:

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Getting Started with Jamstack</h1><p>"Jamstack" is an architecture for web apps that promises to be faster and easier to create than the traditional client/server architecture.</p><h1><a name="what-youll-learn" id="what-youll-learn">What you'll learn</a></h1><p>In this article, we'll take a dive into the Jamstack architecture to better understand how it works and the advantages it offers. </p><p>We'll also build and deploy a very simple Jamstack app using <a href="https://www.11ty.dev/" rel="noopener noreferrer nofollow">Eleventy</a> and deploy it to <a href="https://www.netlify.com/" rel="noopener noreferrer nofollow">Netlify</a>.</p><h1><a name="prerequisites" id="prerequisites">Prerequisites</a></h1><p>You should be familiar with:</p><ul><li><p>The basics of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" rel="noopener noreferrer nofollow">HTML</a></p></li><li><p>The basics of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" rel="noopener noreferrer nofollow">JavaScript</a></p></li><li><p>The concept of <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side" rel="noopener noreferrer nofollow">server-side programming</a></p></li><li><p>Authoring content in <a href="https://www.markdownguide.org/getting-started/" rel="noopener noreferrer nofollow">Markdown format</a></p></li></ul><p>For the practical part of this article, you'll need to have <a href="https://nodejs.org/en/download/" rel="noopener noreferrer nofollow">Node &amp; NPM</a> installed on your computer. The examples included assume a Linux-based system.</p><h1><a name="what-is-jamstack?" id="what-is-jamstack?">What is Jamstack?</a></h1><p>Rather than serving pages from a web server, Jamstack sites are static pages served directly from a CDN which allows for greater speed and security.</p><p>Interactivity and personalization can be provided by JavaScript, which can be used for HTTP connections to API services like cloud databases, payment gateways, content management, etc.</p><h2><a name="static-pages" id="static-pages">Static pages</a></h2><p>Rather than having a backend web app serving dynamic pages by generating HTML on the fly, Jamstack apps consist of pre-rendered static pages. Since most developers wouldn't want to write their app in HTML, a <em>static-site generator</em> is usually employed.</p><h2><a name="cdn" id="cdn">CDN</a></h2><p>Since Jamstack sites consist only of static assets, this means the site can be served by a distributed file-serving network aka a <em>Content Delivery Network </em>(CDN). </p><p>Without any web server to provide functionality, how can a Jamstack site be as dynamic as a traditional web app? For example, how can you personalize your site without a database with customer data to populate authenticated pages?</p><h2><a name="javascript" id="javascript">JavaScript</a></h2><p>Most dynamic functionality in a Jamstack app will be provided by JavaScript running in the user's browser. With the emergence of the single-page application app architecture provided by JavaScript frameworks like React, Angular, and Vue, frontend apps can simulate multi-page sites without the need for a web server.</p><h2><a name="api-services" id="api-services">API services</a></h2><p>Recently, there here have sprung up many companies providing API-based services including cloud databases (e.g. <a href="https://hasura.io/" rel="noopener noreferrer nofollow">Hasura</a>, <a href="https://fauna.com/" rel="noopener noreferrer nofollow">Fauna</a>), cloud computation (e.g. <a href="https://aws.amazon.com/lambda/" rel="noopener noreferrer nofollow">AWS Lambda</a>), identity management (e.g. <a href="https://auth0.com" rel="noopener noreferrer nofollow">Auth0</a>), eCommerce (e.g. <a href="https://snipcart.com/" rel="noopener noreferrer nofollow">Snipcart</a>), payment processing (e.g. <a href="https://stripe.com" rel="noopener noreferrer nofollow">Stripe</a>) and so on.</p><p>These API services can all be connected to static apps using AJAX requests during the app lifecycle, thereby greatly enhancing the possible feature set for a Jamstack app.</p><h1><a name="why-use-jamstack?" id="why-use-jamstack?">Why use Jamstack?</a></h1><p>While the idea of Jamstack apps has existed in one form or another for quite a while, Jamstack has only recently become a viable and attractive architecture as the evolution of the ecosystem permitted it. </p><p>For example, without modern JavaScript frameworks and the emergence of API services, Jamstack apps would be severely lacking in functionality when compared to traditional apps.</p><p>Let's look at some of the advantages Jamstack provides that make it an attractive option.</p><h2><a name="cheap" id="cheap">Cheap</a></h2><p>Since a Jamstack app does not have a backend server, it can be quite cheap to host. This is because backend apps usually require a web server to be listening all the time for requests, whereas CDN file serving is done with a centralized web server that you won't have to pay as much for.</p><h2><a name="fast" id="fast">Fast</a></h2><p>Jamstack apps will often be faster, since CDN content is served at the network edge. This means that your static files may be served from data centers around the world that are physically closer to your users, reducing latency of requests.</p><p>While a web server can also be distributed it will still likely be slower than an optimized CDN.</p><p>Even more importantly,  static files are computationally much easier to serve than rendering HTML on the fly, and therefore can be served significantly faster.</p><h2><a name="secure" id="secure">Secure</a></h2><p>Since there is no backend server, Jamstack apps can be more secure than traditional apps since there are much fewer exploitable public interfaces. This means that you, as the developer, don't need to be concerned about server security, authentication management, database exploits etc, which are all sources of vulnerability.</p><p>Also, CDNs can provide <a href="https://www.cloudflare.com/learning/ddos/ddos-mitigation/" rel="noopener noreferrer nofollow">DDoS mitigation</a> since the content is distributed across a network, providing another way in which Jamstack can be more secure.</p><p>It should be noted that Jamstack apps still have security vulnerabilities - just less than traditional apps. For example, your serverless functions and API calls to cloud services can still introduce security holes.</p><h2><a name="disadvantages" id="disadvantages">Disadvantages</a></h2><p>Of course, Jamstack is not a silver bullet and it may not always be the superior solution.</p><p>Getting rid of the web server definitely provides advantages, but there are downsides too.</p><p>It might be argued that it's harder to develop Jamstack apps, especially for developers who are traditionally backend developers. Also, Jamstack can't take advantage of the enormous ecosystem of backend software that makes web development easier, including frameworks like WordPress, or Laravel. </p><p>It's also worth noting that most of the advantages of Jamstack are accrued for apps with many users. If you're building an internal tool, like an admin dashboard, you won't get near as many advantages of Jamstack, and it may be wise to stick with a traditional web server solution. </p><h1><a name="making-jamstack-apps" id="making-jamstack-apps">Making Jamstack apps</a></h1><p>Now we're clear on what Jamstack apps are and why you might create one. The question now, is, how do you make them?</p><h2><a name="static-site-generators" id="static-site-generators">Static-site generators</a></h2><p>The center-piece of a Jamstack app is usually the static-site generator. This is a framework that will turn your content into static files ready to be deployed.</p><p>These can range from simply (e.g. Eleventy) to more complex (e.g. Next.js). On the simple end, the generator might be little more than a CLI tool that turns markdown into HTML. On the complex end, the generator may allow you to create a feature-rich single-page app to present your static content.</p><p>Examples of static-site generators include Next.js, Gatsby, Nuxt.js, Eleventy, and Jekyll.</p><h2><a name="static-hosting" id="static-hosting">Static hosting</a></h2><p>As discussed, static sites are usually hosted on a CDN. While you could use a CDN service directly, like <a href="https://www.cloudflare.com/" rel="noopener noreferrer nofollow">Cloudflare</a>, or AWS S3, it's easier to use a static hosting provider like Netlify or <a href="https://vercel.com/" rel="noopener noreferrer nofollow">Vercel</a>.</p><p>The advantage these services offer is that they're geared for Jamstack sites (indeed, the term "Jamstack" was coined by Mattias Billman, CEO of Netlify) and include many useful features that will help in deploying static sites. </p><p>For example, both Netlify and Vercel provide a Git server that you can push to to trigger a build of your site, environment variable management, serverless functions, CI, and more.</p><h1><a name="jamstack-example" id="jamstack-example">Jamstack example</a></h1><p>Let's see how to build a simple Jamstack site - a blog. To do this, we'll use the Eleventy static-site generator and deploy it to Netlify.</p><p>To begin with, let's create a folder for our project and change into it.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-ODDWi" id="cm-ODDWi">$ mkdir eleventy-blog
$ cd eleventy-blog</textarea><h2><a name="creating-content-with-markdown" id="creating-content-with-markdown">Creating content with Markdown</a></h2><p>Let's now create a markdown file which will be used for the home page content:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-C2XT3" id="cm-C2XT3">$ touch index.md</textarea><p>We'll then add some content to the file:</p><textarea data-iscodemirror="true" data-mode="gfm" data-uniqueid="cm-9jCDk" id="cm-9jCDk"># Welcome

This is my first Jamstack site</textarea><p>One of the advantages of Eleventy is that it is very simple to use. In fact, with just one file we can create a build!</p><p>We'll use npx (a CLI tool packaged with NPM that allows you to run a package without installing it) and call the Eleventy binary which will create a build:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-hEB5Y" id="cm-hEB5Y">$ npx @11ty/eleventy</textarea><p>Eleventy will generate a file <em>_site/index.html</em> that looks like this:</p><textarea data-iscodemirror="true" data-mode="text/html" data-uniqueid="cm-feATv" id="cm-feATv">&lt;h1&gt;Welcome&lt;/h1&gt;
&lt;p&gt;This is my first Jamstack site&lt;/p&gt;</textarea><h2><a name="layout" id="layout">Layout</a></h2><p>Of course, this is not a valid HTML page since it's missing document tags. So let's create a<em> layout</em> that Eleventy will use to render our markdown file with.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-vDvOT" id="cm-vDvOT">$ mkdir _includes
$ touch _includes/layout.liquid </textarea><p>The<em> liquid</em> templating language is one that Eleventy can read and provides a very simple way to provide layouts. Here's the content you should add to your layout file:</p><textarea data-iscodemirror="true" data-mode="text/html" data-uniqueid="cm-FFyAD" id="cm-FFyAD">&lt;!doctype html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;{{ title }}&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        {{ content }}
    &lt;/body&gt;
&lt;/html&gt;</textarea><h2><a name="frontmatter" id="frontmatter">Frontmatter</a></h2><p>Let's add some frontmatter to the top of the file to allow for some configuration. We'll add a <code>layout</code> property which tells Eleventy the layout template to use, as well as a <code>title</code> property.</p><textarea data-iscodemirror="true" data-mode="gfm" data-uniqueid="cm-jkCma" id="cm-jkCma">---
layout: layout.liquid
title: My Jamstack site
---
  
# Welcome

This is my first Jamstack site</textarea><p>Run Eleventy again, and here's the updated content you'll see for <em>_site/index.html:</em></p><textarea data-iscodemirror="true" data-mode="text/html" data-uniqueid="cm-Zz1qJ" id="cm-Zz1qJ">&lt;!doctype html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;My Jamstack site&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Welcome&lt;/h1&gt;
		&lt;p&gt;This is my first Jamstack site&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;</textarea><p>While very simple, this is a perfectly valid static site!</p><h2><a name="deploy" id="deploy">Deploy</a></h2><p style="line-height: 1.4;">Let's use Netlify to deploy this site. First, register for a free Netlify account at <a href="https://netlify.com" rel="noopener noreferrer nofollow">https://netlify.com</a>.</p><p style="line-height: 1.4;">Then, go to <a href="https://app.netlify.com" rel="noopener noreferrer nofollow">https://app.netlify.com</a>, and drag the <code>_site</code> folder generated by Eleventy into the browser window. </p><p style="line-height: 1.4;">Netlify will automatically create a new app and deploy the static files. You can then view your site at https://[your-site].netlify.app!</p><h1><a name="wrap-up" id="wrap-up">Wrap up</a></h1><p>In this article, you've learned about the Jamstack architecture and should now have an understanding of how it works and the advantages it offers. </p><p>You've also built and deployed a very simple static blog using Eleventy and Netlify. If we connected an API service to this app, we'd have a bonafide Jamstack app.</p><p>To continue your discovery of Jamstack, I recommend the following next steps:</p><ul><li><p><a href="https://jamstack.org/generators/" rel="noopener noreferrer nofollow">Choose a static-site generator</a></p></li><li><p><a href="https://www.sitepoint.com/jamstack-tools-services-apis/" rel="noopener noreferrer nofollow">Choose some API services to add to your Jamstack apps</a></p></li></ul><p></p><p></p>

AUTHOR

Anthony Gore

"Jamstack" is an architecture for web apps that promises to be faster and easier to create than the traditional client/server architecture. In this article, we'll take a dive into the Jamstack architecture to better understand how it works and the advantages it offers. We'll also build and deploy a…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Getting Started with Jamstack

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript