After getting my website up on my homelab, I wanted a clean, simple way to document my setup and share occasional insights. It needed to stay self-hosted, had to be lightweight and easy to use, and I didn't see a reason to have a backend running for a simple blog. This post is about how I ended up with 11ty (Eleventy) and the lessons I learned along the way.

Starting With Just HTML

Initially, I had planned to continue to build everything manually using plain HTML and CSS. After realizing I needed a 404 page, I copyed the structure from my index file and tweaked the content. Then I started building out a blog list... pretty quickly, it became clear that even a minimal site was going to be painful to maintain by hand this way. Every new post would require copy-pasting HTML, updating lists manually, and managing links — things that quickly get tedious.

That's when I started searching for a lightweight and easily customizeable static site generator and stumbled across Eleventy.

Enter Eleventy: Simple but Powerful

Eleventy immediately appealed to me because it's just JavaScript and templates — no massive framework to learn, no complex build processes, plus lots of plugins available. In fact, its simplicity is deceptive; underneath is a powerful system that gives me complete control.

The deciding factor was that I could:

• Write everything in Markdown
• Use simple templates for consistency
• Easily self-host since it's all static files (plus fast and secure)
• Check everything into Git

The Implementation Journey

Getting the basic site running was surprisingly simple. I used Claude to quickly extract my HTML files into templates and get the Eleventy build set up. Though, as with any project, the interesting challenges emerged when I started refining things.

Planning Ahead

I knew as my post count grew, I would need pagination. Implementing it was actually pretty straightforward with the templates.

I then also wanted to set up a tag system that will help me organize content, and allow readers find what they are interested in as it grows. I'm keeping the links to the tag browser hidden until I have enough posts to justify making it visible.

The Hard Part

Like any website project, the real challenge was — you guessed it — the CSS. Getting the spacing and the look and feel just right required several rounds of adjustments:

• Balancing the space between all the elements, like posts and pagination controls
• Creating consistent spacing around the header and footer
• Ensuring that tags were subtly available on the blog list page, without pulling too much attention to them
• Ensuring it was mobile-friendly

Making everything feel natural took more tweaking than I thought it would. Even though I was able to get most of the way there with AI, it still took several rounds of adjustments and manual tweaks. I'm quite happy with the end result though!

The Date Time Zone Saga

Another odd issue was with dates. Posts kept displaying a day earlier than specified in the frontmatter. After digging in a bit, I discovered it was a timezone issue with how dates were being interpreted.

The solution wasn't super elegant — incrementing the date by one day in the template filters — but it worked and it looks like this:

eleventyConfig.addFilter("dateToFormat", function(date) {
  if (!date) return '';
  
  const dateObj = new Date(date);
  
  // The timezone adjustment
  dateObj.setDate(dateObj.getDate() + 1);
  
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return dateObj.toLocaleDateString('en-US', options);
});

Sometimes pragmatic solutions beat perfectly elegant ones when you just need something to work.

Custom Asset Build for Versioning

One of the things I built for the original HTML site was a custom script to handle asset versioning using content-based hashes. This made sure users always got the latest styles and assets even with a longer Cache-Control policy.

If you're interested, the build script is available on GitHub. One thing I wanted it to do was print out a tree view of the final directory structure and the file sizes after a successful build, which looks like this:

Build complete 🎉
Location: /Users/jasongodson/Documents/github/homelab/website/dist
/
├── 404/
│   └── index.html (3.5 KB)
├── assets/
│   ├── css/
│   │   ├── all.min.21f9f9f4.css (170.2 KB)
│   │   ├── prism.affaf224.css (1.9 KB)
│   │   └── styles.0d004ce4.css (9.3 KB)
│   ├── images/
│   │   ├── 404.cd1130e9.png (1.4 MB)
│   │   ├── favicon.13b16fb9.png (1.1 MB)
│   │   └── x.f48e3862.svg (387.0 B)
│   └── webfonts/
│       └── ... (font files listed)
├── blog/
│   └── ... (posts organized by folder)

It’s a small thing, but it makes it easy to verify the output and keep things tidy. Plus, it's just cool.

Was It Worth It?

Absolutely. The time spent setting up Eleventy has already paid dividends in how easily I can now document my explorations. A static site is lightweight and doesn't contribute noticeably to resource use, and adding new content is frictionless.

Now that I have a solid foundation, I'm looking forward to:

• Documenting my homelab infrastructure and how it all came together
• Sharing troubleshooting tips that might help others
• Creating tutorials based on my experiments
• Using this blog as a personal reference

Thanks for reading! Whether you're building your own homelab, blog, or just exploring tech in general, I hope this post gave you some inspiration. Happy building!