How to add your blog to the IndieWeb Webring
In my blog discovery efforts I have often noticed the IndieWeb Webring and been curious on how it worked and how to join. It is made by Marty McGuire as a building block for the IndieWeb initiative. The authentication scheme needed to sign in seemed a little complicated as I read about the IndieAuth protocol which makes it possible to login using your own website as a form of authentication, and it looked like too much work just to join a webring.
Turns out it isn’t that complicated, and really just requires a few changes to your HTML.
IndieAuth.com makes it pretty easy to get started if you don’t want to work with something self-hosted. A few lines needs to be added in the <head> section of your page, specifying who you are and what IndieAuth endpoints should be used. This can be done in the Bear Blog dashboard under "Header and footer directives” in Settings:
<link rel="me" href="mailto:you@example.com">
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
<link rel="token_endpoint" href="https://tokens.indieauth.com/token">
In this case I have used e-mail as my identifier, but it also possible to use Github or PGP keys.
On the IndieWeb Webring simply enter your domain and complete the login process through IndieAuth, which in this case will send you a 2FA-code to your e-mail.
No more is needed to be part of this webring. To take it one step further, you can get a profile by adding some specific classes to some HTML elements with the h-card specification.
I took the easy way, as I didn’t want to change my home page too much, so I just added this hidden div to the Home page:
<div class="h-card" hidden="">
<a href="https://example.org" class="u-uid u-url p-name">Your Name</a>
<a class="u-photo" href="https://example.org/me.jpg">(Photo)</a>
<div class="p-note">Some text about your blog.</div>
</div>
Verify that on your dashboard on IndieWeb Webring and your site should now be part of the directory.