So you want to make a website? (2026 Edition)

A couple years ago, I wrote a post about how I built this site using Hugo and Firebase. At the time, Hugo was a great choice for spinning up a personal site quickly, and honestly, it served me well. But as time went on, I found myself wanting more flexibility without having to wrestle with Go templates and theme dependencies that hadn’t been updated in a while. So I decided it was time for an upgrade.

The twist? I didn’t do the migration by hand. I used Claude Code to handle the heavy lifting.

Why move away from Hugo?

Don’t get me wrong, Hugo is still a perfectly fine static site generator. It’s fast, it’s battle-tested, and there’s a huge community behind it. But here’s what started to bug me:

  1. Theme lock-in. I was using the Terminal Theme as a Hugo Module, which meant I was basically using it “as-is” with zero customization. Anytime I wanted to tweak something, I’d have to dig into Go templates and Hugo’s templating syntax, which is not exactly intuitive if you don’t work with it regularly.

  2. The ecosystem has moved on. The JavaScript ecosystem for static sites has matured a lot since 2023. Frameworks like Astro now offer a developer experience that’s hard to beat, with first-class support for Markdown, component-based architecture, and zero JavaScript shipped by default.

  3. Tailwind CSS. I wanted to use Tailwind for styling so I could actually customize things easily going forward, rather than being locked into whatever CSS a theme author decided on.

Enter Astro

From the Astro docs:

“Astro is the web framework for building content-driven websites like blogs, marketing, and e-commerce.”

Astro is purpose-built for exactly the kind of site I have: content-heavy, mostly static, and doesn’t need a ton of client-side JavaScript. It supports Markdown out of the box with something called Content Collections, which gives you typed, validated frontmatter for your posts. If you’ve used Hugo’s content management, think of it as the same idea but with better tooling.

The thing I really like about Astro is that it ships zero JavaScript to the browser by default. Your site is just HTML and CSS unless you explicitly opt into client-side interactivity. For a blog and portfolio site like mine, that’s exactly what I want.

The Migration with Claude Code

Here’s where it gets interesting. Instead of spending a weekend manually converting Hugo templates to Astro components, converting TOML frontmatter to YAML, and rewriting shortcodes, I used Claude Code to do it.

Claude Code is an agentic coding tool from Anthropic that lives in your terminal. You describe what you want, and it explores your codebase, builds a plan, and then executes it. For this migration, the conversation went something like this:

  1. I told Claude Code I wanted to migrate from Hugo to a modern frontend
  2. It explored my entire site structure, content files, theme config, and deployment setup
  3. It asked me a few questions: which framework (Astro), which hosting (keep Firebase), and whether I wanted a redesign (minimal refresh with Tailwind)
  4. It built out a detailed migration plan
  5. Then it executed the whole thing: scaffolding Astro, creating layouts and components, migrating all my content, updating the Firebase config, and cleaning up the old Hugo files

The whole process took one conversation. My Hugo {{< youtube >}} shortcodes became a reusable YouTube.astro component (later upgraded to lite-youtube-embed for faster page loads). My TOML frontmatter got converted to YAML. My hugo.toml config got translated into Astro layouts and Tailwind theme tokens. It even preserved the terminal aesthetic I liked from the old theme by extracting the colors and fonts into the new Tailwind setup.

Was the initial scaffold perfect? Not quite, but the bones were solid and the site built successfully on the first npm run build. From there, the real value was in the iteration. I’d pull up my old site, point Claude Code at it, and say things like “make the post headers match this” or “can we add copy buttons to code blocks?” Each ask was a quick back-and-forth that resulted in working code. We added Expressive Code for syntax highlighting with copy buttons, replicated the old theme’s logo with its signature orange block and striped pattern, matched the post header styling with dotted borders and the date :: author format, and even built a Spotify embed component for my media page. What would have been hours of CSS debugging and documentation reading became a series of short conversations.

The Astro Basics

Getting started with Astro is straightforward. You’ll need Node.js installed, and then:

npm create astro@latest

Astro will walk you through a setup wizard. Once you have your project, creating content is as simple as dropping a Markdown file into your content directory:

src/content/posts/my-new-post.md

Add some YAML frontmatter at the top:

---
title: "My New Post"
date: "2026-03-08"
author: "Your Name"
description: "A short description"
---

Then run the dev server to see your changes:

npm run dev

When you’re happy with everything, build the production site:

npm run build

This compiles everything into a dist/ directory with plain HTML, CSS, and whatever JavaScript you’ve explicitly opted into. No bloat, no unnecessary runtime.

Styling with Tailwind

One of the bigger wins of this migration is having Tailwind CSS baked in. Instead of overriding some theme’s CSS or copy-pasting stylesheets, I can style everything with utility classes directly in my Astro components. Want to change the accent color? Update one CSS variable. Want to adjust spacing on the resume page? Change a class name.

Astro has a first-class Tailwind integration, so adding it is as simple as:

npx astro add tailwind

With Tailwind v4, configuration is done entirely in CSS using @theme blocks rather than a separate config file. You define your design tokens right in global.css and start building. It’s a much better workflow than trying to reverse-engineer a Hugo theme’s SCSS variables.

Deploying to Firebase (still!)

I’m sticking with Firebase Hosting for deployment. It’s been reliable, the free tier is generous, and the deploy process is dead simple. The only thing that changed from my Hugo setup is which directory gets deployed:

Before (Hugo):

hugo && firebase deploy

After (Astro):

npm run build && firebase deploy

The firebase.json just needed one small update, pointing from public (Hugo’s output) to dist (Astro’s output). That’s it. Same Firebase project, same custom domain, same deploy workflow.

If you’re starting fresh with Firebase, the setup is still just:

npm install -g firebase-tools
firebase login
firebase init hosting

Point it at your dist directory during init, and you’re good to go.

What about the other options?

Just like in my original post, there are plenty of hosting options beyond Firebase. The landscape has only gotten better:

1. Vercel

Vercel has become the go-to for a lot of frontend developers. It has automatic deploys from GitHub, preview deployments for pull requests, and excellent performance out of the box. If you’re starting fresh and want the least friction, this is probably the easiest option in 2026.

2. Netlify

Netlify is still a strong choice with a generous free tier and a great developer experience. Similar to Vercel with Git-based deploys and preview builds.

3. Cloudflare Pages

Cloudflare Pages has quietly become one of the best options for static sites. Fast global CDN, generous free tier, and tight integration with Cloudflare’s broader platform if you need it.

4. GitHub Pages

Still a solid free option if you just want something simple and don’t mind the slightly more manual setup.

The AI-assisted development takeaway

The real story here isn’t just “I switched from Hugo to Astro.” It’s that the barrier to making these kinds of changes has dropped dramatically. A framework migration used to be the kind of task you’d put off for months because it felt like a weekend project at minimum. With tools like Claude Code, it becomes a conversation, and not just one big prompt, but an ongoing back-and-forth where you iterate toward exactly what you want.

That said, you still need to know what you want and be able to evaluate the output. Claude Code handled the migration and the styling iterations, but I still made all the decisions: which framework, which theme, how the posts should look, what the code blocks needed. I’d look at the result in the browser, decide what to change, and describe it. The AI handled the tedious parts, the file conversions, the CSS extraction, the component wiring, so I could focus on the parts that actually matter.

If you’re sitting on a personal site that’s been collecting dust because the framework feels dated or the theme is no longer maintained, give it a shot. The tools available in 2026 make it easier than ever to keep your corner of the internet fresh.