receiving webmentions

"indieauth"

The first step is to make it so that you can prove that you own your site without sharing anything like your Neocities login.

Indieauth has a setup guide with different options.

I think the easiest way to do this is by using an email you can check, but you might consider adding it and removing it from your site when you want it, because you can end up getting spam sent to you if you have an email up on your site.

In the <head> section of your page, add a link to this email like:

<link href="mailto:me@example.com" rel="me">

webmention.io

The second step is to keep track of what webmentions you've been sent. There are lots of different ways to do this but the simplest is webmention.io. You can run it yourself if you want to but it's free to use it here.

Since you've added that email link, it can look at your site, see that email, then send it a link to login.

After you follow the signup process you'll have a username for your site on webmention.io. It's okay if it's not the same as the neocities name. You then add another link in that <head> section, replacing "username" with the username you just got:

<link rel="webmention" href="https://webmention.io/username/webmention" />

This will mean that when someone wants to send you a webmention, they'll send it to webmention.io, and webmention.io will keep track of it for you.

showing your webmentions: webmention.js

There are lots of ways of showing webmentions, but a simple way is webmention.js. It's Javascript that will reach out to webmention.io to get your webmentions and then display them on the page. Up-to-date instructions are here but here's an excerpt so you can see how simple it is:

1. Copy the Javascript file (webmention.min.js) from the static/ directory to somewhere on your website

2. Put a <div id="webmentions"></div> where you want your webmentions to be embedded

3. Put a <script src="/path/to/webmention.min.js" async></script> somewhere on your page 
(typically inside <head> but it doesn't really matter), 
replacing /path/to/ with whatever directory the Javascript file is in

4. You'll probably want to add some CSS rules to your stylesheet, in particular:

#webmentions img { max-height: 1.2em; margin-right: -1ex; }

See the included webmention.css file for an example.
    

sending webmentions

webmention.app

There are lots of ways to make it so that you can send out webmentions automatically when you publish new stuff, but I recommend sending them manually at first to get a feel for it.

Add a link to a page that supports webmentions. Then go to webmention.app and put the url of your page, the one with the link, into the box at the bottom. It will look at your page, see all the links, go to those links, and see which ones support webmentions. It will then let you send webmentions to those sites.