How I built this site

I’ve been wanting to create a personal website for a long time. During winter break, I finally allocate some time for myself to work on it. This is my second time building website with AI. With Hugo template existing, I thought I can finish it in 2-3 hours. But in fact I spent more time working on it. Here’s a recap of the tools I used and procedure of this building process.

Tools

  • Primary tools:
    • AI helper: Claude code
    • Website template: Hugoplate
  • Other tools:
    • Google AI Studio
      • I use this to generate multiple websites for me based on my CV, in search of inspiration

Procedure

  1. I first ran the raw template locally to understand the default site structure. This helped me identify which pages and features were essential for my use case and which could be removed without affecting the core layout or build pipeline.
  2. I then ran /init in Claude Code to generate a high level overview of the repository. The resulting claude.md file served as a persistent instruction document, capturing the project structure, conventions, and constraints that guided all subsequent interactions with the AI.
  3. Based on this understanding, I removed unused pages and stripped out features that were not aligned with the purpose of the site. This step was intentionally done early to reduce complexity and prevent the AI from reasoning over irrelevant components later on.
  4. I converted my prior experiences into Markdown documents. I first provided a single, fully worked example demonstrating how one CV entry should be transformed into a page, including content structure, metadata, and formatting conventions. Using this example as a reference, I then asked the AI to apply the same transformation consistently across all remaining experiences.
  5. Finally, I refined the visual presentation. This included adding institutional logos, adjusting the styling of the teaching and hobby sections, adding fade in effects for pages, and making targeted layout improvements to better reflect the content hierarchy without altering the overall design system.

Take away

  • This is my second time building website with AI. I thought I can finish it in several hours, but it took more time than that. Most time was spent on the 4-th and 5-th step.
  • Git plays a very important role in this process. Thanks to git, I am able to revert changes made by AI when things don’t work as expected. I will keep this habit in the future.
Share :