My Experience Migrating to Astro From Hugo

Back in February of 2016 I created this website using Hugo. I chose Hugo primarily because of its fast builds, but also because it was easy to use and author content with as it supported markdown. However, I’ve recently switched my website over to Astro and I’m going to talk about my experience with it and why I made the switch.

Why Migrate?

There are a couple of reasons why I migrated, but the biggest one for me was theming. Of course, Hugo themes can be customized if needed, but in my experience it was a bit difficult. I initially started out with a custom theme of my own, but eventually decided to adopt another one instead and make changes to it to suit my needs.

I made changes to my Hugo site so that externally linked content can be handled differently than the content I write for viewing on this site. However, it was a common enough occurrence that new Hugo versions would deprecate a feature or change something requiring me to make changes to the theme.

I synced my fork of the theme with the upstream version such that I was never more than a few months out of date, but even in just my changes alone I found that I had to keep up with breaking changes often enough that it became annoying whenever I added new content to the site. Of course I could have just never upgraded my Hugo or theme version so that this wasn’t an issue, but that doesn’t sit right with me.

In addition to that the Hugo templating syntax never really clicked for me. Whenever I had to return to it to make some changes to my site that meant that I had to relearn the syntax again since I don’t use it with any other projects in my day to day, and frankly the syntax just felt clunky to me.

That’s where Astro comes in.

Introduce Astro

A friend recommended that I try out Astro, and after seeing what it supports out of the box and how it worked I decided to give it a try. Astro, much like Hugo, is a static site generator. Specifically, it’s a static site generator that I can use with technologies that I’m more familiar with.

Before I decided to go with Astro I did think about going with Next.js since I already maintain a website with a blog written with it. However, I decided that would be unnecessary since the reason why we went with Next was for its first-class ISR support as that site has a lot of content. This wasn’t a problem I have to worry about with this site as SSG can handle a few dozen pages without breaking a sweat.

My First Impressions

I was surprised about how simple Astro was. After initializing a new project it gave me just a build system and an index page. That’s it. Technically I could’ve gotten more had I used a theme, but I wanted to design this site myself from scratch. I didn’t find this intimidating at all though since Astro pages and components use JSX-like syntax and MDX, both of which I’m intimately familiar with. Sharing components with pages is simple as well it’s done through ESM imports.

The builds are still very fast. It’s not as fast as Hugo was on my site, but the difference is negligible for me.

The page weight of all these pages is very small, just as it was with Hugo. The largest parts of the page belong to media such as images. No unnecessary JS is required. This low page weight makes preloading pages a user might navigate to extremely cheap. I was able to add page preloading whenever a page link is hovered over with only a couple of lines of config.

export default defineConfig({
  integrations: [mdx(), sitemap(), tailwind()],

  site: process.env.PRODUCTION_URL
    ? `https://${process.env.PRODUCTION_URL}`
    : process.env.VERCEL_URL
      ? `https://${process.env.VERCEL_URL}`
      : "http://localhost:4321",

  // Prefetch everything by default since every page is lightweight.
  prefetch: {
    prefetchAll: true,
  },
});

Although I had started from scratch the documentation was immensely helpful and well written. I adapted many of the examples in the build a blog section which helped me get familiar with Astro enough that I could extend my site however I needed to.

Astro sites are very easy to customize

I love that fact that I can use JS as the language to generate my pages with. Need a bunch of data-driven pages using data from an external source? Just fetch it using getStaticProps and render it, and if you need to transform the data you only have to write JS.

Components are easy to write as well. I could create a new .astro file and put pure HTML in there, import it, and it’ll just work. If I need to pass in data then I add a frontmatter section to the top of the file and read the fields I need off of Astro.props.

Tailwind is surprisingly awesome

This is unrelated to Astro, but I managed to avoid using Tailwind for quite a while since none of the projects I’ve been on have used it. I avoided using it for a while since it seemed strange to me to put all of your styles alongside your markup, which mind you goes against everything I was taught early in my career, but I wanted to learn it regardless since it was likely I’d have a run in with it whether I liked it or not. Also, I can’t really dislike something if I haven’t given it a fair shake.

I was surprised at how fast I was able to create the theme for my site. It took me 3 days to do the redesign, and they weren’t full days either as I had been spending time with family, and on top of that the first day was mostly me getting all of the old markdown content ported over to work well with Astro and writing boilerplate. The speed at which Tailwind allowed me to write the theme for my site was fast and I was impressed. Also, the fact that Tailwind removes unused CSS rulesets from pages that don’t need it is a great bonus, although I don’t benefit much from it with this site.

Anyhow, I’m a Tailwind convert now.

My Final Thoughts

I could not be any happier with choosing Astro for my website redesign. The fact that it uses JSX-like syntax makes me feel right at home when it comes to customizing my site and adding new components that can be used anywhere in my site is a breeze. I’m also confident that whenever I get around to adding dynamic functionality to my website that it’ll be easy to do thanks to the island architecture. You can view the source code of my website on GitHub if you want to see how I implemented this redesign.

Hugo has served me well for the last 8 years, and I hope Astro will for just as long, if not longer. If you are considering using Astro for a static site of yours, do it. I promise you that you won’t be disappointed.