Skip to content

André Torgal

(re)Building my website with Astro + MDX + Preact

Relaunching my website, again based on another Typescript SSG framework. :rocket: Not React-Static anymore, not even React “at all”. Introducing the magnificent Astro. :moon:

Backstory

Previous version of the website, back from 2019, was also SSG but built with React Static, which is now sponsor-less and in maintenance mode.

Meanwhile, my website’s core metrics have been degrading over the last 3 years and I could use the opportunity to dream up some exciting new features.

After some reflection about the (great) react-static + unified.js experience I am moving on to something newer, faster, better.

Why Astro?

Is this the static site generator I have always been looking for?

I have been having a great experience while helping friends build the Button School website and it really delivers on some of the promises.

It is a great experience

  • Easy to setup, uncomplicated.
  • Sensible defaults but extensible.
  • Amazing documentation.
  • Fast builds.
  • Very fast development server.

It meets all my requirements

  • (extensible) Markdown & MDX support.
  • Fully SSG first.
  • with opt-in, micro client side islands.
  • with opt-in route pre-fetching support.
  • 100/100 Lighthouse performance.
  • SEO-friendly with canonical URLs / OpenGraph.
  • Sitemap support.
  • RSS Feed support.

Of course, there are always some trade-offs to consider, but no deal breakers there.

The project looks very healthy

I did chose the smaller community when I chose React Static. Kudos to Tanner Linsley, great work! But eventually React Static died out, and 4 years flew by 😵 meanwhile.

I wanted to make sure the next iteration of this website doesn’t run into the same oops, so I have been watching Astro’s community for signs.

And the signs are all good.

Solid foundation

First of, Astro is built on a solid, well supported, but also quite modern stack:

It uses vite as a build orchestrator, famous for already using ESM during development, which noticeably speeds ups HRM. Also under the hood, rollup.js. The Vite + Rollup pair is definitely mature, well tested, firmly set in our landscape for a while.

Astro’s Markdown and MDX capabilities are also built around a super solid ecosystem. As I blogged ✍️ recently, in my opinion, Unified.js is going to be around for a long time.

Plugin architecture

Astro has a neat plugin architecture and plenty of tools to plug in already.

I am already using the following:

Also, because Unified.js has a pipeline architecture, you can plug in any remark and rehype plugins as you want.

I am already using:

Community

Finally, the community looks very healthy, high energy, operating at high performance, and well governed.

Just take a look at:

Big kudos

Congrats to all the people involved this! SSG with Astro is kicking ass!

😍 Great dev experience.

🔥 Fast.

🏆 An SSG for the next decade.

Next steps

Take it to the next level! Tweak this website until it provides me with that 🤩 awesome experience while authoring the content, and it provides you - 👋 hey there! - with a pleasant, performant, and accessible experience.

Then on to make it entertaining, informative, and useful as well.

On the next post I describe my ideal MDX authoring experience and later I’ll explain what I did to make it happen.


This post was published on and and last updated on

Go back to top of the page