Introduction
When I was starting out in looking for alternatives to migrate my blog as it was previously in Wix.
I was considering using WordPress due to its support by many hosting providers and affordable prices that allows me to host my blog.
I stumble across youtube videos or articles, talking about static site generator.
Which summarises as security, affordability, speed and time for maintenance for websites build using it.
What is JAM Stack?
You might be wondering, why am I talking about static site generators instead of talking about JAM stack? Well to me it's actually one and the same.
Let's break down what does JAM mean. JAM stands for the first J for Javascript, A stands for API and M is Markup.
J for Javascript
For the javascript in JAM, it could be the big 3 in front-end web development.
For most web developers that are Vue, React and Angular which has their own static side generators to present their data.
This does not mean other static site generators could not be used for the J portion of the JAM stack which Hugo, Jekyll, Next does come to mind for it.
A for API
API for JAM stack is usually used to provide a specific functionality like content delivery, email, payment other related services for a website.
Therefore JAM stack could be used for a variety of websites like e-commences besides just company websites or blogs.
Markup
Markup is the bread and butter used to create content for static sites that are served as an API endpoint.
Since they are usually converted into HTML, CSS or Javascript through the use of static site generators.
The time it takes for a website to load is lighting fast.
Advantages of JAM stack
Ease of Development and Deployment
Due to the ecosystem and services by a wide variety of service providers.
The development and deployment of JAM stack based websites can be relatively painless and could be scaled with ease.
Take for example my personal blog, I use netlify as a hosting and deployment service for static sites.
The building process starts by whenever I push my code changes to my Gitlab repository.
Then it pulls content from Contentful endpoint and various other services endpoint.
Which combined with the code changes that I pushed is converted into the various static file through Gatsby.
These newly generated static files are then deployed on Netlify as a website that with CDN, HTTPS and form submission provided for free by Netlify.
Content Creation
Content is usually in a markdown file format but could be other file formats depending on your static site generator.
It is relatively easy to learn even for a person who is not a developer to manage and create content for markdown files.
These could be in gitLab or Contentful, who provides an API endpoint that your static site generator could pull content directly.
Lastly by no means that content should only be in markdown.
In fact, content could be pulled from CMS like WordPress & Contentful or through external API sources which display data
Cost in Maintenance & Managing the Website
Usually, the cost associated with maintaining a website includes the hosting, updating of versions and content update.
It is really affordable or free to host a static site with a bunch of hosting providers ranging from Netlify that I use myself, AWS, Github or GitLab.
Unlike WordPress, there is a need to regularly update due to security reasons.
A static site website removes the need to update your website by using static files it is hard for any hackers.
To hack your website by taking advantage of the security vulnerability founded in your static files.
Conclusion
To date, there are more and more websites that are deployed with static sites due to the above advantages that I had listed out.
One of the notable websites that use the static sites is FreeCodeCamp a popular online platform for developer to have a Coding Bootcamp education for free.
It is actually funny as during that point of the time I didn't know about it.
Despite, I had made changes to the guides during the Hacktoberfest for FreeCodeCamp in markdowm.
It was when I was reading Quincy Larson's the founder of FreeCodeCamp first article on the Dev Community.
That talks about why they had migrated their website to be static sites.
I would consider anyone who is interested in JAM stack to take a look at his article to understand further why did they migrate their website to JAM stack.
If you like my article either sign up for max adventurer's newsletter or you can follow to get the latest update of my article on Dev
This post was originally posted on max's blog at Why JAM Stack? and Photo by Miguel Bruna on Unsplash
Top comments (15)
Yup, It's my mistake in the M portion of JAM stack.
For why I said content is your markdown files and other files are that you normally create content in markdown.
Then your static site generators then convert it into an API or GraphQL endpoint which they consume it during their build process to create HTML, CSS and Javascript.
Besides that, as you had mentioned content could come from API as well depending on the API source you use.
Tell me how do you like handle contact form?
Basic forms?
Netlify Forms, with JS for just validation.
Actual dynamic content? APIs. For example on Firebase, or cloud functions on Azure, AWS, or Google clouds.
Netlify also has 125k functions per site too. Could connect that to a mongodb database
thanks looking into it!
Nelify forms have up to 100 free form submissions per month so it might be useful for basic use cases like a contact form.
Unless you need something more to create a emails list you can embed a sign-up form using MailChimp to do that.
Great post! I think we have just taken for granted if we need data from an API we must have a single page app. I love how JAM stack is pushing back on this.
Thanks alot for reading :) I feel JAM stack is a next evolution for single page app with alot of useful features.
Totally, couldn't agree more.
The play of words right there is awesome (markup/markdown)
Hahaha yeah, I was a bit shocked that I had gotten it wrongly well everyone makes mistakes. Hopefully, it's not that bad I guess.
Nice article, we are also working on themes for Hugo Static Site Generator uicard.io/hugo-themes/
Hope it may help someone :)
The designs for Hugo templates looks awesome :)
Yes that's correct I had updated the article thanks for the help :)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.