After Tatiana Mac proposed to bring webrings back, I hacked something new together over the weekend: A starter kit for hosting your own webring!
# What’s a Webring?
It’s a blast from the past: In the 90s, sites about a common topic could join together in a central index. To be a member, you had to embed a little widget on your page that contained a “forward”, a “backward”, and a “random” button. These buttons would then link to the next or previous site in the ring.
UPDATE: Since the term “webring” is trademarked in the US, this needs another cool name. Know any? Please add it to this thread!
# A curated community
To keep the ring from getting spammed or flooded with trolls, it has to be curated. The project does that by hosting the member index on Github, in a simple JSON file. Admins can accept or decline pull requests from people who want to join the ring, after reviewing their sites. There’s also a Code of Conduct that every member has to follow in order to be part of the ring.
For people who are not technical enough to submit a pull request, there’s also a simple signup form (using Netlify forms) to send the admin your site’s info via email and let them add you.
# Free and Open
I wanted to make this as easy as possible, so people can start linking their personal sites together straight away. So I made the boilerplate using Eleventy. After forking the codebase, the proud webring admin only needs to set a title and a bit of meta data.
Eleventy then generates a site like this that lists all the members, shows the Code of Conduct and the instructions on how to join.
You can deploy it to Netlify, a free static site host, with just a few clicks. Netlify also lets you either use one of their subdomains, or a custom one you own.
# A central widget
Members of the ring can copy a code snippet to embed a banner on their site. I borrowed a bit from Twitters embed widget here: The basic markup is just a link to the index, and the prev/random/next links. But if you also include the script tag, it will replace that with a custom web component, designed by the ring admin.
<p>Member of the <a href="https://webringdemo.netlify.com">An Example Webring</a> webring</p>
<script async src="https://webringdemo.netlify.com/embed.js" charset="utf-8"></script>
This will automatically show the title, member count, maybe a logo. And it can be edited from a central location. It might look something like this:
Member of the An Example Webring webringPrevious Random Next
# RSS Feeds
If a member publishes an RSS feed on their site, they can add that to the ring as well: the index page will generate an OPML file, so people can subscribe to all members at once.
# Host your own Ring!
If you want to start your own webring, go ahead! Fork the repository on Github and follow the instructions there - It’s free and doesn’t take long!