Written by Stephen Condon
Published on: 2/16/2025
Welcome to my new blog, I’m hoping to explore some mostly tech topics in public, and hopefully provide some helpful lessons learned to anyone who finds this.
Astro is a JAMstack frontend framework (are we still allowed to say JAMstack?), that I decided to dive into for this blog. I ran through the Astro blog tutorial, which is really great, as an introduction to Astro.
I’ll use this blog to demo frontend tasks, but given much of my day-to-day is in the backend/platform/SRE space, I’m sure I’ve have plenty of fun items that you can’t just load up in your browser too. I’ve been fullstack most of my career, so this blog being a frontend framework probably will be a way to keep my toe in those frontend waters.
Like I said earlier, the tutorial is great. It was easy to follow for someone not as familiar with Astro (though the HTML/CSS/JS component model is familiar to me from a significant Vue 2 project I did in 2020-2021). There were a few places I ran off the rails, of course, but it also made for a good experience of either looking back through the docs for the critical thing I missed, or by giving me a chance to write freeform javascript to make it work.
Basically I messed something up with the tooling to pull .md files from the src/pages/blog/ directory, so I wrote a quick anonymous function for the BlogPost component to rewrite the link value to the real location:
const urlRewrite = (rawUrl: string) => {
return rawUrl.replace('/astro-blog/src/pages', '');
}For each BlogPost component rendered, I rewrote the link to the post on the fly to make it all work (vs. doing the hard work of figuring out why my use of import.meta.glob() worked in an unexpected way). It ended up not mattering, as the tutorial has an optional task at the end of converting to use a content collection schema, which ended up refactoring the issue out, but it was helpful in terms of really realizing it’s all just HTML/CSS/JS.
The last part of the tutorial involves pulling in a framework called preact & creating an arbitrary JSX-based component, in this case to allow for display of a random greeting message when clicking a button. It randomizes a static list passed into the component, which definitely feels arbitrary, but if you wanted to do something like integrate react into your site, this is an interesting approach.
If I wanted to generally use react though, I don’t think I would do it via the intermediary of Astro. I guess this would be useful if you didn’t want to go all in, or if you just needed a touch of reactivity. I don’t know, I am having trouble thinking about why I would use this approach vs. building an actual React app.
The tutorial is good - if you haven’t used Astro before, I definitely would recommend going through it, I completed it in ~4 hours as a complete novice with a few tangents. I’ll continue to improve this blog as I move forward, and maybe use it as a testbed for different things I want to do.
Tags: