I recently rebuilt my personal website from scratch, and I wanted to share the approach I took, the technology choices I made, and how it all comes together.

The Goal

I had a simple goal: a fast, maintainable personal website where I could write blog posts, share photos, and collect ideas. I didn't want to manage a database, deal with security updates, or pay for hosting beyond what was necessary. A static site generator seemed like the obvious choice.

Why Eleventy

I chose Eleventy (also known as 11ty) as my static site generator. Here's why:

Flexibility without opinions. Unlike some frameworks that push you toward specific patterns, Eleventy lets you structure your project however you want. It supports multiple templating languages and doesn't force a particular directory structure.

JavaScript-based. The entire configuration is JavaScript, which means I can write custom filters, shortcodes, and build logic without learning a new language or DSL.

Fast builds. Even with hundreds of images to process, builds complete in under a second for the HTML generation (image optimization runs separately).

Active development. Eleventy v3 brought ES modules support and continues to evolve with the modern JavaScript ecosystem.

The Stack

Here's what powers this site:

Building with Claude Code

Here's where things get interesting. I built this entire site using Claude Code, Anthropic's CLI tool for coding with Claude. Rather than writing every line myself, I described what I wanted and worked iteratively with Claude to implement features.

This approach worked well for several reasons:

  1. Rapid prototyping. I could describe a feature like "add a photo gallery with lightbox viewing" and have a working implementation quickly.

  2. Learning the ecosystem. Claude knows Eleventy's patterns and could suggest idiomatic solutions I might not have discovered on my own.

  3. Consistent code style. The generated code follows consistent patterns throughout the project.

  4. Documentation as you go. Claude helped maintain the project's documentation alongside the code.

The workflow was conversational: describe what I want, review the implementation, request adjustments, and iterate until it worked the way I envisioned.

Image Optimization

One feature I'm particularly happy with is the automatic image optimization. Every image in the blog posts and gallery is processed at build time:

  • Multiple sizes are generated (400px, 800px, 1600px depending on use case)
  • WebP and JPEG formats for browser compatibility
  • Lazy loading for performance
  • Responsive srcsets so browsers download the appropriate size

This means I can drop a full-resolution photo into the assets folder and the build process handles the rest. The original files never make it to the deployed site—only optimized versions.

Deployment

For hosting, I chose Cloudflare Pages. The setup is straightforward:

  1. Build the site locally with npm run build
  2. Deploy with npm run deploy (which runs Wrangler under the hood)

That's it. No CI/CD pipeline to configure, no build minutes to worry about, no server to maintain. The site is served from Cloudflare's edge network, so it's fast everywhere.

The entire deployment command is:

npm run build && npx wrangler pages deploy _site --project-name=***REDACTED***

What I Learned

A few takeaways from this project:

Static sites are underrated. For content-focused websites, you don't need a server, a database, or a complex framework. HTML files served from a CDN are hard to beat for performance and reliability.

Build-time processing is powerful. Doing image optimization, template rendering, and content transformation at build time means the deployed site is just static files. No runtime dependencies, no things that can break.

AI-assisted development works. Using Claude Code to build this site was genuinely productive. It's not about replacing programming knowledge—it's about having a capable collaborator who can handle implementation details while you focus on what you want to build.

The Source

If you're curious about the implementation details, the approach I've taken is documented in the project's README and CLAUDE.md files. The site tracks its own build statistics, which you can see on the About page.