Many of us create websites using traditional website builders like WordPress or Ghost. But those of you who want to build fast, easy-to-maintain websites may have heard of the latest technology: the JAMstack.

You might wonder, what's the difference between a website builder like WordPress and the JAMstack? That's what I wanted to know, and after building a few JAMstack sites, here is what I found.

Most people starting a website (for the first time) are considering one of two main options. Either a managed website, like on SquareSpace or Medium, or a self-hosted website, paying for hosting on a server and using something like WordPress.org or Ghost.

When choosing one of these publishing platforms, most people ask themselves the following two questions:

Do I want to produce content and not think about much else? These people typically end up with Medium, or maybe SquareSpace.

Or

Do I want to have total control, but be responsible for everything - SEO, layout, and even hosting maintenance and optimisation? These people typically end up with WordPress.

But we can do it differently.

The JAMstack explained simply

Let's ignore the acronym. Here's the JAMstack in one sentence:

The JAMstack is a static HTML site, rebuilt automatically every time you update the content, and deployed directly to a CDN.

Netlify, one of the JAMstack's biggest proponents (they invented the term), describes it as:

"JAM (Javascript, APIs and Markup) is just a simple terminology around  the new way of making web projects, where you don’t have to host your  own backend that builds the site every time you serve it." — Netlify

Another way is to think about the JAMstack is to consider the components of the website, and who is responsible for what.

When you think in JAMstack terms, you take the questions about what you want to do and break them down into a nice series of questions. These questions are then answered by different people.

1. What's the best platform to create content on? What's a really, really nice interface for my words and photos? This question is answered by content creators (writers and photographers).
2. What's a nice way to design my website? I want a fast, extensible template that I can design once and then use without thinking about design, deploying new content whenever, and whose design I can update easily. This question is answered by designers (who code).
3. Where can I deploy my website so it's blazing fast? This question is answered by systems/infrastructure engineers.

This is the core of the JAMstack, separating three parts of building and deploying websites:

• Host. The servers that serve the information.
• Content. Managed by content producers, like writers and photographers.
• Design. Managed by software that takes the content and makes it into something we can serve to the public.

Let's look at these parts one by one, from easiest to hardest.

Hosting your JAMstack site

Hosting is very easy. Many modern JAMstack websites are fully static sites. They're pure HTML. This is one of the best bits of JAMstack thinking.

Any server can deploy a static site. You have very little to install — just install a web server like Nginx, upload some HTML, and you're done.

Some popular choices are

• Netlify (use this)
• DigitalOcean (self-hosting, like I do)
• Amazon EC2 (scalable hosting)
• GitHub Pages (fun, free, but slow)

Netlify is a great place to start because it has a virtually unlimited free tier. In fact, it's a great place to be in general.

The term JAMstack was actually coined by the founder of Netlify, because it's exactly where he thought static sites built using the JAMstack should end up.

The most important part about hosting is that you should be able to refresh your content quickly and easily. Netlify makes this easy.

You don't want, for example, to have to upload a zip file every time you rebuild your site. It should be an automatic push from your code base.

Content for your JAMstack-driven site

Part two of the JAMstack is deciding where you want to author your content.

You can actually write all your content guerrilla style, uploading photos to a server and directly editing markdown files in a code editor like VSCode (the most popular choice these days). If you publish your content to GitHub or a similar host, you can configure them to republish your whole site every time.

Editing in Markdown can be wonderful, except when you have to upload content anywhere (like images). It's definitely for tech-forward bloggers. Even I'm a tech-forward blogger, and I like it a lot... but I'm writing this article in Ghost's Koenig editor!

Next level up from guerrilla blogging is to use Netlify CMS. This exists as a page on your site, connected to GitHub, that lets you edit markdown docs and upload photos. The rest is still up to you: you do all the image optimisation, SEO and so on.

If those aren't for you, you need a headless CMS.

The most widely used option by big publishers is Contentful. It's a platform that lets a whole team of people work on content, publishing it in a further that can be easily processed by site generators. It has a free option, but quickly gets very expensive.

I actually really like using Ghost as a CMS for building my static site. It is easy to write with and publishes GraphQL, which any website builder can understand easily. It's great!

Design

This is the hardest part of the JAMstack. To deploy a website, you need to find a site builder that ingests the content from the CMS and builds a website.

Then, to design the website, you need to tell the site builder what to do with the content.

Basically you make a bunch of text and images, feed that to the site builder who knows what to do with it, and it spits out HTML and optimised data.

But how does it know what to do with it? This depends on the static site generator that you use.

If you use Gatsby.js, you write your templates in React, a combination of reusable JavaScript/HTML components.

If you use Jekyll, you write your templates in Liquid, which is a lot like Ghost's template language, Handlebars.

Like with any website builder, you can build any website you want to. But it's likely you'll need a developer to put together your templates.

Pros and Cons of JAMstack sites

The JAMstack isn't for everyone. It can do magic for your site performance, but it can also make your life hell!

Pros of JAMstack sites vs WordPress and other site builders are

• They're blazing fast. Because they're just static web pages deployed directly to a CDN, page load times can often be under 1 second — and often much less if you have few images on your website.
• Creating content is easy. You just have to focus on text and images. You can use any editor you want for the text, like even VSCode as mentioned above.

Cons of JAMstack sites vs WordPress and other site builders are

• Updating templates/theme requires coding. You have to know how to write handlebars, liquid, or even React (argh) just to make updates to the template. On the plus side, you can edit it in the same editor you use for the website content.
• You can't custom design pages like you can with site builders. In WordPress, you can just go around building pages looking like whatever you want. You can even drag and drop with really good editors like SquareSpace. Not so with JAMstack sites, where pages are pre-defined as being composed of text and images. Anything else is complicated.
• Managing media is hard without a dedicated content management system. If you decide to just upload Markdown directly to your site and link images, you have to do all the media management yourself. This means you have to optimise images and video, and do all that boring stuff. It's a bit laborious and means that you, as the content maker, can't just focus on content like you want. And some site-builders don't have built-in media management (like Ghost).

So what's the ultimate solution? If there were an integrated platform as rich as Medium's but able to be self-hosted, that's what I'd choose. For now, Ghost is still the best option for most people.

How to get started with your first JAMstack site

The easiest way to get started building a JAMstack site is to use one of Netlify's starter recipes.

I've drawn up a tutorial on getting started with one here.

Epilogue: But what does JAMstack stand for??

If you're dying to know, then the JAMstack refers to "JavaScript-APIs-Markup".

It's named that way because you separate code (J for "JavaScript" that runs in the browser), infrastructure connected via APIs (A for "APIs"), and content that's marked up for publication (M for "Markup").

So maybe CAC would be a better name, but that sounds boring (and is still yet another acronym that someone would debunk). So let's stick with JAM but not worry about what the letters stand for.