Building This Site in Hugo with the Help of Claude Sonnet

Sure, I know my way through HTML & CSS, but Hugo’s templating system was completely new to me. Instead of spending days learning through trial and error like I would have a few years ago, I teamed up with Claude 3.7 Sonnet as a developer and pair programmer.

I handled the idea and design, while Claude focused on the technical side, making us incredibly efficient. Together, we worked through various components and features. When the marquee had that annoying “tilt,” I described the glitch, and Claude proposed solutions. After several iterations, we got it looking perfect on all devices. As we built, I sketched layouts and explained interactions, while Claude turned them into Hugo templates and SCSS.

The partnership worked because I could focus on creative direction and UX, while understanding enough code to make adjustments and give specific feedback. Claude, on the other hand, tackled implementation and CSS challenges without getting caught up in design decisions. 😏

The result is a site that’s both technically solid and aligned with my aesthetic. I wanted something simple to maintain, cheap (actually, it’s free!), markdown-compatible (since I use Obsidian for documentation), but also flexible enough for future tweaks. I use VSCode, but my Claude account is web-based, so some back-and-forth between windows was required — something to improve in the future if possible.

In the end, our collaboration produced clean, well-documented code with minimal effort, and I’m super happy with the result! 🥳