Astro for Blogging

The code for this site is at https://github.com/gnarg/everything-counts.

I knew I wanted a static site that I could host cheaply and easily. I decided on Astro partly because it seemed well recommended on the internet, and partly because I just finished a couple static sites in SvelteKit. While SvelteKit definitely supports static sites, it seems like it offers a little resistance, like it really wants to be a full stack. Astro is similar, but more focused on being only a static site generator.

I started with the basic blog template described in the documentation npm create astro@latest -- --template blog but quickly decided I wanted to add tagging support.

The Generate tag pages tutorial looks promising but I ran into trouble with the code given for getting a list of all posts.

const allPosts = await Astro.glob('../posts/*.md');

The post objects returned are missing url attributes, so this code doesn’t work at all.

{posts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}

The more idiomatic way to get posts seems to be this.

const allPosts = await getCollection('blog');

Which then works fine to list posts like this.

{posts.map((post) => <dt><a href={`/blog/${post.slug}/`}>{post.data.title}</a></dt><dd>{post.data.description}</dd>)}

All of this you can see here.

Having gotten this working, I’m going to experiment with using Bridgy for POSSE syndication to Mastodon.