Building a Jamstack website

The term Jamstack can sound alien if you haven't met it, and it is often confused with development stacks like MERN or LAMP.

What is Jamstack?

Jamstack is a set of practices, an architecture for the web rather than a list of tools. JAM stands for JavaScript, APIs and Markup.

With a traditional CMS, a web server builds each page on the fly when someone requests it. With Jamstack, pages are built ahead of time, during deployment, and served from a CDN close to the visitor. Nothing beats that time to first byte, and both your visitors and search engines want a site that is fast and secure.

The name is used less these days, but the idea won: most modern frameworks, including Astro (which this site uses), build pages ahead of time by default.

Prerequisites

A GitHub account, and a Netlify account. Signing up for Netlify with GitHub makes the next steps quicker.

Step 1: Pick a template

In 2021 this step started on Stackrole, which collected open-source and premium Jamstack templates. Stackrole has since closed, but its free starter, gatsby-starter-foundation, is still on GitHub, and Netlify and most frameworks have template galleries of their own.

Step 2: Deploy

Many templates have a Deploy to Netlify button in their README. Clicking it asks you to connect GitHub and authorise Netlify, then to name the repository Netlify will create in your account. Choose Save and deploy, and Netlify copies the template into your GitHub account and starts building the site.

No button? Copy the template to your own account on GitHub (use Use this template or fork it), then in Netlify choose to add a new project and import it from GitHub.

You can watch the build log while it runs. When it finishes, your site is live at an address like https://your-site-name.netlify.app. You can rename it or add your own domain later.

Step 3: Make changes

Your site's code is now a repository in your GitHub account. Clone it, open it in your editor, make changes and push. I like GitHub Desktop for this, because it keeps the workflow simple.

Every push triggers a new build on Netlify, and the site updates in a minute or two. Check the template's README for its features, folder structure and which files to edit.

Conclusion

You have launched a website from a Jamstack template. Congrats!

One more step before it is truly yours: connecting your own domain. I mapped out the steps in Adding custom domain for Netlify website, and how to stop the netlify.app address competing with it in Redirect from Netlify default subdomain to primary domain.