To integrate this website into the IndieWeb took me longer than I would have liked. The resources were fragmented and confusing. Should I do X or Y? Having too many options to choose from can lead to paralysis. We don't want that, do we?

We want something simple, something that allows as many people as possible to get on board. An omakase 🍱.

Here's mine. If you already have your own published blog, you should start and finish everything within an hour at most.

Ready? Let's go!

Microformats

Let's start by making our website readable by third parties by implementing microformats. First add a link to your social profiles in your layout <head>:

<head>
  <link rel="me" href="https://mastodon.social/@steffoz" />
  <link rel="me" href="https://github.com/stefanoverna" />
</head>

Then add h-entry metadata to your blog posts, specifying the author (yourself) through an h-card:

<article class="h-entry">
  <!-- Title -->
  <h1 class="p-name">{post.title}</h1>
  <!-- Published at -->
  <time class="dt-published" datetime={post.publishedAt.toISOString()}>
    <!-- Format the date as you wish: the `datetime` attribute is what matters -->
    {post.publishedAt.toLocaleDateString('en-us')}
  </time>
  <!-- The h-card for the author -->
  <span class="p-author h-card">
    <a class="p-name u-url" href="https://squeaki.sh">Stefano Verna</a>
    <img class="u-photo" src="/photo.png" alt="Photo" />
  </span>
  <!-- The main content -->
  <div class="e-content">{post.content}</div>
  <!-- Permalink -->
  <a class="u-url" href="/p/{post.slug}">Read more</a>
  <!-- Provide the list of URLs where you shared/syndacated this post -->
  <a href={post.mastodonUrl} class="u-syndication">View it in Mastodon</a>
  <a href={post.blueSkyUrl} class="u-syndication">View it in BlueSky</a>
</article>

All the elements must be present, with these specific CSS classes. If you prefer not to display some of this information to your readers you can hide them with a display: hidden, not a problem, but they need to be there. The specific HTML tags are not important, what matters are the CSS classes.

Your paginated list of blog posts should be wrapped in h-feed, and look something like this:

<div class="h-feed">
  <span class="p-name" style="display: none">squeaki.sh</span>
  
  {#each posts as post}
    <div class="h-entry">
      <a href="/p/{post.slug}" class="u-url p-name">{post.title}</a>
    </div>
  {/each}

  <a href="/next" rel="next">Next</a> — <a href="/previous" rel="prev">Previous</a>
  <a class="p-author h-card" href="/">Stefano Verna</a>
</div>

Inside the h-entry of each post summary feel free to add any other element we already covered for the detail page of your posts, but that's the bare minimum.

You can check if everything is working so far by publishing your website and testing it with these two services:

  • https://monocle.p3k.io/preview — Insert your homepage URL (the one with the list of blog posts)

  • https://indiewebify.me — Insert your homepage in the "Set up Web Sign In" and "Check your homepage h-card" sections, then insert a blog post detail page in the "Check your posts (notes, articles, etc.) are marked up with h-entry" section.

RSS Feed

Feeds are a technology that's been around for 20 years, so it's pretty much a given that the platform or framework you're using to build your site already has a ready-to-use solution.

I can't delve too much into specifics because it really depends on what you're working with... but once you've got your feed, remember to incorporate it within the <head> tag of your layout:

<head>
  <link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS Feed for squeaki.sh" />
</head>

If you can't generate it, no worries, it's not crucial. Through microformats, your site is already easily discoverable.

Webmentions

Webmentions is a two-way thing. You need to notify other people when you mention their work in your posts, and you can receive other people's mentions when they do the same.

Sending webmentions

I recommend you using the CLI tool @remy/webmention. First install the package with:

npm i --save-dev @remy/webmention

Then append this command at the end of your website's build script, ensuring it points to the local path where the RSS feed has been produced.

npx webmention ./build/rss.xml --send

No RSS feed? No problem. You can use this command instead (though it might take a bit longer):

find ./build -type f -name "*.html" -exec webmention {} --send \;

Receiving webmentions

The webmention.io service can do everything for you! Insert your website URL, proceed with the login, then go to Settings and copy-paste the meta tags you find there in your website <head>:

<head>
  <link rel="webmention" href="https://webmention.io/squeaki.sh/webmention" />
  <link rel="pingback" href="https://webmention.io/squeaki.sh/xmlrpc" />
</head>

Displaying webmentions

You can get a list of received webmentions using one of the many API calls/formats that webmention.io offers, and then render them how you prefer in your pages.

If you're in a rush, just add Seia to your post detail page, and it will automatically fetch and present the webmentions for the current page:

<s-e-i-a></s-e-i-a>
<script type="module" src="https://esm.run/seia" async></script>

Backfeed

Wouldn't you love it if anyone could comment or like your posts directly from Mastodon? And those comments, links, and boosts would also be displayed on your site? Brid.gy allows you to do exactly that.

Here's how it works: you craft your piece, publish it, then head over to your Mastodon profile and write a post that links back to the original article. Brid.gy will take any reaction on Mastodon, and convert it into a webmention on your site.

Seems complex right? It's not. Inside this page enter your Mastodon server, and proceed with the login. That's literally it.