HAP researching different static site generators

Station 2: The Static Site Generator Landscape

Fifty Options?! How Do I Choose?

Prof. Teeters pulled up a website showing a list of static site generators. I started scrolling... and scrolling... and scrolling. There were a lot of them!

"Pick one," she said with a smile.

I panicked! They all looked similar. Jekyll, Hugo, Gatsby, Eleventy, Astro, Next.js, Nuxt, SvelteKit... the list went on forever. How was I supposed to know which one was right?

"What programming language do you know best?" she asked.

"Well, it will be JavaScript." I said. "As a web developer I'll need JavaScript and I plan to learn it with you!"

"Then you've already narrowed it down significantly. Now let's look at complexity versus flexibility..."

That one question changed everything. Instead of comparing fifty tools, I was comparing maybe five. Here's how Prof. Teeters helped me think through the decision... 🟠

What You'll Learn at This Station

HAP's Discovery: I used to think picking a tool was about finding "the best one." Prof. Teeters taught me that's the wrong question. The right question is: "Which tool fits MY skills and MY project?" Here are the three insights that helped me choose: 🤯

🗣️ Language Matters

Your Language

Jekyll uses Ruby, Hugo uses Go, Eleventy uses JavaScript. Pick one that matches YOUR skills—because when something breaks (and it will!), you'll need to understand the error messages and debug the code.

📊 The Complexity Spectrum

Sweet Spot

Simple tools (Jekyll) are easy to start but limited. Powerful tools (Gatsby, Next.js) can do anything but require more learning. Eleventy sits in a sweet spot: flexible enough to grow with you, simple enough to start today.

⚡ Zero-Config Philosophy

Just Works

Eleventy works out of the box with sensible defaults. No webpack setup, no build configuration, no "starter template required." Just write content and run the build command. That's why I chose it!

HAP surrounded by tangled code with an 'oops' expression

HAP's Confession:

  • I almost picked Hugo because "fastest builds!" sounded impressive. Then I tried reading the Go template documentation and had no idea what was happening. Fast builds don't help if you can't customize anything!
  • I spent two whole days trying to set up Gatsby before realizing I didn't need React for a simple blog. Grace Hopper appeared and asked, "Why are you making it so complicated?" She had a point. 😳
  • I thought "zero-config" meant "no configuration possible." Turns out it means "sensible defaults with optional configuration." You CAN customize everything—you just don't HAVE to customize everything to get started.
  • I judged SSGs by how pretty their marketing websites looked instead of actually trying them. Prof. Teeters reminded me that a nice website doesn't mean a nice developer experience.

The Major Players

There are dozens of static site generators, but a handful dominate the landscape. Here are the ones I researched most seriously, along with what I learned about each:

💎 Jekyll

Language: Ruby

Best for: Simple blogs, GitHub Pages

Pros: Well-documented, huge community, GitHub Pages default

Cons: Slow builds for large sites, Ruby environment setup can be tricky

HAP's take: "Great if you already know Ruby. I don't, so debugging would be a struggle."

🚀 Hugo

Language: Go

Best for: Large sites needing fast builds

Pros: Blazingly fast builds (like, milliseconds fast), single binary install

Cons: Go template syntax is confusing, steeper learning curve

HAP's take: "The speed is amazing, but I couldn't understand the templates. That's a dealbreaker."

🎈 Eleventy

Language: JavaScript

Best for: Flexible projects, JavaScript developers

Pros: Zero-config start, supports 11+ template languages, fast builds

Cons: Smaller community than Jekyll, documentation can be scattered

HAP's take: "I know JavaScript! The templates made sense immediately. This is the one."

⚛️ Gatsby / Next.js

Language: JavaScript (React)

Best for: Complex web applications, React developers

Pros: Powerful data layer, component-based, huge ecosystem

Cons: Complex setup, requires React knowledge, slower builds

HAP's take: "Way more power than I need for a blog. Maybe someday for a bigger project!"

🧑‍🚀 Astro

Language: JavaScript

Best for: Content-heavy sites, "islands" architecture

Pros: Ships zero JS by default, supports multiple frameworks

Cons: Newer, smaller ecosystem than Eleventy

HAP's take: "Really interesting! But I wanted to start with something more established first."

The Decision Framework

HAP looking confused while studying a map

Prof. Teeters gave me a simple framework for making the decision. Instead of comparing every feature, she had me ask five questions:

1. What language do I want to use?

HAP's answer: "JavaScript!"

Result: Eliminates Jekyll (Ruby), Hugo (Go)

2. How complex is my project?

HAP's answer: "A blog with some custom styling."

Result: Don't need Gatsby/Next.js power

3. Do I need React components?

HAP's answer: "Nope. I love plain HTML and CSS so that works fine for me."

Result: Gatsby/Next.js are overkill

4. How important is build speed?

HAP's answer: "My blog will have, like, a handful of posts. Build speed doesn't matter."

Result: Hugo's speed advantage isn't relevant

5. Do I want zero configuration to start?

HAP's answer: "YES. I want to see something working before I customize."

Result: Eleventy wins!

🟠 Prof. Teeters' Wisdom:

"Don't choose a tool just because it's trendy or because someone online says it's the best. Choose the one that fits your skills and your project right now. And with Eleventy, all your main content lives in easy-to-move Markdown files, so you can switch to another system later without losing all of your hard work."

Why I Chose Eleventy

HAP giving a confident thumbs up

After all that research, Eleventy was the clear winner for me. Here's exactly why:

  1. I'm learning JavaScript — Prof. Teeters says every web developer needs it, so I'm practicing bit by bit. The great part is that Eleventy doesn't force me to be an expert right away. I can build real sites using Markdown and templates while slowly understanding more of the JavaScript behind the scenes. As I learn, I can customize more and more.
  2. Zero-config actually works — For fun, I ran npx @11ty/eleventy on a folder with one Markdown index.md file and got a working HTML page. No setup required!
  3. Template flexibility — Eleventy supports Nunjucks, Liquid, Markdown, JavaScript, and more. I started with Markdown, because I know it already, and I'll be learning Nunjucks (more on that later!).
  4. The community is helpful — When I got stuck, I found answers on the Eleventy Discord and GitHub discussions. People were patient with my beginner questions.
  5. It grows with me — I started simple, but I've already added custom shortcodes and filters. Eleventy can handle way more complexity when I'm ready for it.

🟠 HAP's Conclusion:

Now that I'm becoming an accomplished web developer who can make great web pages, Eleventy gives me an easy path to build full multi-page sites. I can use its tools with the HTML and CSS skills I already have, and that's enough to create something impressive right away. As I grow, I can add more features whenever I'm ready. I call that a big win for new developers like me!

🎓 SSG Comparison Quick Reference

1

Jekyll (Ruby)

Learning curve: Easy | Best for: GitHub Pages, simple blogs

2

Hugo (Go)

Learning curve: Steep | Best for: Large sites, fast builds

3

Eleventy (JavaScript)

Learning curve: Moderate | Best for: Flexible projects, JS developers

4

Gatsby / Next.js (React)

Learning curve: Steep | Best for: Complex apps, React developers

5

Astro (JavaScript)

Learning curve: Moderate | Best for: Content-heavy sites, islands architecture