Building This Site with Claude, 11ty, and AWS

How I used AI collaboration to build a personal website with 11ty, Tailwind CSS, and a full AWS deployment pipeline in under three days.

markmolesworth.com

Using Claude Code, I was able to build a personal portfolio site in under three days, and it has more going on than you might expect: a blog, portfolio, resume page, and newsletter signup, all running on AWS infrastructure defined entirely in code.

Inspired by the Cloud Resume Challenge, I embarked on creating my own portfolio site. But I didn't want this site to host only my resume; I wanted it to be a place where I can post my personal portfolio projects, start blogging about my thoughts and ideas, and, someday, offer a newsletter subscription. If this was going to serve me long-term, I knew that I needed more than a simple page with HTML and CSS -- I needed a static site generator. Working with Anthropic Claude as my primary collaborator, I settled on the 11ty static site generator. It's known to be one of the fastest generators available, and I didn't want my hard-earned cash going toward lengthy builds in the cloud. But soon I was confronted with another problem: how do I design this site when I'm anything but a designer?

Converting a Tailwind Plus Template for 11ty

The answer was Tailwind CSS Plus, which includes professionally designed site templates. The one I picked, Spotlight, looked like exactly what I wanted, but it was built for Next.js and React. Since 11ty and React are fundamentally different rendering models, the React components themselves were not directly usable.

But the real value in the template was never the React code. It was the design decisions: spacing, typography, color palette, dark mode treatment, and responsive breakpoints, all expressed as Tailwind utility classes that work anywhere.

Claude and I worked through the Spotlight source files and pulled out the Tailwind classes from each React component, then rebuilt the markup as Nunjucks partials with semantic HTML. The React <Header> component became header.njk, the <ArticleLayout> component became post.njk, and so on. The JSX was gone, but the visual design carried over intact.

We also stripped out dependencies that have no place in a static site: framer-motion for animations (replaced with CSS transitions), Next.js <Image> (replaced with 11ty's eleventy-image plugin), and client-side theme switching (replaced with CSS prefers-color-scheme and Tailwind's dark: variant).

The end result is a site that looks like a professionally designed template but runs on plain HTML and CSS with no JavaScript frameworks and no hydration step. Pages just load fast.

The Deployment Pipeline

The Cloud Resume Challenge suggests GitHub Actions with SAM for infrastructure as code, but I went a different direction with AWS CDK and CDK Pipelines, deployed across a four-account AWS Organization.

The accounts are separated by function: a Network account owns the Route 53 hosted zone, a Dev account runs the pipeline, and separate Staging and Production accounts each host their own S3 bucket and CloudFront distribution. This mirrors how organizations actually structure AWS environments, even if it is more than a personal site strictly needs.

The pipeline is self-mutating, so when I push to main in CodeCommit, it builds the 11ty site, synthesizes the CDK stacks, and deploys to staging. Automated tests run before deployment, including HTML validation, accessibility checks, and CDK snapshot tests. After staging, a manual approval gate lets me review the site at staging.markmolesworth.com before promoting to production.

One thing that caught me off guard was CloudFront's behavior with static site URLs. When someone requests /about/, CloudFront does not automatically look for /about/index.html the way you might expect. Unlike S3's static website hosting mode, CloudFront with Origin Access Control serves objects by their exact key, so we needed a CloudFront Function on every viewer request to append index.html to directory-style URLs. I pushed back on this at first, but Claude walked me through why it is standard practice for S3-backed static sites served through CloudFront. It was a small detail, but exactly the kind of thing you only learn by building.

DNS uses subdomain delegation, where each target account owns a hosted zone for its subdomain (www.markmolesworth.com, staging.markmolesworth.com) and the Network account delegates with NS records. This keeps certificate validation and CloudFront alias records local to each account and avoids cross-account IAM complexity for routine DNS operations.

Working with AI

Claude was not a code generator I pointed at a blank editor. We worked through the project in phases, where I wrote specs for each feature laying out requirements, architecture, and acceptance criteria, and Claude implemented against those specs. When something in the implementation did not make sense to me, like the CloudFront URL rewriting, I asked questions until it did.

The dynamic felt closest to pair programming, with Claude handling the volume of code and configuration while I directed the architecture and made the calls. The specs live in the repository alongside the code, serving the same purpose they would on any software project: forcing clear thinking before building started and giving Claude boundaries to work within.

The site also includes a newsletter signup built with HTMX, API Gateway, Lambda, and SES with double opt-in, plus a resume page rendered from a JSON data file to keep content in sync with my actual resume. All of it was spec-driven and built collaboratively.

What I Would Do Differently

I would write CDK infrastructure tests earlier. We added them after the stacks were already deployed, which meant the first round of snapshot tests just captured existing state rather than catching unintended changes during development.

I would also set up Lighthouse CI, a Google tool used for accessibility testing, in the pipeline from the start rather than adding it after several rounds of design iteration, since having performance budgets early would have caught a few regressions sooner.