Building This Blog: From Tutorial to Personal Project

From Tutorial to Something Real

I spent today wrapping up the Astro blog tutorial and then doing something the tutorial doesn’t cover: making the result actually feel like mine.

The tutorial is well-structured. It walks through pages, components, layouts, markdown posts, and content collections. By the end you have a working blog with routing, a nav component, a theme toggle, and an RSS feed. Solid foundation.

But it’s also clearly a tutorial project. The about page had variables like happy = true and a goal to finish in three days. Skill tags rendered in crimson uppercase. Nav links were copy-pasted into every page. Functional, but not something you’d put in front of people.

Cleaning Things Up

The first thing I tackled was the about page — stripped the tutorial exercises and replaced them with actual content. Backend development, software design, infrastructure. That’s what goes there.

From there it was a natural progression: centralize the styles, create shared layouts, build reusable components. BaseLayout handles the common page structure. MarkdownPostLayout wraps it for blog posts. Header, Footer, Navigation, BlogPost — each component owns its slice of the UI. By the end, adding a new page means writing content, not boilerplate.

Theming with CSS Variables

One thing I’m happy with is the theming. The site now supports two themes — dark purple and light sage green — driven entirely by CSS custom properties on the html element:

html {
  --bg: #f2f7f2;
  --heading: #3a6b4a;
  --surface: #ddeedd;
}

html.dark {
  --bg: #0f1117;
  --heading: #c4b5fd;
  --surface: #1e1b2e;
}

Every component uses var(--surface), var(--accent), and so on. The toggle script flips the .dark class on the document and persists the preference to localStorage. It’s clean, easy to extend, and easy to reason about.

Working With Claude

I did all of this in collaboration with Claude. My day job is backend work — I can write frontend code, but it’s not where I spend most of my time. Having an AI pairing partner for the HTML, CSS, and Astro-specific patterns moved things along quickly.

A few things that worked well:

• Asking it to explain tradeoffs before making changes (comparing the tutorial’s MarkdownPostLayout to what we’d built, for example)
• Catching things I’d overlook — like tag links breaking from a missing trailing slash, or skill pill colors being hardcoded to dark values that would break on the light theme
• Handling the repetitive work (updating three pages to use a new layout) while I focused on decisions

It’s a different kind of pairing than working with another developer. It doesn’t push back on design decisions unprompted or have opinions about the tech stack. But for moving quickly through a domain you’re less fluent in, it’s genuinely useful.

What’s Next

The scaffolding is in a good place. The goal now is to actually use it — write about Groupr as it develops, document the Adventures with Setti channel, and keep track of whatever else comes up.