Making This Website Using Astro

In this post I explain my process of using Astro to build this website.

The Github Repo: Personal Website

---

What is Astro?

Lovely quote from my favorite creator on programming Youtube:

Astro is a tool for building static websites with your favorite Javascript frameworks while shipping 0 Javascript to the user.
Fireship

Astro in 100 Seconds

---

Why Did I Choose Astro?

I thought it was a great solution for this site. I needed a place to document all the things personal projects I make, and Astro offers a simple and clean way to make an easy blog. I could also utilize React to make some nice lazy loaded blogs.

---

Things I learned:

1. Astro is awesome!
2. Astro components are great for reusable stuff on the site, however, be careful with what you define a component. Components need a purpose!!
3. Make sure to read the documentation fully!! More: Reading the Documentation Fully
4. Regex lookback is not supported on Safari, Found a Bug In Astro’s Renderer

Reading the Documentation Fully

I had an issue with finding out how to make dynamic links to blog posts. The goal was to have a post be defined with a UUID slug and have the link use it to access the post (e.g. /posts/ba4d373b-b972-456a-866a-89e894ebe76b is a dynamic link of /post/:uuid).

I was trying to use the getStaticPaths() method for almost an entire day until I realized that I couldn’t use it as it was only for client side rendered sites. Mine was server side rendered (SSR) using Netlify, but I didn’t notice 🤦‍♂️. Lesson Learned: READ THE DOCUMENTATION. Until I forget it hahahaha.

---

Verdict

Loved working with Astro, will definitely build more things with it.

Goals From This Project

• Learn more about Regex.
• Keep Component structure in mind during future projects.