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.

Featured Blog

Lisi is a creative developer from Salzburg, blogging about CSS, JavaScript and Interface Design. She's an expert in the field of Web Animation and a lecturer for multimedia technology.

Read More