Saying goodbye to my React Static website
I am relaunching my website with Astro. Writing down a word or two about the previous version, React Static, and the original "MDX" experience.
Backstory
My previous version of this website, back from 2019, was built with a static site generator (SSG). This was the first requirement for me in 2019 when selecting the language and framework to bring my site back to life.
React Static is now in maintenance mode and I need to replace it with something more modern.
Maybe you want to skip ahead, and read about how I am building it again with Astro.
Or stay, and walk with me as I revisit the decisions records of 2019, and ask:
- what still stands?
- what goes away?
- what else is needed?
SSG! Of course
SSG has been around since the early days and I believe it's the best tool for many types of websites, definitely for content first use cases, such as search engine optimised content, media distribution, documentation, personal websites, ... many more.
👍 I was obviously going to stick to SSG in 2019 and there is no reason to change this now.
React Static was good, at the time
Even if I entertained the idea, and played around with some classics like Hugo and Jekyll, Typescript will always be home to me. And a personal website should feel like home.
Between the modern options, React Static seemed to be one of the simple ones, inline with Eleventy, and as opposed to Gatsby, an eventual serious contender, that I found about to be a bit too complicated and rigid for my liking.
On the other hand, React Static was less opinionated about how content should be structured, modeled, stored, loaded, or represented. And while it was simpler, it still allowed me to customise pretty much everything I ever thought of tweaking. For instance, I was able to rollout a custom frontmatter approach with custom rules and defaults, according to my ideal information architecture.
Nevertheless. The project went down. A shame especially because it seems to have been a victim of disruption by covid.
🚫 React Static. I am now using Astro + preact to rebuild my website.
Markdown love
I had been entertaining the idea of basing my website out of simple text files for a looooong time. Maybe because I've been a fan of plain text since the early days of wiki on a stick. It actually hits me now that I might have originally ported my website to Markdown back in 2016? Maybe? 😁
Conclusion? Still the best support for documentation and personal publishing, and probably for many other use cases.
Personally, my favorite medium to think and express myself, directly in the IDE in plain text. No database, no API, no CMS. Everything stored in Github right next to the code.
👍 No brainer. Did not change 4 year later.
Going the distance with MD(X) or...
Since I am some times craving for some exciting half-broken experience, at the time I also decided to use MDX, another content format, a mutation of Markdown if you will, that allows you to also drop React components in the middle of plain text.
But since at the time, literally around mdx@1.0
, there were some serious limitation, I took the opportunity to explore how the whole thing works, and tried my hand at wiring up some transformations myself, using some of the code of the Markdown/MDX ecosystem.
Turned out to be a really fun experience!
Ended up using a few libraries from the unified-js ecosystem. Actually, looking at the direct dependencies on my package.json
, looks like I was able to put to good use a bunch of these beautiful micro packages.
rehype-autolink-headings
rehype-highlight
rehype-parse
rehype-raw
rehype-react
rehype-slug
remark
remark-emoji
remark-html
remark-parse
remark-rehype
remark-strip-html
remark-toc
remark-unlink
unified
unist-util-filter
unist-util-visit
Did you read that :-D ?
🤯 4 years later, MDX and unified-js ecosystem have come a long way. No more wiring up things manually. I am migrating the website to Astro, which already provides a great MDX integration, anyways.
Operations, performance, costs
The build time with React Static never went over 1 minute. No complains, ever.
I never actually automated this in the cloud, and it was always running in my computer.
💡 Speaking of which. I might change hosting from AWS to Netlify. This site has been hosted on S3/Cloudfront for almost 4 years, at around $2.50/month, but the Netlify is so much better than the AWS monster.
What's next?
Continue reading about how I am rebuilding the website with Astro.