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.

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.

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


What’s this?
  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…
Show All Webmentions (36)
  1. 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…
  2. 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
  3. Jacky Alciné
    Nice work Max!
  4. Fabi
    A Webring Kit | Max Böck - Frontend Web Developer mxb.dev/blog/webring-k…
  5. Euan Cochrane
    A Webring Kit | Max Böck - Frontend Web Developer mxb.dev/blog/webring-k…
  6. 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…
  7. Dmitri Sotnikov ⚛
    Webrings totally need to make a comeback mxb.dev/blog/webring-k…
  8. THIS IS SOOOOO COOL!!!! 🎉 People are bringing #webrings back! mxb.dev/blog/webring-k…
  9. 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
  10. 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!
  11. Delek Turner
  12. Bill Bennett
    Is anyone out there working on ways to integrate this into a WordPress site? mxb.dev/blog/webring-k…
  13. 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.
  14. Brad
    Bookmark: A Webring Kit | Max BockThis lets you set up, and manage your own webring on Github. I presume you need to be a Github member to do this and know about things like pull requests (which I don’t). Points to creator Max Bock for innovation on figuring this out.I added this to the directory in Webrings.RelatedLiked this post? Follow this blog to get more.
  15. Dan Munz
  16. admin
  17. ❄️ Bug ❄️
    The urge to create a comics webring just gets stronger and stronger. Hmmm. 🤔 mxb.dev/blog/webring-k…
  18. me too. I even built a starter kit once to host your own! mxb.dev/blog/webring-k…
  19. Thom Kearney
    terrific stuff from @mxbck Webrings and the indieweb mxb.dev/blog/webring-k… mxb.dev/blog/the-indie… #GCdigital
  20. Great explainer from @mxbck right here mxb.dev/blog/webring-k…
  21. Donnie D'Amato
  22. Eric Bailey
    It is, based on Max Böck's work. Would love to help out once you're in a good place 🙂 mxb.dev/blog/webring-k…
  23. Dear #IndieWeb tantek.comfed.brid.gy Curious - are #webrings operational right now? Discovered this webring kit by @mxbck@front-end.social and it looks very cool. mxb.dev/blog/webring-k…
  24. Tantek Çelik
    @elizabethtai.com (@liztai@hachyderm.io) there are a bunch of current #webrings examples listed here: https://indieweb.org/webring#ExamplesI’m on the #IndieWebRing: https://indieweb.org/indiewebring Links to previous/next sites in the #webring are in the footer of my tantek.com home page. Elizabeth Tai — Writer, Editor, Finance Blogger
  25. @tantek.com This is soooo cool! I loved webrings! I was part of a few fandom-y ones in the past. It was such fun.Hopefully I can implement it on my wordpress.com blog.
  26. Molly Schlemmer
    @liztai I used that webring kid to build a ring for my writing group. It’s pretty easy to set up, though it hadn’t been updated in a while so my dev husband had to fix a few things for me.