A Webring Kit

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.

a card showing the webring description and memberlist
You can build webrings for anything

# 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.

<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 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!

# Read More

Webmentions

  1. Matthias Ott
    Oh, @mxbck! 👏😍 A free and open webring starter kit using @eleven_ty and @Netlify: mxb.dev/blog/webring-k… #openweb #LetsFixThis /cc @sonniesedge @adactio @zeldman
  2. Chris Heilmann
  3. Adactio Links
    A Webring Kit | Max Böck - Frontend Web Developer mxb.dev/blog/webring-k…
  4. A List Apart
    ☞ Speaking of #IndieWeb and #LetsFixThis, here’s a starter kit for hosting your own 1990s-style web ring, by Max Böck. Hat tip: @m_ott. mxb.dev/blog/webring-k… #openweb @sonniesedge @adactio @mxbck @zeldman
  5. zeldman
    A starter kit for hosting your own 1990s-style web ring, by @mxbck. #LetsFixThis #OpenWeb #IndieWeb Hat tip: @m_ott mxb.dev/blog/webring-k…
  6. Aubrey
    Back in the 90s, I hosted a webring called ‘fuck elitism’ (I was clearly oh so deep). Looks like webrings are starting to come back! I’ll definitely be joining this one. mxb.dev/blog/webring-k…
  7. Wil Floyd
    Top story: A Webring Kit | Max Böck - Frontend Web Developer mxb.dev/blog/webring-k…, see more tweetedtimes.com/v/17740?s=tnp
  8. Jacky Alciné
    Nice work Max!
  9. Fabi
    A Webring Kit | Max Böck - Frontend Web Developer mxb.dev/blog/webring-k…
  10. Euan Cochrane
    A Webring Kit | Max Böck - Frontend Web Developer mxb.dev/blog/webring-k…
  11. Scott Andrew
    As much as I don't want to participate in a Web 1.0 Reenactment Society, I'm charmed by this kit for making...webrings! mxb.dev/blog/webring-k…
  12. Dmitri Sotnikov ⚛
    Webrings totally need to make a comeback mxb.dev/blog/webring-k…
  13. THIS IS SOOOOO COOL!!!! 🎉 People are bringing #webrings back! mxb.dev/blog/webring-k…
  14. Jürgen Genser
    I actually can't remember the concept of webrings from the early days of the web but this sounds interesting. also, look at this nice project from @mxbck: mxb.dev/blog/webring-k… cc @heinz
  15. Case Duckworth
    Hey does anybody have/want to be in a #writing #webring with me? I've been reading mxb.dev/blog/webring-k… and I think, I write a lot of creative stuff, let's be in a webring!
  16. Delek Turner
  17. Bill Bennett
    Is anyone out there working on ways to integrate this into a WordPress site? mxb.dev/blog/webring-k…
  18. Max Böck
    not that I know of... but maybe you can just copy-paste the embed snippet into the WP editor (when set to HTML). otherwise a shortcode plugin should be easy to do.