Building an Astro Blog

Getting Started

I decided to build myself a new blog, to cover the things I was doing to try and understand all the new AI technology being released. I wanted a static site generator, and after a brief look at Hugo I settled on Astro since it kept the whole technology stack using Typescript rather than needing to learn Go.

The process began with the Astro Getting Started Guide, followed by the Astro Build a Blog tutorial. Both of those were pretty straightforward, but the result was very basic and didn’t look great. I wanted to use Tailwind CSS, and I wanted to have a light/dark mode toggle. I also wanted to include some images, and I wanted to use the Astro image optimization features.

Before starting on the customizations I pushed the working project I had to Github and published it on Vercel. I also hooked it up with a domain name so once I had the customizations done I had a full working blog I could share with people.

Customizing the Blog

With the first version of the blog working and published, I could start on the customizations:

Tailwind CSS for styling. Light and Dark theme modes. Making use of the Image component for optimizing image assets. Using elements from Tailwind UI and Tailblocks to improve the interface.

First challenges

Probably the biggest challenge was my inexperience with everything I was using. I’d used Tailwind a couple of times for some quick prototypes but never properly got into it. I knew nothing about Astro apart from the tutorial I’d just done.

After some trial and error, I figured out that some of the issues I was having were because I needed to configure Tailwind properly.

For example, the light/dark theming toggle wasn’t working, and that was because of this piece of missing config:

module.exports = {
  darkMode: "class",
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  safeList: ["dark"],

I also didn’t like the look of the Markdown posts, and the solution to that was as simple as adding the Tailwind Typography plugin and adding some classes to the html elements surrounding where the Markdown content would be injected.

Content Collections

As I learned more about Astro I realized that to keep the tutorial simple they hadn’t used Content Collections. This was a more advanced feature that takes a bit of setting up but once working gives you much better control over how you work with the content in the blog.

I spent quite a while retrofitting content collections into the site I’d built, unfortunately finding the instructions on how to do exactly that only after I’d wasted a couple of hours trying to figure it out myself. Definitely an RTFM moment!

Image component

Using the Astro image component was easier, though still required some work with CSS to get the images to sit nicely in the layout. The result seemed decent, but I think there is more to be understood about how Astro works with images and this is something I’ll come back to later when I’ve got more time.

Bugs

I had a few issues with sorting posts correctly, and a persistent problem using server functions on Vercel. Not wanting to get into a protracted debugging session for something that was a nice to have, I set the astro site to be static for now.

Conclusion

I like Astro, and I think I’m going to enjoy working with this blog. I like how it looks and I like the process of editing and publishing new content.

I’m also looking good to enter this competition: