Skip to content
A boilerplate for hosting a webring community
HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github add pull request template Apr 13, 2019
.eleventy.js draw map through eleventy Apr 15, 2019
.gitignore add webpack Apr 15, 2019
gulpfile.js rm script pipeline Apr 15, 2019
netlify.toml add redirect rules Apr 13, 2019
package.json rm script pipeline Apr 15, 2019

Webring Starter Kit

A boilerplate to host your own community of sites, also known as a webring.
Inspired by posts from Tatiana Mac and Charlie Owen.

Uses Eleventy and Netlify to build a central directory for member sites. People can link to /prev, /random and /next and be redirected to members of the ring.

✏️ Explanatory Blog Post


  • Admins manage the ring on Github
  • Members are defined in src/data/members.json
  • Let people add their site through pull request or submit via email form
  • Publish a code of conduct
  • Provide an embed code that renders a banner (as a web component)
  • Publish an index of all member RSS feeds
  • show a SVG map of the ring and its members


See the Demo Site generated by this code.

How to host a ring

  1. Fork this repo
  2. Edit src/data/meta.json and fill in your community info
  3. Add an avatar image for your ring to src/assets/images
  4. Remove the demo members in src/data/members.json
  5. Deploy your site to Netlify
  6. After you've set a domain, enter that in meta.json as well.

Deploy to Netlify

Banner Embed

Members can copy a code snippet and embed it into their sites. It renders a web component (with the bare links as a fallback).

The index site will produce an embed code with your ring URL and title:

    <p>Member of <a href="{{ your-url }}">{{ your-title }}</a></p>
    <a href="{{ your-url }}/prev">Previous</a>
    <a href="{{ your-url }}/random">Random</a>
    <a href="{{ your-url }}/next">Next</a>
<script async src="{{ your-url }}/embed.js" charset="utf-8"></script>

The design is up to the ring admins. It could look something like this:

the banner widget

Local Development

To build the site locally, run these commands:

# clone this repository
git clone

# go to the working directory
cd webring

# install dependencies

# start a local build server and the gulp pipeline
yarn start
You can’t perform that action at this time.