DEV Community

Len
Len

Posted on • Originally published at lencoded.com

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?).

i1

i2

i3

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.

Top comments (11)

Collapse
 
recss profile image
Kevin K. Johnson

F is for Friends who do stuff together
U is for You and me
N is Anywhere and anytime at all

Here in the deep blue sea

Collapse
 
ctrlshifti profile image
Kat Maddox

Awesome article!

Collapse
 
amarachiamaechi profile image
Amycruz 👩‍💻 👩‍💻 👩‍💻

In my opinion, JAMstack is not about specific technologies. JAMstack is a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience. It is the combination of underlying tooling that makes JAMstack so exciting. JAMstack is composed of 3 components: Javascript, APIs, and Markup. Read more about JAMstack here 👉
agilitycms.com/resources/posts/top...

Collapse
 
highcenburg profile image
Vicente G. Reyes

Hi, welcome to DEV! Please check out the updated guidelines for the #beginners tag here:

Collapse
 
len profile image
Len

Hi! Thanks for the link :) I'll remove the beginner tag from this post as it seems it doesn't fit the guidelines.

Collapse
 
sawzarnilinhtay profile image
Zarni

Thanks for this article, it is very interesting.

Collapse
 
zaratedev profile image
Jonathan Zarate

I have a question.
¿I can use Nuxt JS as Markup?

Collapse
 
dmahely profile image
Doaa Mahely • Edited

Your text game looks awesome :D great job Len!

Collapse
 
len profile image
Len

Thanks so much for taking the time to check it out!! :)

Collapse
 
hoangvq288 profile image
Quoc Hoang Vu

Thanks for your introduction. :*

Collapse
 
lucasfrutig0 profile image
lucasfrutig0

for a database which one could i use?