Skip to content

Migrating my site from Eleventy to Astro

Published On
Read Time
2 min
On This Page3 sections

Almost exactly two years ago, I migrated my website and blog from Next.js to Eleventy, a static site generator. It’s an unwritten law that developers have to rebuild their website once in a while, so it was time for a fresh start.

Previous Stack

This website was built with Eleventy, a static site generator with support for different template languages like Nunjucks and Liquid. The maintainers also built WebC, a more modern approach than traditional template languages, with single-file web components.

In theory, WebC sounds great, with its component-like approach, build-time JavaScript, and scoped styles. In practice, I stumbled upon multiple issues during development that still exist two years later. The corresponding NPM packages haven’t been updated for years and are not widely used. I don’t know what the future of WebC is, but given the current state, I wouldn’t recommend it for new projects (unlike Eleventy itself, which is still a solid choice).

New Stack

The website is built with Astro, a web framework for content-driven websites. The site is just static HTML and CSS files without any runtime JavaScript.

The blog posts are still written in Markdown and handled via Astro’s content collections. Thanks to schema validation with Zod, this is even type-safe.

For styling, I started with custom CSS (and design tokens based on Designing Design Systems), but later switched to Tailwind. There are many things I don’t like about Tailwind, but it was faster than writing all the base styles myself. I still rely on some custom CSS with Tailwind’s @apply directive to avoid endless lists of class names. I finally also managed to implement a (hopefully decent but not perfect) dark mode.

How AI helped

I mostly built the website on my own. I even started with a rough draft in Figma before writing any code. However, using AI (GitHub Copilot and Claude Code) helped with some tasks:

  • I used it to migrate my custom CSS to Tailwind classes.
  • After implementing a page, I created a screenshot and asked Claude for design feedback.
  • For some elements, I asked Claude for different variants to get design inspiration.
  • I implemented the whole website in light mode and then asked Claude Code to implement a dark mode. It wasn’t perfect, had some contrast issues, and Claude also forgot a few elements, but overall it was a pretty good start.

That’s it, see you in two years when it’s time to rewrite it again 👋