Building My Personal Blog with 11ty

I wanted a simple, fast blog that I could control completely. After looking at different options, I decided to build my own using Eleventy (11ty), a static site generator. Here's what I did and why I made the choices I did.

Why I Chose 11ty

I picked Eleventy for a few basic reasons:

• Speed: Static sites load really fast
• Simplicity: No database or complex server setup needed
• Flexibility: I can use different file types (Markdown, HTML, etc.)
• Security: No server-side code means fewer security worries
• Cost: Can host for free on platforms like Netlify or GitHub Pages

What I Actually Built

My blog has these main parts:

// Basic 11ty setup
module.exports = function(eleventyConfig) {
  // Makes a collection of all my blog posts
  eleventyConfig.addCollection("posts", function(collectionApi) {
    return collectionApi.getFilteredByGlob("src/blog/**/*.md");
  });
  
  // Creates tag pages automatically
  eleventyConfig.addCollection("tagList", function(collectionApi) {
    const tagsSet = new Set();
    collectionApi.getAll().forEach(item => {
      if (item.data.tags) {
        item.data.tags.forEach(tag => tagsSet.add(tag));
      }
    });
    return Array.from(tagsSet).sort();
  });
};

The Design Choices I Made

I wanted the blog to look good and be easy to read:

• Dark theme: Easier on my eyes, especially at night
• High contrast: Text is easy to read on any screen
• Mobile-friendly: Works well on phones and tablets
• Simple navigation: Easy to find what you're looking for

The Main Features

1. Blog Post Organization

Each post has tags, and the site automatically creates pages for each tag. This helps readers find related posts.

2. Responsive Layout

The blog looks good on any screen size using Tailwind CSS:

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
  <!-- Blog posts automatically arrange in a grid -->
</div>

3. Fast Loading

I kept things simple so the site loads quickly:

• Minimal JavaScript
• Optimized CSS
• No heavy frameworks

How I Set It Up

The basic setup was pretty straightforward:

# Install the tools I needed
npm install @11ty/eleventy tailwindcss

# Start the development server
npm run start

# Build for production
npm run build

What I Learned About Accessibility

I made sure the blog works for everyone:

• Keyboard navigation: You can use the site without a mouse
• Screen reader support: Proper HTML structure for assistive technology
• High contrast: Text is readable even with vision issues
• Reduced motion: Respects user preferences for animations

The File Structure

I organized everything in a simple way:

src/
├── _layouts/          # Page templates
├── _includes/         # Reusable parts
├── blog/             # My blog posts
├── css/              # Styling
└── js/               # JavaScript

What I'd Like to Add Later

The blog works well now, but I have some ideas for improvements:

• Search: Let people search through posts
• RSS feed: For people who use feed readers
• Comments: Maybe a simple commenting system
• Analytics: Basic stats without invading privacy

What I Learned

Building this blog taught me a few things:

1. Start simple: Don't try to build everything at once
2. Accessibility matters: It's not that hard to make sites work for everyone
3. Performance counts: People notice when sites load fast
4. Own your content: Having full control is really nice

The Result

I now have a blog that:

• Loads quickly
• Works on any device
• Is easy to maintain
• Looks professional
• Is completely under my control

No more worrying about platform changes or content restrictions. I can write what I want, when I want, and present it how I want.

Conclusion

Building a blog with 11ty was easier than I expected. The documentation is good, the community is helpful, and the results are exactly what I wanted.

If you're thinking about building your own blog, 11ty is a solid choice. It's not the only option, but it's definitely worth considering if you want something simple, fast, and completely yours.

This blog post explains how I actually built this site. The code examples and setup are from my real implementation.