Astro is a JavaScript framework for building super fast content driven websites, I used it to build the one you’re reading right now.
Astro is incredibly flexible, and also very easy to use. In it’s most basic form, it can display content from Markdown and Markdown X files. However, it also has integrations for all the popular CMS platforms, it can act as a front end for a variety of headless CMS systems.
I’m using it with Frontmatter CMS which is a VSCode plugin which manages all the images, text, tags and categories for my Astro site and in a way which Astro can understand. It’s simple and effective if you want to manage a site as a single owner, but it’s obviously not suitable if you need multiple users.
I learnt how to use Astro as I built this blog, I’d had experience with Vue.js (which we’ll come onto in a moment), which helped me understand the basic way Astro worked, but with the help of some ChatGPT and the Astro docs themselves I soon picked it up enought to get something working.
I started enjoying it so much I was adding stupid little extras, like the Soundtrack to Extinction. This involved adding some meta fields to the blog post type, in both Astro and Frontmatter, and then create a banner for the homepage to total up each Artist and Track and show the most popular choices.
It’s this sort of development that I love to do, It’s completely unnecessary but adds a little delight where there was none before.
The other big bonus for me using Astro, is that it allows you to use components from any of the popular javascript frameworks. In my case I’ve used Vue to create an image slider for the Blog and Portfolio posts.
Astro processes the images, which I then pass into the Vue Slider component, and then into a Vue Card component to show each post. I’ve used this for the featured work on the homepage, and I’ll also be using it on the Portfolio pages to highlight posts I want people to see first.
I kept the Slider and the Card components seperate as I envisiage that I’ll want to use the Card outside of the slider in due course, though I haven’t yet, it’ll be much less work in the future if I do end up wanting, for example, to create a gallery grid in the portfolio.
Astro has a build step, the idea is that the server processes as much as possible in advance. So either the server, or the client doesn’t have to construct the page on demand. This is how something like Wordpress works, and is why some wordpress websites can offer some nice functionality, but be increadibly slow to use.
I’ll end up writing more about Astro, as I’ve really only scratched the surface of what it can do. A headless CMS with an Astro frontend and modern CMS backend would be an ideal follow up project to this portfolio. Especially as it would be viable for use with teams, and therefore become more useful to use in projects at work.
Hopefully you’ll see me writing about that soon.