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?
Permalink to “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.
Since the term "webring" is trademarked in the US, this needs another cool name. Know any? Please add it to this thread!
Permalink to “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.
Permalink to “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.
<webring-banner>
<p>Member of the <a href="https://webringdemo.netlify.com">An Example Webring</a> webring</p>
<a href="https://webringdemo.netlify.com/prev">Previous</a>
<a href="https://webringdemo.netlify.com/random">Random</a>
<a href="https://webringdemo.netlify.com/next">Next</a>
</webring-banner>
<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 webring
Previous Random NextIf 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!
Permalink to “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!
Read More
- Webrings by Charlie Owen, further elaborating on Tatiana’s tweet.
- Let’s bring Fan Sites and webrings back! by Bryan Robinson, who wrote a first implementation of webring lambda functions.