JAMstack as a beginner

I recently built my own website and blog. This was my first time working from scratch on a proper web development project, and I think from the following search history we can all agree that I knew basically nothing (we all have to start somewhere, right?).

Basically, I knew about the big server-side Content Management Systems like WordPress and Squarespace that dealt with everything from UI to back-end code, and I knew about LAMPstack (just not by name) (more on this later). What I didn't know about was JAMstack - and JAMstack was exactly what I was looking for.

So, what is it?

JAMstack is am excellent way to build fast, secure and static websites. If you've never heard about JAMstack - heres what it is:

(keep in mind, not every JAMstack website has every element of the JAM - the core feature that they all have in common is that they are serverless)

J for JavaScript

JavaScript is responsible for fetching all the data to your website (as well as any other dynamic programming that is done client side). The JavaScript can be any flavour you want, too! React? Vue.js? ....... Vanilla JS??

A is for API

This API is how you access your data. What would normally be on your server is now abstracted as an API. For the majority of cases, you would have your data on a 3rd party service known as a headless CMS (such as Contentful, Directus, Kentico Cloud ect).

M is for Markup

Markup (which is not Markdown) has two common manifestations which are HTML and XML. "Don't all websites have Markup though? What makes Markup such an important part of JAMstack?" you may be asking. Here's the deal: unlike dynamic websites which build a fresh page of HTML for every request they get (this involves querying a database and combining that result with Markup and plugins) - JAMstack pages are pre-built at deploy time using Static Site Generators (Jekyll, Gatsby, Hugo). This means they are served with minimal delay time upon request. Not only does that make them fast, the absence of a database query makes them much more secure as well.

Why should you use it?

There are a lot of articles talking about why JAMstack is good, and in the end it boils down to 4 things: websites built using this architecture are faster, more secure, scale better and are modular - leading to a better dev experience.

For me, I chose JAMstack because I wanted an easy way to edit website content while keeping my website as secure and simple as possible.

How can you make a website using JAMstack?

Building a website with JAMstack is a much more beginner friendly than LAMPstack (the whole server-side shebang) in my opinion. It took me just a couple of days to deploy my website to the World Wide Web - and I knew nothing about JAMstack before I started (also the CSS took up 90% of that time).

Here are a some of the configurations you can use JAMstack in:

1. My configuration: Gatsby JS (Static Site Generator) + Contentful (headless CMS) + Netlify (CDN that hosts the site in a distributed manner)
2. Jekyll (SSG) + Github pages (for hosting)
3. Middleman (SSG) + S3 (Simple Storage Service) + Netlify

Here's a bunch of SSGs: The top 10 SSGs of 2018
Here's a bunch of headless CMS: 10 Headless CMS to Consider
Heres a bunch of static website CDNs: What is the best static website hosting provider?

Tutorials? Further reading?

Absolutely yes! The tutorial I used is Content Management with Gatsby, Contentful & Netlify.

Another excellent JAMstack tutorial is How to Make a Blog with Jekyll and Namecheap, Quick and Easy

Also while learning about JAMstack and related issues, I found the article The Sweetness of JAMstack particularly helpful and well written. As well as, of course, jamstack.org.

End

Thanks for reading! If you enjoyed, please check out my twitter @len_coded or my (freshly made, JAMstack) website www.lencoded.com.