Building a Web Site with Astro

About the target site:

The site is a small, private practice site, made of a dozen no-frills webpages. We embedded OpenStreetMap maps via iframe and we self-host two Google fonts for nice touches. Almost HTML 2.0 in its lack of bells and whistles.

Site's first incarnation was built using Jekyll. Jekyll in itself was quite a pleasure to use, not so much to set up, thanks to the dependency hell that more often than not rears its ugly head. Moreover, it was becoming slower and slower on each new release.

I then considered switching to Hugo. Blazing fast, no dependency hell... yet I couldn't wrap my head about its templating structure. I would eventually arrive to understand the logic behind it, only to forget mere weeks later. So (it's my fault, Hugo fans and users out there) I eventually threw the tovel.

Enter Eleventy. Not as fast as Hugo but definitely much faster than Jekyll, it had a better (IMHO) templating choice, more documentation and more examples. Making new sites from scratch became suddenly more easier, creating new content collection even yet easier. Thanks to sites like this building a layout from scratch became a pleasure.

So, if you're so happy with Eleventy, why the switch to Astro?

Well...

Result?

Overall, I liked building the site with Astro.

Pure content files, being markdown posts, were migrated with ease.

One bad point, however was that I had to prepend the layout in the front matter of every file. Didn't like it much because if I had hundreds of posts I would have to devise a script to do this job. Being only 12 pages, updating them was a minor nitpick instead. (It seems that this is so much an issue that someone devised a plugin to add default layout to markdown files: https://github.com/EccentricVamp/astro-default-layout )

What I DID like was its component architecture, with its React-inspired syntax. I found it helped me structure the site more easily than having to refer to nunchuck templates, and I arrived to a working proof of concept very rapidly.

This also reflected in template building. I found easier to convert a full-fledged webpage, completed with styles in an Astro-compliant set of Layouts and Components. IMHO, refactoring comes more natural with a React-based syntax, IMHO.

The static site generation speed is, however, quite on the middling site. On a small linux VM (4gig Ram, 2 cores) generating a sample blog with 1000 generated posts took 1m42s (with tag pages). Again, this is because Astro is more a framework than a generator.

I also didn't explore its features fully: Astro can integrate with a whole lot of web frameworks and components, for instance, so my experience is quite limited. Moreover, since my site does not use lots of javascript, I could not evaluate fully the benefit of its javascript-shrinking approach which, according to the documentation, yields a lot of savings in load time and returns clear benefits in site's responsiveness.

So the winner is...?

Quite sorry to disappoint you, but IMHO there's no clear winner.

Eleventy wins for its site generation speed, for its documentation and for its commitment to speedy websites. I heartily recommend it for static sites, small and large (like docs or blogs) and -- disclaimer -- Yours Truly uses it for his blog.

Astro wins for its versatility, for its "dev-friendly-ness", for its focus on end performance and for being slightly "more intuitive" than Eleventy. It's a good choice for apps and smallish static sites and wins my recommendation if you plan to integrate a web app section in your site.

Having said that, have a good time building your next site, whatever be your choice!