Sep 24, 2023
I was reading the 11ty Bundle and saw a post on how to create a blogroll with 11ty. This has been something I've been interested in creating and the solution from Ben Myers was great and only had to make a few modifications. Check out the final version of my blogroll to skip ahead.
So what is a blogroll? It is a list of blogs and websites on one page that have links to other blogs and websites. This is is similar to a webring, but could be viewed as a little more personal to the author.
This time I won't go into all the details of how this was configured, since Ben Myers does a great job of this. But what is happening here...
I created a folder in my website called src/blogroll. This is the root of the generated page as well and this is where the data files will go. The process will use an Eleventy data file, json array of rss feed links, and an index page for rendering the blogroll.
With the blogroll.11tydata.json file that contains the rss link data, I made a change to the array to be called "blogroll". I then had to update the src/blogroll/blogroll.11tydata.js file as well to compute the export in the end in the part for async blogData({blogroll}) and the promise await Promise.all(blogroll...).
Using Ben's solution for some reason kept throwing build errors, but calling the data object blogroll kept the section consistent for me.
In the 11ty data file the processes uses a combination of the plugin @11ty/eleventy-fetch and the node package rss-parser. What is nice about the eleventy-fetch plugin is it comes with a built-in caching system of our RSS feeds. This cache is nice, so we can store the data for 1 day, so if we make multiple changes, we are not spamming our fellow blogroll sites, and lengthening our own build times.
The index.njk template was a great outline, but my site uses a <div> system for the post/card and not the <article> tag.
This has solution makes use of Zach's IndieWeb Avatar service which I thought was pretty neat! You provide the API an encodedURIComponent and it finds the sites favicon for us, and adds it to the blogroll members' card.
const encodedBlogUrl = encodeURIComponent(blog.url);
const src = `https://v1.indieweb-avatar.11ty.dev/${encodedBlogUrl}/`;You can see the files specifically used for the blogroll creation in this git commit fc18ed5. Check out my blogroll to see some of the sites that I follow and read too. I'd like to create one for podcasts as well.
If you'd like to be addded let me know! There are a few more to add for sure.
Reply via email
If there are webmentions, they will show below.