Building with Astro

My first solo Astro project, definitely not the last.

2024-09-27

Written by Jordan Zappitello

The Astro logo on a dark background with a purple gradient arc.

astro

blogging

inspiration

Recently, I’ve had the opportunity to use Astro a lot, both in a professional environment as well as in a personal project (this blog). I wanted to share some thoughts on Astro’s setup and the developer experience.

A Short Introduction

I’ve been a web developer professionally for 2 years. I started my journey into web development about 3 years ago. I can say that I’ve been lucky enough to work with a lot of different web technologies already. I don’t think I’ve enjoyed the setup and ease of use of anything as much as I have with Astro. Their getting started docs are definitely beginner-friendly, easy to follow, and simple to set up. Within minutes, I had a working site connected to GitHub and deployed on Netlify. What really pushed me to make this whole site was Oskar Wickström’s repository, the-monospace-web.

An Inspiration

The Monospace Web was shared with me by a colleague. When I saw it, I was ogling for the better part of an hour. Truth be told, I went to Oskar’s Twitter account and scrolled through the replies to the announcement of this awesome project. While on Twitter, I stumbled upon Florian Klampfer’s reply. He was showing off some awesome concepts with the links, table of contents, disabled buttons/inputs, and code blocks. I knew that I needed to redo my entire portfolio to look like this. It gave me an excuse to work on something fun and build a blog, which had been a goal of mine. With this in mind, I decided to create my own monospace-inspired portfolio and blog with Astro.

The Setup

Ultimately, I decided to follow Astro’s Tutorial: Build a Blog. It helped me with the setup, as this was the first time I set up an Astro instance by myself. I completed the tutorial and went back to refactor some things to work the way I wanted them to. The flexibility of Astro really gave me confidence in this. I decided to use Tailwind for all of my styling needs. Once it was all installed, I just kept going back and forth between The Monospace Web and Florian’s post on Twitter.

The End Result

Since you’re reading this, I have officially started my first blog! I am super proud of how I built it and how it turned out. I’m super excited to share this blog with you all. I know I’m not a perfect developer, and I still have a lot of learning to do. Hopefully, some of you will follow along my journey.

Big thanks again to Oskar and Florian for the inspiration behind this whole project!