From React to Astro - Part I
When I first discovered my passion for web development, I embarked on a journey to create my own website, a platform to showcase my portfolio. At that time I was learning React, and I built a clean and efficient React website, with content written in Markdown. The content is then read by a little npm script that I wrote and it relies on markdown.it to handle the markdown to html conversion, it then stores it in a local json file. you can peek at the scripts here. Then with the help of Github actions deploying my site was easy peasy: I would write the content, push the change to GH and then voila, The latest version gracefully updated on my S3 bucket. For the curious peeps, check the repository on GH
Fast forward two years, and now working as a software engineer, I felt the urge to revamp my website and incorporate a blog section. Additionally, I wanted to update certain sections to better reflect my current position and growth.
The dilemma? Stick with what’s familiar, or embrace a fresh start? Ultimately, I decided to go with the second option. This meant I needed to choose the right stack for building my new website. One of my requirements was to keep writing the content in Markdown. Now since Markdown compatibility was paramount, it was only natural to explore possibilities within the JamStack ecosystem. These are frameworks I considered:
- Next: A react framework that suport SSG as well Server Side Rendering. React was my first FE framework, I learnt even before my bootcamp. I was curious to see what had change in these 2 years.
- Nuxt: Vue framework and similar to Next it also supports SSG and SSR I’ve been working with Vue for more than 2 years and this felt a natural choice. But I craved a change from the daily grind.
- Eleventy (11y): is dedicated static site generator that I had breafily played before. It’s easy and quick to get it up and run. Fun fact so many popular websites for developers are build using E11y, check them out here.
- Astro.js: Astro is an open-source framework that allows developers to build websites where content is generated from Markdown files.
After careful consideration, I decided to embrace the new kid on the block: Astro.js. Its flexibility in creating components with Vue, React, or even Svelte and the possibility of typing the frontmatter, by defining a collection schema (learn more here), sealed the deal.
With this fresh technology, I am excited to embark on this website reconstruction journey.