Building This Site in Hugo with the Help of Claude Sonnet

When I decided to build this personal website using Hugo, I was diving into unfamiliar waters… 🌊 Sure, I know my way through HTML & CSS, but Hugo’s templating system was completely new to me. But in times of AI excitement, 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 my partner in crime.

To built this website, 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. As we built, I sketched layouts and explained interactions, while Claude turned them into Hugo templates.

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 - leave it to me, Claude! 😏

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! 🥳

Edit: After several months of use, it has proven to be solid, scalable and sustainable over time.