During the past couple of weekends I took a break from The Bug Squad (more on that soon!) and migrated my website to Astro.
It’s been a (mostly) stress-free and enjoyable process. This setup supersedes my previous homebrewed solution built on top of Gulp, a bunch of plugins and some duct tape.
Over the years my website has grown from only a couple of portfolio pages to roughly ~240 assets (including pages, images, stylesheets, scripts, etc.), which I guess was just too much for my simple custom setup to handle.
Build times were starting to get out of control. Even previewing a simple change had started to take a considerable amount of time, making iteration — on blog posts in particular — a real pain.
Why Astro and initial setup
I have been searching for an alternative solution for quite a while. In particular, I wanted a NodeJS tool that offered a good mix between out-of-the-box features and configurability. I’ve not done any serious web development in ages, so ease of use was essential. I also didn’t want to learn new programming languages or how to code new templates.
Astro caught my eye because it promised everything I was looking for: layouts, React-like components, Markdown / MDX, quick dev-time reloads and an automated process for bundling assets and processing content.
The initial setup was effortless thanks to an install wizard that walks you through all the steps:
> npm create astro@latestThis is enough to have a local development environment setup with nearly instant reloads. There’s also a VS Code extension that provides nice (albeit not perfect) syntax highlighting and intellisense.
Integrations
MDX is available by simply installing the @astrojs/mdx “integration”. Again everything is taken care of by the install wizard:
> npx astro add mdxAdditional integrations are available to automatically optimize images (@astrojs/image) and generate sitemaps (@astrojs/sitemap). Docs are also very well written. I found the official Discord server to be a very good place too look for information and advice when getting stuck. I was able to migrate most of the content effortlessly and also took the chance to move away from some tech I was using in my previous website such as PugJS and rework all the code to TypeScript.
Astro provides a very easy to use routing mechanisms that I’m using to dynamically generate tag and pagination pages for my blog, as well as render the Blueprint graph previews for my tools.
Final thoughts
Of course there were also a couple of roadbumps. The first one was generating the Atom feed for my blog which also includes the content of the posts. Content in Astro needs to go through Astro components or layouts in order to render, but Astro components can’t output XML it seems. Luckily this workaround from someone who struggled with the same problem seems to do the trick, waiting for the Astro team to implement a solution somehow.
A couple of pages proved particularly complex to migrate. In particular the Lobbyist and Lobbyist API reference pages took some figuring out, but that was probably to be expected since they’re the most complex ones on my site. Understanding how the @astro/image integration worked also took some digging into Astro’s underlying tech stack (Vite), but that’s on me for being ignorant about how cool kids are building the web these days (starting to feel old! 😄 ).
The last piece to the puzzle was the community-developed astro-compress plugin, which automatically compresses the built output files. I was pleasantly surprised by the very good out-of-the-box Lighthouse scores:
The result above is for one of my most complex pages with no additional optimization steps taken besides what Astro and astro-compress do automatically. There are still a few things I’d like to tweak, but the site should be working as — or hopefully even better than — before. Please let me know if you notice any issues.
Overall I really do recommend Astro. Now let’s see if this upgraded setups motivates me to write more often! 😄