Choosing a Jamstack Static Site Generator

Table of Contents

• What is a Jamstack?
• Why a Jamstack Solution?
• Why Choose Eleventy (11ty)?
• Conclusion

What is a Jamstack?

The Jamstack website gives the following definition:

Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.

Jamstack removes the need for business logic to dictate the web experience.

It enables a composable architecture for the web where custom logic and 3rd party services are consumed through APIs.

But what does this mean in simple terms? At a high level, you end up with these main components:

1. Content Language: Usually a flavor of Markdown/CommonMark that you use to write the core page content.
2. Templating Language (e.g., Liquid or Nunjucks): Used to break your HTML into reusable components and introduce simple logic for display of HTML snippets, reusable components, and page content.
3. Site Generating Application (e.g., 11ty or Hugo): Used to stitch together the page content with the HTML templates to produce a static page.
4. Supporting Static Content: Assets such as CSS, JavaScript, and image files that don't require any kind of processing by the Site Generating Application.
5. Simple Web Server Solution (e.g., nginx or S3): Used to serve the static pages (generated by the Site Generating Application) and Supporting Static Content to web clients.
6. Content Delivery Network (e.g., CloudFront or Akamai): Used to ensure fast delivery of pages and supporting assets; it uses the Simple Web Server Solution as its origin. This one is optional, but highly recommended.

This can all get more complex, but at a basic level, if you put the above components together, you will have a functional Jamstack solution.

For a more detailed overview of Jamstack, I feel this article gives a lot of useful information.

Why a Jamstack Solution?

I first heard about Jamstack solutions a few years back. At first the concept made me chuckle a bit because it was a case of "everything old is new again". During the 2000s I worked with a number of (usually homegrown) static site generators because they allowed for fast delivery to the web client from the web server and Content Delivery Network (CDN). You didn't have to wait for the page to be built on-demand as it was simply a static asset that needed to be served. It seems these benefits have been discovered again, but this time the static site generators are better.

I chose to use a Jamstack solution because it meets the following goals and requirements:

1. Low Maintenance: Since the folder structure and content documents are the database, I don't have to maintain a database for the site, simplifying overall maintenance of this solution.
2. Low Cost: Because you are only serving static pages and assets with a Jamstack solution, it is generally a cheap way to host a site (because there is minimal infrastructure involved).
3. Easy to Learn: For someone with basic web development knowledge, most of the Jamstack solutions have a low learning curve to get up-and-running.
4. Familiar Content Document Format: I write a lot of documents in Markdown/CommonMark nowadays. I generally like writing documentation in this format, so it is a natural fit for writing my blog posts. Additionally, it is portable to things like README.md files in GitHub.
5. HTML Templating: Even though the final product is a static HTML document, a key part of the Jamstack solution is that it uses HTML templates to help you build those static pages. This allows you the ability to reuse HTML snippets, iterate through arrays, display content based on conditionals, transform or format text, etc.
6. GitOps Friendly: Since all the changes I am making for the site are the addition, removal, or update of a file, this allows me to commit all of my changes to a Git repository and manage everything through GitOps processes.

NOTE: Jamstack solutions are not great for all use-cases. For instance, if you change the structure of your website, you have to regenerate your entire website and upload all of the updated static files. At large scale this isn't always a practical solution (hence why this solution fell out of favor for large websites). That being said, for a small to medium size website, such as that for a smaller business or personal blog, a Jamstack can be an affordable and low-maintenance solution for hosting your website.

A Jamstack solution requires a certain level of web development knowledge, and I would not recommend it to anyone who is not tech-savvy or at least familiar with the basics of web development.

Why Choose Eleventy (11ty)?

I tried a few different Jamstack Site Generators, but I ended up settling on Eleventy (11ty) because it met my requirements. Here are the top 11 reasons I chose 11ty:

1. Written in Node.js: In recent years, most of the code that I have written has been Node.js applications. Though I wouldn't say that Node.js is my favorite programming language, I am familiar with it and, since I wanted to get up-and-running quickly, this was the path of least resistance.
2. Strong Community: 11ty has an active community supporting it, which means you have a number of options to get your questions answered.
3. Supports Multiple Template Languages: Though I ended up sticking with the default Liquid template language, I like the idea that 11ty has support for a number of other template languages.
4. Easy Local Development: As you can see from the Getting Started page, it is easy to get started with 11ty development.
5. Stability: The development of 11ty is slow and steady, which I appreciate for a low-maintenance site. I don't want to have to deal with endless breaking changes and security issues. Though this blog post didn't exist at the time that I chose 11ty, I feel it outlines well the stability of the project overall.
6. Speed: As JavaScript Jamstack site generators go, 11ty is one of the fastest for generating site content, currently only beaten out by Hugo.
7. Straightforward Configuration Options: There are a number of configuration options available and they can generally all be made in one file, which makes configuring 11ty straightforward.
8. Build Integration: Using the Programmatic API, you can run 11ty in your own Node.js application, which opens a lot of options for integrating into deployment pipelines.
9. Open Source License: Though there are many open source licenses that I am comfortable with, 11ty uses the MIT license, which is one of the open source licenses I am most familiar with and which I generally prefer.
10. Good Documentation: No product documentation is perfect, but I feel that 11ty tries to have overall good documentation.
11. Site Leaderboard: The 11ty community has a site leaderboard that you can add your site to, which I think is a fun idea.

Conclusion

Would I recommend 11ty to others? Yes, from day one, it has generally "just worked" and the default Liquid template language has, so far, met all of my templating needs. I had a few configuration questions that I was able to get answered on the 11ty Discord server, so that was a good experience with the community.

I honestly feel that there are a number of good Jamstack solutions out there, and I would likely have been happy with many of the different available solutions, but I have no regrets selecting 11ty as my Jamstack solution. 11ty lets you take your Jamstack site development and turn it up to 11!