It’s day 15 of Blogvent, where I blog every day in December!

If you’ve seen an RSS feed link lately, you know that when you click on it, you’ll probably see a bunch of XML and might think, “eh, ugly, but at least I can pop it into my newsreader” and go about your day.

But what if you saw the link to my RSS feed?

That’s right.

I heard you gasp.

It’s beautiful.

Just like you.

I want more beauty in my life!

Same.

I found out how to add styles to RSS feeds from the website About Feeds by Matt Webb! It’s a useful website for explaining RSS feeds in general.

There’s a template linked at the bottom of the website, or you can find it right here. The file is an XSL file, which stands for “Extensible Stylesheet Language”, and it looks a whole lot like your usual HTML, and in fact, you style it with your usual CSS!

I made a gist of the XSL file that I use on my own blog here so you can see the styles I set up for it (starting on line 76).

Copy it and make it your own!

How did you add it to your website?

Oh yeah, great question. If you’re using Astro, it’s relatively straightforward by adding a stylesheet property to the rss function, like so:

export const GET = () =>
  rss({
    title: /* ... */,
    /* ... */
    stylesheet: "/rss-styles.xsl",
  });

And you put the rss-styles.xsl file in your public/ directory!

If you’re using my blog template (which you’re welcome to, it’s fully open source and free to you), I actually already added that line in the RSS feed generation, so all you have to do is pick out the styles you want and add the file to the public/ directory!

I didn’t include it by default because there’s some opinions about the limitations of styling your RSS feed, for example, styling the feed prevents the browser from automatically opening a newsreader application (which you might not care about, like me, but I didn’t want to force that opinion on folks getting started).

Anyway! I hope you enjoy making your little corner of the internet a bit more beautiful.

See you tomorrow, and don’t forget to subscribe to my blog (via email or RSS), or my newsletter (email or RSS)!