Mastodon has a really neat way of implementing verification, using the rel=me microformat.
You can edit your Mastodon profile and add up to four links to it. Mine looks like this at the moment:
The verification checkmark can be had by embedding a link BACK to your Mastodon profile on another site.
My https://simonwillison.net/ and https://til.simonwillison.net/ page headers include the following HTML:
<link href="https://fedi.simonwillison.net/@simon" rel="me">
Getting a verified link to GitHub is a tiny bit trickier. GitHub does support
rel=me - but only for one of the link fields in your profile:
The only field here that will have
rel=me applied to it when GitHub serves the final page is that link field, which I have set to my personal blog at https://simonwillison.net/
So the easiest way to verify your GitHub profile is to point the link to your Mastodon page, which in my case is https://fedi.simonwillison.net/@simon
But... I didn't want to sacrifice that field! I want to link to my blog.
The first thing I tried was editing my profile to point to Mastodon, then editing my Mastodon profile to trigger a verification job, then editing my GitHub profile back again.
This looked like it worked, at least for my own personal Mastodon server. But it turns out other people visiting my profile wouldn't see the verified checkmark, because each Mastodon server runs its own verification checks - and their server was checking after I had reverted the change I had made.
Angus Hollands suggested a neat fix: use a GitHub Pages domain instead.
https://your-username.github.io/ as a URL that you can create your own static GitHub Pages site on.
The way you do this is to create a repository called
github.com/your-username/your-username.github.io - any HTML you put in that repo will be served from your personal domain.
Angus pointed out that since GitHub restrict who can publish there, proving ownership of
simonw.github.io is equivalent to proving ownership of
So I did that instead! I set up https://simonw.github.io/ to be a page that served the
rel=me link AND redirected to my https://github.com/simonw profile.
Here's the HTML I used to make that happen:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Redirecting to github.com/simonw/</title> <meta http-equiv="refresh" content="0; URL=https://github.com/simonw"> <link href="https://github.com/simonw" rel="me"> <link href="https://simonwillison.net/" rel="me"> <link href="https://fedi.simonwillison.net/@simon" rel="me"> </head> <body style="margin: 0; padding: 0"> <a href="https://github.com/simonw" style=" display: block; height: 100vh; width: 100vw; margin: 0; padding: 0; color: white; " > github.com/simonw </a> </body> </html>
The key pieces here are that
<link href="https://fedi.simonwillison.net/@simon" rel="me"> element to verify my Mastodon profile, and the
<meta http-equiv="refresh" content="0; URL=https://github.com/simonw"> to implement the redirect.
GitHub Pages doesn't allow you to use real server-side redirects, so this
<meta> tag is the next best thing.
It's completely unneccessary, but I decided to make the page itself a huge clickable link element which would redirect to the right place, using
height: 100vh and
width: 100vw to fill the page and setting the text to be white on a white background to keep it invisible for the split second before the redirect happens.
Created 2022-11-16T13:37:15-08:00, updated 2022-11-22T10:38:41-08:00 · History · Edit