From Hugo to Astro

Jan 3, 2025 / 7 min read

Fresh out of military service and diving back into tech feels like time travel. One minute you’re in a structured military routine, the next you’re trying to figure out which AI tool just rewrote half the web development playbook. After 18 months away, even my trusty old Hugo blog felt like it needed a refresh for this brave new world.

Let’s face it – we developers are perpetually caught in the “ooh, shiny!” trap. That’s exactly how I found myself porting my perfectly functional Hugo blog to Astro. Between catching up on a year and a half of tech changes and trying to wrap my head around all these new AI-powered dev tools, why not add a static site generator migration to the mix? Was it necessary? Probably not. Was it a great way to get back into the rhythm of civilian dev life? Absolutely!

The Ghost of JavaScript Past

Let’s talk about the elephant in the room – Gatsby. Back in its heyday, everyone and their cat was building with Gatsby. The promises were enticing: GraphQL for everything (even when you didn’t need it), React all the way down (because clearly your “About Me” page needs state management), and enough plugins to fill the npm registry twice over.

But some of us stayed strong with Hugo. Sure, we felt FOMO watching Twitter light up with every new Gatsby feature announcement. We wondered if we were missing out on the “future of web development” while writing our Go templates. But you know what we didn’t miss? Five-minute development server startups, mysterious GraphQL compilation errors, and watching our simple blog somehow pull in half of node_modules.

Why Astro Caught My Eye

After years of Hugo serving me faithfully (thank you, dear friend), Astro swooped in with its “Ship Less JavaScript” motto and had me at “partial hydration.” For those uninitiated, imagine having the power to decide which components need to be interactive and which can remain as static as my morning coffee routine. That’s Astro’s Islands Architecture in a nutshell.

The Good Parts

Remember how we had to wrangle with Go templates in Hugo? Astro lets you write in good old JavaScript/TypeScript with a sprinkle of JSX-like syntax. It feels like coming home after a long vacation – if home had somehow become cooler while you were away.

---
// Your frontmatter is just JavaScript!
const posts = await getposts();
const coffeeLevel = "high";
---
 
<h1>My Blog Posts ({posts.length})</h1>
{posts.map(post => <PostCard post={post} />)}

The “Interesting” Parts

Moving my content directory was like playing Tetris with markdown files. Hugo and Astro handle frontmatter slightly differently, so I found myself writing a quick script to transform my YAML frontmatter. Note to self: Always check the date formats – turns out 2024-02-08 and February 8, 2024 are not interchangeable!

Let’s talk about the elephant in the room: build speeds. If Hugo is a cheetah, Astro is more like a well-trained marathon runner – not as fast, but still impressive in its own right. Where Hugo would build my site in milliseconds (showing off, really), Astro takes a few seconds. But here’s the thing: those extra seconds buy you a lot of modern conveniences. It’s like choosing between a race car and a luxury SUV – sure, one’s faster, but the other comes with heated seats and a great sound system. Plus, with the dev server’s fast refresh and partial rebuilds, you’ll only notice the difference when doing a full production build, which, let’s be honest, is usually when you’re already getting up to grab more coffee anyway.

View Transitions: The “How Did I Live Without This?” Feature

Remember those jarring page transitions where content would suddenly disappear and reappear? The view transitions API changes all that with an elegance that feels almost magical. And the support for it in Astro is super neat. And it’s ridiculously easy to implement.

---
import { ClientRouter } from 'astro:transitions';
---
<head>
  <ClientRouter />
</head>

That’s it. Really. Astro starts handling your transitions automatically. Want to get fancy? You can customize transitions for specific elements with just a single attribute:

<h1 transition:name="title">My Awesome Blog</h1>
<img transition:name="hero" src={post.image} />

Now your titles and images smoothly animate between pages like they’re performing a choreographed dance. Once you start playing with view transitions, you’ll find yourself adding them everywhere – because why shouldn’t your blog posts slide in with style?

Content Collections

Remember manually maintaining those Hugo taxonomies? Astro’s content collections are like having a personal librarian who actually understands TypeScript. The schema validation alone saved me from countless “undefined” surprises.

// src/content/config.ts
import { defineCollection, z } from 'astro:content';
 
const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    publishDate: z.date(),
    isThisAwesome: z.boolean().default(true)
  })
});

Image Optimization

Astro’s built-in image optimization made me realize I’ve been living in the stone age. This trend towards built-in image optimization support is really growing on me. No more manual ImageMagick commands! Just import and use – Astro handles the rest. My images are now as optimized as my coffee brewing process (which is very optimized, thank you very much).

React Components: The Game Changer

Let’s talk about the real MVP here – seamless React integration. Want to drop in that fancy interactive chart component you’ve been eyeing? Just import it. Need that slick animation library you love? It’s yours. Want to use your entire component library that you’ve crafted over years? Bring it all in!

The best part? Astro’s partial hydration means these components only ship JavaScript when they need to be interactive. It’s like having your React cake and eating it too – all the power of React components with none of the bloat. Gone are the days of template limitations or reaching for hacky shortcodes. Now we’re writing real, maintainable components that we actually enjoy working with.

The Grand Transformation

Let’s be real – this wasn’t just a migration, it was a complete metamorphosis. The site emerged from its Hugo cocoon as a totally different beast. Those React components I’d been dreaming about? They’re now powering interactive data visualizations and smooth animations. The dark mode implementation that used to be a hacky JavaScript snippet? Now it’s a sleek, hydrated React component with smooth transitions.

Sure, I could have achieved something similar with Hugo, but it would have felt like trying to parallel park a tank. With Astro, it’s like driving a Tesla – smooth, modern, and with all the features you didn’t know you needed until you had them. The development experience is light-years ahead, and the final product? It’s not just a blog anymore – it’s a modern web experience that just happens to serve blog content.

The Zen of Static Sites

Looking back, there’s a certain wisdom in not jumping on every hype train that pulls into the station. Hugo’s simplicity kept us grounded – no GraphQL schemas to maintain, no runtime JavaScript unless absolutely necessary. In a world where AI seems to be rewriting everything overnight, there’s something comforting about static site generators that just work.

Coming back to civilian life, it’s both exciting and overwhelming to see how much has changed. Copilot writes half your code, ChatGPT debugs the other half, and every other day there’s a new framework promising to revolutionize web development. But Astro? It feels different. It’s not trying to revolutionize how we think about the web – it’s just making it easier to build what we already know works. It’s like Hugo’s philosophical successor who went to coding bootcamp and learned some new tricks.

Was It Worth It?

If you measure worth in terms of practical benefits, maybe not. But if you measure it in learning experience and the sheer joy of playing with new tech, absolutely! Plus, now I can smugly mention “Islands Architecture” in casual conversation, which is priceless.

Conclusion

Would I recommend moving from Hugo to Astro? If you enjoy tinkering, love modern JavaScript, and want those sweet, sweet view transitions that make your visitors go “Woah, how did they do that?” – absolutely! Astro brings some genuinely cool features to the table, and the developer experience is chef’s kiss.

Remember, in the vast space of static site generators, it’s not about reaching the destination – it’s about the friends (and build tools) we make along the way. Now, if you’ll excuse me, I need to go add view transitions to my 404 page, because why not make errors look fantastic too?