It is cool to publish your thoughts on your own blog under your only domain and not only on big social media platforms, because that way you keep control over your content. But what makes Facebook, Twitter and others “social” is the interaction between the people. Likes, Retweets, Mentions, Replies are the fuel which drives them. But most of the blogging solutions offers only rudimentary interactions, in form of article comments. The comment hurdle is high because interacting on someone else’s site is different from interacting on what is supposed to be your own, such as your Twitter or Facebook feed.
The project IndieWeb and their approach of Webmentions, has the goal to fill this gap. As a W3C recommendation, it defines standards how the social interaction of independent blogging solutions can be technically implemented without the need of manual intervention. Let software do the job…
In this article I will only briefly go into the basics and then show an implementation solution for the SSG Hexo.
Nothing describes the flow of Webmentions better than this:
--- Drew McLellan
- Frankie posts a blog entry.
- Alex has thoughts in response, so also posts a blog entry linking to Frankie’s.
- Alex’s publishing software finds the link and fetches Frankie’s post, finding the URL of Frankie’s Webmention endpoint in the document.
- Alex’s software sends a notification to the endpoint.
- Frankie’s software then fetches Alex’s post to verify that it really does link back, and then chooses how to display the reaction alongside Frankie’s post.
Basically Webmentions allow notifications between web addresses, therefore every post, which is part of the interaction, has to have a unique permalink.
A blog software that wants to support webmentions must cover 4 main points:
- The HTML has to tell others who you are
- The HTML has to give dedicated informations about your posts
- Sending a message to another blog, in case you mentioned one of its posts
- Reveiving messages from other blogs, in case they mentioned one of your posts
Point 4 is probably the most interesting for all of us, because it pats our own ego on the back, since we usually don’t write for ourselves, but for others, and reactions to it, show us that it wasn’t pointless.
As you want to interact with other blogs participating in the IndieWeb with your posts, they have to know something about you and your articles in a machine-readable form.
HTML is machine-readable per se, but you have to tell others what to look for by adding defined classes to the tags which holds the information, in order to enable them to get specific information about you, like your name, your mail-address or links to other profiles f.e. Github, Twitter and so on.
It is necessary to have this information not only in an ABOUT page, but also on each post page. You can achieve this either by having an ABOUT block like here on kiko.io or providing the information in hidden HTML tags elsewhere in your HTML.
It does not matter which tags you use, you only have to add the defined class to the tag of a particular information in your Hexo EJS file. The information will be extracted out of the tag’s inner text.
The most used classes for personal blogs as follows:
|h-card||Wrapper for all personal information.
All other classes below has to be used on child tags
|u-url||URL representing the person|
|p-locality||City or Town|
|p-region||State or province|
Please keep in mind not to give too much information about you to the public. It could get unpleasant…
With this extension of your blog HTML, you are able to sign in using your domain at sites which supports Web Sign-In over the concept of RelMeAuth, for example those who use IndieAuth.net - OAuth for the open web. You only have to make sure, that the endpoints of your profile links have backlinks to your blog with a
rel="me“. Unfortunately, not many services offer the definition of such a backlink. Github, for example, is an exception. You can give it a try at IndieAuth.com.
Tagging articles with meta information for the IndieWeb is similarly simple, by adding following classes in your article.ejs file:
|h-entry||Wrapper for all article related information|
In case you work with the default Hexo theme ‘landscape’, I advise you to split your
article.ejs in two files, because it is used for the article itself and for the excerpts on the start page and archive pages also. I have made an
excerpt.ejs with all the information needed for listing the posts and cut back my
article.ejs to the bare minimum, but with the IndieWeb related classes above (or in the linked partials if necessary), because only the article page itself should have these informations, respectively an
h-entry class, to indicate that there are IndieWeb data!
The Interaction with other blogs takes place through linking to those external sources in the content of your article.
Lets say you want to write about a specific topic and to mention the work of another developer, then you just place a link to his post in your Markdown, as you have been doing all along:
# My Fancy Post
It will be transformed while generating into something like that:
In the terms of the IndieWeb concept, your post will a be an article, which mentions other posts, as the old-fashioned pingbacks do.
- u-in-reply-to … to indicate that your post is a reply to a post as part of a conversation
- u-like-of … to indicate that your post is a like
- u-repost-of … to indicate that your post is a repost (100% re-publication)
- u-bookmark-of … to indicate that your post is a bookmark
Every response type can have additional information about your post and the syndication of it.
Currently, I would not recommend writing responses as a normal post in Hexo, as it is based on structured text, that best describes the IndieWeb concept of an ARTICLE.
As this post is part of a new series called IndieWeb, I will post a solution for responses is the near future.
To check all your changes, you can use IndieWebify.Me (Level 1 & 2):
This was supposed to be just one post, but it got longer and longer and so I split it into 3 parts. Don’t miss Part 2: Hexo and the IndieWeb (Sending Webmentions) …
There are a lot of posts out there which explains the basic concepts of the IndieWeb and Webmentions in particular and you will stumble upon some terms, which has to be explained:
--- indieweb.org (Personal Domain)
… is a domain name that you personally own, control, and use to represent yourself on the internet. Getting a personal domain is the first step towards getting on the indieweb, and is therefore a requirement for IndieMark Level 1
--- microformats.org (Wiki)
… are small patterns of HTML to represent commonly published things like people, events, blog posts, reviews and tags in web pages. They are the quickest & simplest way to provide an API to the information on your website.
--- indieweb.org (POSSE)
… is an abbreviation for Publish (on your) Own Site, Syndicate Elsewhere, the practice of posting content on your own site first, then publishing copies or sharing links to third parties (like social media silos) with original post links to provide viewers a path to directly interacting with your content.
--- indieweb.org (Backfeed)
… is the process of syndicating interactions on your POSSE copies back (AKA reverse syndicating) to your original posts.
--- indieweb.org (Web sign-in)
… is signing in to websites using your personal web address (without having to use your e-mail address). Web sign-in supersedes OpenID.
--- microformats.org (RelMeAuth)
… is a proposed open standard for using rel=”me” links to profiles on oauth supporting services to authenticate via either those profiles or your own site. RelMeAuth is the technology behind Web sign-in.
--- indieweb.org (IndieAuth)
… is a federated login protocol for Web sign-in, enabling users to use their own domain to sign in to other sites and services.
- A List Apart: Webmentions: Enabling Better Communication on the Internet
- indieweb.org: Getting Started
- indieweb.org: How to set up web sign-in on your own domain
- indieweb.org: IndieWeb Examples
- Bryce Wray: Webmentions in three SSGs: Part 1
- Keith J. Grant: Adding Webmention Support to a Static Site
- Alessio Caiazza: Articles tagged ´indieweb´
- * (Forum): Anyone for Webmention?