What is JAMStack? Examples and Demo included

Published in

tajawal

7 min readMar 26, 2020

What is JAMStack? Have you heard about this term before? Well, maybe yes or maybe no. Anyways, let me explain to you about JAMStack in this article.

JAMStack

The JAM in JAMStack stands for JavaScript, APIs, and HTML markup.

JAMStack is an architectural pattern that defines a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and better developer experience. You might say, there are already hundreds of thousands of patterns and best practices. Why another one?

Firstly, let me tell you this, JAMStack is not a new technology but a standard that defines a certain way of developing a website or a web application. JAMStack is focussed on building static websites that are fast and delivered by pre-rendering files and serving them directly from a CDN. Forget complicated deploys with databases and servers and their expensive, time-consuming setup costs, maintenance, and scaling fears.

JAMStack sites directly deployed to Global CDN

Unlike the large legacy apps, JAMstack projects neatly separate the frontend pages and UI from the backend apps and databases

What is the problem with Legacy Websites?

By legacy website, I mean traditional websites that have tight coupling between client and server. For example, a site built with a server-side CMS like WordPress, Drupal or Joomla.

In these types of apps or server-rendered apps, the server generates HTML content at runtime by reading data from Database, by computing incoming requests, etc.

Running sites this way needlessly slows things down, provides way too many opportunities for attack, and is expensive to scale.

What is a Static Website?

A static website is a collection of pre-rendered and highly optimized static pages and assets that have been generated by a build process prior to deployment. Instead of waiting to generate pages when requested, with static sites you pre-build pages and lift them into a global cloud of servers, a CDN — ready to be delivered instantly to your users wherever they are.

When it comes to minimizing the time to the first byte, nothing beats pre-built files served over a CDN.

Pre-rendered sites can be enhanced with JavaScript and the growing capabilities of browsers and services available via 3rd party APIs.

With modern tooling to our disposal, there are several Static Site Generator tools (I have also discussed in detail below) like GatsbyJS, Hugo that can be used to build static websites.

So, what is JAMStack’ed and what is not?

Websites like Facebook, Instagram, Twitter, WordPress, etc all depend on their servers to generate content. They are not JAMStack.

Static sites like gatsbyjs.org, create-react-app, reactjs.org do not depend on servers for generating content. These are JAMStack projects.

JAMStack best practices

Let’s quickly go over a few best practices. You can always find all the details on the JAMStack site.

Pre-built static HTML pages that make up your website. No dynamic page rendering.
Use of a CDN server. By using a global content delivery network like AWS Cloudfront or Cloudflare, you ensure that all your content reaches the user geographically throughout edge locations.
Use of Git. With a Jamstack project, anyone should be able to do a git clone, install any needed dependencies with a standard procedure (like npm install), and be ready to run the full project locally. No databases to clone, no complex installs. This reduces contributor friction and also simplifies staging and testing workflows.
Taking advantage of modern build tools. It can be a jungle to get oriented in and it’s a fast-moving space, but you’ll want to be able to use tomorrow’s web standards today without waiting for tomorrow’s browsers. And that currently means Babel, PostCSS, Webpack, and friends.
Automated builds to deploy your website. Because Jamstack markup is prebuilt, content changes won’t go live until you run another build. Automating this process will save you lots of frustration. You can do this yourself with webhooks, or use a publishing platform that includes the service automatically. For example, you can use AWS CodePipeline to bundle your website from a git push and then deploy it to an AWS S3 bucket.

The advent of Static sites

Static websites and static site generators have been a buzzword of late. There’s a whole new idea of having content in markdown files (.md files), generating HTML out of markdown and then serving pre-rendered HTML to the end-users. No database, no PHP, no server-side scripts generating content. Everything is generated before deployment.

And then use 3rd party service and API providers for a usual website like features. For eg. Netlify provides a built-in Form submission feature for all of its deployed sites. So using that feature you can build a Contact form and see all your responses on Netlify Dashboard.

Some static site generator tools that I like

Gatsby, Hugo, Jekyll are a few tools that I like. They are fast and easy to set up a static website in minutes.

I have worked with GatsbyJS extensively and created a few static sites (demo link at the bottom) for a couple of projects. I also like Hugo a lot. I can quickly create and launch product landing pages and static pages for my needs.

How to create one?

Let’s quickly create a static website using one of the Static Site Generator tools. I will be using Hugo. You can follow the instructions below to quickly get started. I am on a Mac machine.

Install Hugo

brew install hugo

Create your new website project

hugo new site quickstart

This creates a new folder quickstart and copies all the necessary files inside it for you to get started.

Install a theme. There are hundreds of different Hugo themes for you to get started.

cd quickstart git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Please note that you have to download the theme from Github. Remember that JAMStack recommends Github as a tool 🙂

Then, add the theme to the site configuration

echo 'theme = "ananke"' >> config.toml

Create a new markdown file for our page content

hugo new posts/my-first-post.md

Go ahead and edit the content of the file. It will be inside the ./content/posts folder

--- 
title: "My First Post" 
date: 2020-03-26T15:57:31+04:00 
draft: true 
--- This is my first hugo website. Its a static website generator. ### About this wesbite 
### Contact Us [email protected]

Now, start the local server. This will spin up a local dev server at port 1313.

hugo server -D

Once the server is up and running, navigate to http://localhost:1313/ to see your new static website.

Once you are done with your development, create the production build using the command below

hugo -D

This creates a production build inside the ./public folder. Now you can go ahead and deploy your website to any static host provider like Netlify. You can also deploy on Github pages.

Hugo has lots of other configurations and theme options. I would recommend having a look at their official site.

Is React SPA a JAMStack?

No, it is not. Because a React SPA downloads chunks of JavaScript at runtime over the network and builds content on the browser on the fly.

But, if you create a static React website using tools such as Gatsby, then it is.

Demo

Click on the link to open a demo static website that I created using GatsbyJS. Its a dummy blog that was created overnight using GatsbyJS and Bulma CSS. Give me a shoutout for the source code. I have not put it on Github as of now.

All the content is pre-rendered and only the output HTML files for each page are getting served. I am using Netlify for my deployment.

Should my next website be JAMStack’d

Well, it totally depends on your requirements. If your website is heavily dynamic and content is generated at runtime or needs a database for example, then there is no question of going JAMStack. For example a Flight booking app.

But, if your website is simple and mostly serves static content to users, then there’s no need for a Node server or a PHP server serving HTML. You can go JAMStack.

Where do I go from here?

You can read about the following tools,

Static site generators — GatsbyJS, Hugo
Headless CMS — Contentful, NetlifyCMS, Strapi
Static Site Hosts — Netlify, Zeit Now, Github pages, AWS Amplify
Global CDN — Netlify ADN, AWS Cloudfront.

Cheers!

Want similar tutorials to be delivered to your inbox directly? Subscribe to my email newsletter. I also send out free ebooks and tutorial pdfs regularly to my readers. I do not spam by the way and respect your privacy. Unsubscribe any time.

If you like this article, give me a shout on my Twitter handle.

Originally published at https://josephkhan.me on March 26, 2020.