using JAMstack architectures
What is JAMstack?
Before we get into the nitty-gritty of how to use the JAMstack to build websites, it’s important to understand what the JAMstack is. The JAMstack is a new way of building websites that delivers better performance, higher security, and lower costs than traditional approaches.
JAMstack is an acronym for JavaScript, APIs, and Markup. The term was first coined by Netlify co-founder Mathias Biilmann in 2015 while he was working on Netlify CMS, a project that makes it easy for non-technical users to edit website content without the need for a backend server.
The key principle of the JAMstack is that all of the dynamic content is served via APIs (usually JSON) from a CDN (Content Delivery Network), and the only thing that is stored on the server is static markup and assets. This architecture has several benefits:
Better Performance: Since all of the dynamic content is served from a CDN, there are no server-side rendering delays. This results in faster page load times and improved user experience.
Higher Security: Since there is no backend server, there are fewer attack vectors for hackers. Additionally, CDNs have built-in security features that make it difficult for attackers to compromise your site.
Lower Costs: Because there is no need for a backend server, hosting costs are significantly lower with the JAMstack. In fact, you can host your entire website on a free static hosting service like GitHub Pages or Netlify.
Now that we’ve covered what the JAMstack is, let’s take a look at how to use it to build websites.
Building Websites with the JAMstack
There are two main ways to build websites with the JAMstack: using a static site generator or using a headless CMS.
Static Site Generators (SSGs) are tools that generate HTML files from templates and data sources. For example, you could use an SSG to take data from a Google Sheet and generate an HTML file for each row in the sheet. Once the HTML files are generated, they can be deployed to a static hosting service like GitHub Pages or Netlify.
Headless CMSs are Content Management Systems that provide an API for managing content but don’t render HTML pages themselves. For example, WordPress can be used as a headless CMS by installing the WP REST API plugin. Once you have WordPress set up as a headless CMS, you can use any frontend framework (such as React or Vue) to build your website and connect it to WordPress via its API.
