Last week, I was riding high thanks to this tweet mentioning how many personal websites don't include their owner's name. Then Chris posted this tweet highlighting the long list of RSS feeds he was subscribed to and my world came crashing down. I had a GitHub issue for adding a feed to this website, but hadn't prioritized it yet. This tweet launched it to the top of my list.

Since my blog on this site was custom built, there wasn't a plug-and-play solution out there for me - I had to write my own.

The Solution

After a bunch of googling, I landed on Juan Olvera's blog post, Rebuilding my blog with Next.js, which included details about how he added an RSS feed to his blog. I decided to follow the same pattern he used, “An npm script runs a Node function that generates the feed.” Once set up, I'd be able to run npm run build:rss from the command line to generate my RSS feed.json file - which RSS reader apps would parse to load my posts.

Juan's Node function relies upon each post having a separate, exported meta object that looks similar to this:

export const meta: Meta = {
  published: true,
  publishedAt: "2019-07-22",
  summary: "A quick guide for setting up a new website with GitHub.",
  image: "/assets/create-a-website1.jpg",
  title: "Create a Simple Website with GitHub Pages"
};
              

None of my posts had this object. They did include all of this information as props, but after converting a few, I quickly realized I didn't want to repeat this process 60+ times. It was time to write my first codemod.

Codemods

Codemods are scripts that automate code changes when you need to make the same change to a large number of files. If you're familiar with batch-processing in Photoshop, this is similar, except a codemod is for code.

My codemod needed to take the information I was passing as props and move them to the meta object. This was all new to me, but I was able to construct a codemod that accomplished this. I published the final version as a gist, feel free to leave a comment! It's not perfect, but it got the job done. I plan on writing a separate post detailing out the process of writing this since it was a bit of a side quest.

Once I added a simplified version of the build:rss script, and all my posts had their metadata extracted out into meta objects, I could generate my feed.

Validating the Feed

Zeit Now was indispensable for validating my feed. Now can integrate with GitHub and create a deploy with a unique link for every change committed to my website. I was able to copy the link for each change I made into the official JSON Feed Validator to see what errors I needed to handle. Not only that, I was even able to use these links in real RSS readers to see how my feed would look in its final form before shipping it.

Generating My Blog List

Up until this point, I was maintaining a JSON list of blog posts that Writing and my homepage were importing. That seemed silly at this point. I was already generating an RSS feed file, why not this one? I created a separate Node script to generate this list, as well.

Future Work

My website now has an RSS feed! If you subscribe to it, however, you will notice you still have to click through to see the full post. This is because the feed solely uses the previously mentioned meta objects, which don't contain the full contents of my posts. I'm still thinking about how to solve this. If you have any ideas, dear reader, let me know.

One additional issue is that I have to run the RSS feed and post list scripts before publishing new posts - it isn't automatic. I'm considering using a Git hook to help with this, but I don't consider it a permanent solution.

Is a blog a really a blog if it doesn't have an RSS feed? I don't know, but now mine does! Yay!

Published over 4 years ago