Skip to content

Adventures in Astro

The start to learning the front-end of the web

Recently, some of my work has begun to involve the front-end. Most of my time I work on microservices or embedded work, so learning the front-end was not something I spent much time learning how to do. So when I started to work on building this blog I thought this would be a great opportunity to start learning a bit more about how to work on the front-end. Where would I start? How should I begin sifting through this mountain of frameworks?

My only experience in front-end work up until this point was Qt/C++ in college and the web seems to function on a completely different set of rules than I was used to. With this in mind, I wanted to set out for something fast, flexible, and dynamic. In the past I had tried platforms like Hugo and Jekyll, but I found that these platforms often limited my ability to actually build something to my specification. I often found myself wanting more than just a simple Markdown blog, this is where Astro comes in.

Astro gave me the ease of something like Hugo or Jekyll but the flexibility to embed my own custom components from popular frameworks. Furthermore, I wanted the ability to edit raw components using plain HTML or Javascript, something that Astro does well. Astro's islands model helps to facilitate a workflow where I can focus on complexity where I need it rather than having to learn the entire theme to make changes (a problem I often had in Hugo). Furthermore, the documentation provided by Astro was excellent to bootstrap whatever you might want to add.

For this site, I used the Blogster Minimal theme but modified it with some other pieces for my use case. The addition of a "resume" component is one completely built by me. I wanted to add a way to show my resume on the site directly. As of right now, each job is represented as an Astro component. Currently, that part of the site is not mobile optimized, but I do have plans to further optimize this for mobile and potentially to replace the entire page with Markdown converted to Astro components. The developer experience for creating new components was as simple as adding the variables you want to receive and defining your layout in HTML. For a front-end novice, this was excellent!

With all of this in mind, I built this site with Astro, so keep an eye out for any new features!