Astro is a great framework for building a blog site, and has been fairly straightforward to set up. In this post I’ve added a couple of things I found particularly handy along the way.
Tutorials
The official docs have a pretty good walkthrough on setting things up, but for me, the Coding in Public Youtube channel by Chris Pennington was excellent. Even some of the older videos are really good for explaining Astro and some of the features – especially since I wanted to build from the ground up, rather than relying on a theme.
He now has a comprehensive Learn Astro course which I’m sure is really good.
Themes
As mentioned above, there are Astro Themes that you can use out of the box. I’ve mostly used these for inspiration on layout and design, then tried to implement them myself – things like the tags/categories for example.
Also worth checking out the integrations. For a relatively new framework there’s a lot of these already. I’m using Partytown for the loading of Google Analytics, to make things a bit quicker.
Aliases
A nice code quality thing that is handy to set up is the use of aliases. Essentially, turning ../../../Header.astro into something like @components/layout/Header.astro.
Images
Probably the trickiest thing to set up, but also one of the most important. Images are (relatively) large, especially PNGs, so optimising them for the web is so important. Of course, Astro knows this, so they’ve created an Image component that features a lot of features such as lazyloading and conversion to other formats. This can all be found in the Image reference.
ViewTransitions
The introduction of the ViewTransitions API makes navigating websites so much slicker. I wasn’t aware of this, having been away from frontend code for a while, other than using React/Remix.
This is very straightforward to set up in Astro and I personally found Florian’s loading indicator integration an amazing addition. Since navigation is smoother with view transitions, it means on slower network the user might not realise navigation is even taking place, so adding a loading bar to the top of the page works really well.
DavAI SummAIriser
Want a quick summary of this post?
