Skip to content
A boilerplate for hosting a webring community
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github add pull request template Apr 13, 2019
_lambda fix bug in index lookup Apr 15, 2019
_tasks draw map through eleventy Apr 15, 2019
src link map nodes to member sites May 16, 2019
.eleventy.js draw map through eleventy Apr 15, 2019
.gitignore
LICENSE add mit lecense Apr 13, 2019
README.md update README Apr 16, 2019
gulpfile.js
netlify.toml add redirect rules Apr 13, 2019
package.json rm script pipeline Apr 15, 2019
yarn.lock rm script pipeline Apr 15, 2019

README.md

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

Features

  • 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

Example

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:

<webring-banner>
    <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>
</webring-banner>
<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 git@github.com:maxboeck/webring.git

# go to the working directory
cd webring

# install dependencies
yarn

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