HAP at his laptop ready to teach you about static sites

HAP's Learning Lab

Static Site Generation with Eleventy

HAP waving hello

Hey everyone! I'm HAP, and I just built my first blog—without WordPress, without PHP, without a database!

When Prof. Teeters said "Let's build a blog with Markdown files," I thought she was joking. How can a blog work without a database? Where does the content come from? How do users see different posts?

Turns out, static site generators like Eleventy change EVERYTHING about how websites work. Instead of generating pages when users visit (slow!), we generate pages ONCE during the build and serve them from a CDN (fast!).

Through these six stations, I'll share my journey from "blogs need databases" to "actually, Markdown files work great!" I'll show you exactly how I started from eleventy-base-blog (a template by Zach Leatherman) and customized it into my own HAP-themed blog.

Ready to build your own static site? Let's go! 🟠

About HAP's Learning Lab

🔬 What I Learned

I learned that static site generators pre-render HTML at build time instead of generating it on every request. This makes sites faster, more secure, and cheaper to host—often FREE!

I also learned that "zero-config" doesn't mean "no configuration possible." It means sensible defaults that just work. Eleventy let me build a working blog before I even created a config file!

🎯 How I Practiced

I cloned eleventy-base-blog from GitHub and customized it step by step. First I replaced the sample posts with my own content. Then I added HAP colors and fonts. Then I created custom shortcodes for my character images.

Each change taught me something new about how Eleventy works. By the time I finished, I understood the whole system—not from reading docs, but from actually building!

🎨 My Philosophy

Start from a working template, not a blank file. Understand what each piece does before changing it. Make one change at a time so you know what broke if something goes wrong.

And here's the big one Prof. Teeters taught me: sometimes removing features you don't need is the best solution. Simpler is almost always better!

🤔 My Advice

Don't try to learn everything at once! Focus on getting a blog deployed first, even if it looks generic. Then customize it piece by piece.

By the time you're done, you'll understand Eleventy deeply—not from reading documentation (though that helps!), but from actually using it to build something real that you can share with the world.

Learning Stations