Setting up your Indieweb blog

So by now you might have heard about the Indieweb (or maybe you haven't). In this blogpost I will describe how to set up your website to be part of the Indieweb community, a movement of personal websites that aims to reclaim one's content from big corporate third party silos. This is a written-form version of my OSCAL 2023 presentation, which i mentioned in my earlier blogpost.

What is the Indieweb?

It's 2023 and unless you've been living in a cage, a platonic one, where you're fed shadows and reflections (ads and promoted posts), unaware that someone (big corporate algorithm) is setting them up from behind you decieving you to believe that they are authentic, you should have heard about the perils of big social media. We get the benefit of being easily connected to our friends and relatives, stay up to date with news and amuse ourselves with cat pictures and memes, all this for free, while in fact we are surveilled and sorted into target groups, all our data and interactions tracked and analyzed, feeds optimized to keep us locked in their walled gardens and exposed to advertisers, and constanly bombarded with clickbat and toxic content trying to squeeze more and more engagement.

There are alternatives to this predicament, the most prominent one being the Fediverse, the decentralized network of social media and users connected via ActivityPub, which despite the relatively small adaption is still growing by the day and proving to be a living example that a different social media is possible. The Indieweb movement tries to push this decentralising tendency even further. We can define it as an ecosystem of personal websites, connected by some simple protocols, based on the principles of owning your data, owning your domain and using it as your primary identity. An Indieweb page is the primary place where you post your content, and then (optionally) syndicate it elsewhere, while staying connected to other pages by sending and receiving webmentions, and using other services that facilitate communication around the web. There are a few steps we can take to become part of the ecosystem, and we'll go through some of them next.

Owning your domain

First rule of the Indieweb: you have to own your domain. This will be your primary identity online. You will not identify as 'twitter.com/@username' (RIP) or via some other account on a corporate owned social media, but you'll present yourself via your domain name, where you could add links to your other accounts to let people know where they can find you.

Create a website

Now that you own your domain, you need to put some content in it. It can be a simple html page with some basic info about you and a few links to your other profiles, or a full-fledged blog, rich with information, content you create and share, custom design, and all the other perks that come with having a website that you control. You may use Wordpress, Known, micro.blog or (my fav) create a static website which you can host for free using gitlab/github/codeberg pages, or any other hosting service like neocities or your own server.

Setup Web Sign-in

Now that we are serving our website from our own domain, we may want to start using our identity while interacting on the web. And what better use case of using our identity than during the process of login. Web sign-in describes a way to sign in to other websites using you personal web address. It's similar to those "Sign in with Facebook" or "Sign in with Google" buttons, only that you will not identify as someone on Facebook, or someone of Google, but as your personal domain name. We can set up our website to be an IndieAuth provider, or we can take advantage of external authorization endpoints, like Indielogin. Check out their guide on how to setup an authentication method. We will need this for the later steps.

Use microformats

Microformats are a set of HTML classes and attributes for marking up notes, people, events, blogposts etc. They provide a standard API for adding meaning to parts of our webpage, thus making our markup interpretable by machines. Some commons microformats are:

h-card

H-cards identify a person, author or an organization. Commonly used in the homepage (it can be hidden, you just need to put the markup there) to describe who you are, or in individual blogposts to mark up the author, they look like the example below (you don't need to add all the fields, just put as many as you see fit)

<div class="h-card">
  <span class="p-name">Sally Ride</span>
  <span class="p-honorific-prefix">Dr.</span>
  <span class="p-honorific-suffix">Ph.D.</span>,
  <span class="p-nickname">sallykride</span> (IRC)
  <div class="p-org">Sally Ride Science</div>
  <img class="u-photo" src="http://example.com/sk.jpg" />
  <a class="u-url" href="http://sally.example.com">w</a>,
  <a class="u-email" href="mailto:sally@example.com">e</a>
  <span class="p-locality">Los Angeles</span>,
  <abbr class="p-region" title="California">CA</abbr>,
  <div class="p-country-name">U.S.A</div>
  <div class="p-note">First American woman in space.</div>
</div>

h-entry

An h-entry is used for blogposts or other content intended to be syndicated. It defines properties used to describe information like the title of the post, publication date, author, summary, content, etc.

<article class="h-entry">
  <h1 class="p-name">Microformats are amazing</h1>
  <p>
    Published by
    <a class="p-author h-card" href="http://example.com">W. Developer</a> on
    <time class="dt-published" datetime="2013-06-13 12:00:00"
      >13<sup>th</sup> June 2013</time
    >
  </p>

  <p class="p-summary">In which I extoll the virtues of using microformats.</p>

  <div class="e-content">
    <p>Blah blah blah</p>
  </div>
</article>

h-feed

If you want to render a list of h-entries, you will want to wrap them up in an h-feed. It may contain a p-name, p-author, u-url to describe the feed, and nested h-entry objects representing the items of the feed.

<div class="h-feed">
  <h1 class="p-name site-title">The HTML Blog</h1>
  <p class="p-summary site-description">
    Stories of elements of their attributes.
  </p>

  <article class="h-entry">...</article>

  <article class="h-entry">...</article>
</div>

in-reply-to

Our h-entries may be replies to another blogpost we found on the web. To indicate this via microformats, we use the in-reply-to format, place it inside the h-entry, and link to the url that the entry is replying to.

<div class="h-entry">
  <a href="http://example.com/note-123" class="u-in-reply-to">
    Some note with a point
  </a>

  <div class="p-name e-content">
    Good point! Now what is the next thing we should do?
  </div>
</div>

Now what was that? A reply to somethign on the web but that lives in my own page? How would they even find out about it? With the help of webmentions, of course.

Webmentions

Webmention is an open standard protocol which provides a way to notify a URL when a webpage links to them. It may remind us of pingbacks, but it is simpler on a protocol level, while providing more nuanced reactions than just linking to the other page: the reactions can be likes, reposts, replies, quotes, RSVPs etc. It enables a sort of federated comments system, where you can post comments to another page while hosting the content of the comment in your own page.

A basic description of how it works is as follows:

1. I write a blogpost
2. You write a reply to my blogpost and markit up with microformat, by adding class="u-in-reply-to"
3. You post the webmention to my site (manually or automatically)
4. I receive a webmention, which i can render in the comments section of my blog

To enable webmentions for your site, you can implement your own webmention endpoint, or you can make use of webmention.io, a service that allows any site to easily receive webmentions. For this you need to add a link in the of your site:

<link rel="webmention" href="https://webmention.io/your-domain/webmention" />

This brings all the previously explained concepts together. We need a website, served under our domain, with web-signin enabled to sing in to webmention.io with our address, and microformats to mark up our content as replies, mentions, likes, reposts or any other kind of supported response type.

Webmentions can be send via a simple post request:

curl -si https://webmention.io/your-domain.name/webmention \
  -d source=https://your-domain.name/page_with_reply.html \
  -d target=https://page_being_replied.com/blog.html

The receiving blog might even make it easier to post webmentions to them by including a simple form at the end of their blogposts:

<form action="https://webmention.io/your-domain.name/webmention" method="post">
  <input type="url" name="source" />

  <input
    type="hidden"
    name="target"
    value="https://page_being_replied.com/blog.html"
  />

  <input type="submit" />
</form>

You can also automate posting webmentions by setting up your website to do that, or use a thirdparty service like webmention.app.

Bridgy

Another way to populate your webmention inbox is to use a service like Bridgy. Bridgy is a service that offers backfeed, POSSE and webmention support. In non-technical language, it allows you to take social media reactions to your post and turn them into webmentions for you site. So you can post your blogpost in your mastodon profile, and every fav, boost or reply that you receive there will appear as a like, repost or reply in the comments section of your blog. You can also set up Brigy to cross post from your site to social networks, a practice knows as POSSE (Publish in your Own Site, Syndicate Elsewhere).

All this may seem overwhelming when you read it first, but you don't have to do it all at once. Adoption can be slow, at your own pace, and it's always more fun when you do it with friends. Soon we're going to host a workshop at our local hackerspace where we'll demonstrate in details the steps outlined above and help members of the local community to indiewebify their websites (or at leasts start building one). Interested? Stay tuned!