back

My astro adventure

2025-07-27

The Initial Spark

I’ve always wanted a space on the internet that felt like me. Something minimal, a bit retro, and personal, not just another cookie-cutter portfolio. So I went with Astro, which I heard was great for static sites and content-heavy pages.

Little did I know, the journey ahead wasn’t going to be as “static” as I thought. 😅

Setting Up Astro

I started off with Astro’s CLI and quickly scaffolded a project. The goal was simple:

  • A homepage with a quirky, personal touch
  • A blog page that reads from Markdown files
  • A two-column layout with a cozy, nostalgic feel

Seemed doable… until it wasn’t.

NowPlaying Nightmare

I wanted a section to show what I’m currently listening to — something simple and dynamic. But no matter what I tried, the component wouldn’t update live.

Turns out… Astro’s default config was sabotaging me. The project was set to output: “static”, which meant no server-side code could run.

The fix?

  • Change output to “server” in astro.config.mjs
  • Add @astrojs/vercel adapter

Boom!! the dynamic route started working, and “Now Playing” finally came to life. All because of one config line and a missing adapter.

The Blog Hurdle

This was the trickiest part.

I wanted the blog list to:

  1. Automatically read from .md files
  2. Display the date and title
  3. Sort posts by latest first
  4. Use the title as the URL slug
  5. Format the date in dd/mm/yy + 12-hour time

Each of these sounds easy. Together? A debugging marathon.

Gotchas & Wins

  • Sorting: Had to use new Date() manually.
  • Date formatting: toLocaleString() is both friend and enemy.
  • Slug from title: Made a kebab-case function to slugify titles.
  • Annoying TS error: "Spread types may only be created from object types" - fixed it by explicitly defining keys.
  • Markdown quirks: A few file naming slip-ups caused silent failures.

Also had to accept that some stuff just didn’t need fixing. The blog’s not a CMS, and that’s okay.

Final Thoughts

Despite the bumps, I now have a site that feels like me. It’s handcrafted, slightly chaotic, and proudly imperfect.

Thanks, Astro

Astro’s learning curve surprised me, but once things clicked, it felt powerful and efficient. Perfect for a blog/portfolio hybrid.

If you’re building a personal site: start simple, stay patient, and embrace the chaos. 😄

Thanks for reading! If you find a bug on my site, consider it an interactive feature.