Fundor 333

How I implement Indieweb, Webmention and H Entry in My Blog Adding Indieweb and Webmention in my blog - #dev #coding #h-entry #hugo #indiweb #twtxt #webmention


How I implement Indieweb, Webmention and H Entry in My Blog

2022-06-16 | #dev, #coding, #h-entry, #hugo, #indiweb, #twtxt, #webmention,
Reading time 4 minutes | Word count 723

Adding Indieweb and Webmention in my blog #dev #coding #h-entry #hugo #indiweb #twtxt #webmention
Adding Indieweb and Webmention in my blog #dev #coding #h-entry #hugo #indiweb #twtxt #webmention

Some history of this blog

When I start blogging, I was using a blog engine called WordPress but I wasn’t ok with the way it was designed. I wanted to be able to write my posts in a way that was easy to read and edit. I want to have a lightweight blog engine so I change to Pelican and I use for sometime. Sometime later, not happy with the tags and categories, I decided to switch to Hugo and I’m happier with it.

But I feet some time I wasn’t happy with Hugo so I search something else. After some time I find an article about Independent website and the tecnology for make a independent website.

In this article I discover:

So I decided to study them for adding in my blog.

Twtxt

First tecnology I read about and I found it strange.

It call himself decentralises, minimalist microblogging service for hackers but it is only a txt file in your domain. Something like this:

2016-02-04T13:30:00+01:00   You can really go crazy here! ┐(゚∀゚)┌
2016-02-03T23:05:00+01:00   @<example <http://example.org/twtxt.txt>> welcome to twtxt!
2016-02-01T11:00:00+01:00   This is just another example.
2015-12-12T12:00:00+01:00   Fiat lux!

You can “tweet” from your domain to the world… It is a good idea but I don’t like it.

I was using it for a time but I prefer to use mastodon or webmention.

Also it isn’t compatible with my stack for the blog (my github pages builder aren’t compatible with twtxt without rewrite all my stack) and I don’t like the way it is implemented: it is a good idea to have a decentralized timeline but I prefere something easy to use anda update with a mobile phone or a tablet unlike twtxt.

So I decided to study the others tecnologies.

Webmention

My favorite tecnology of the article.

Webmention is a simple way to notify any URL when you mention it on your site. From the receiver’s perspective, it’s a way to request notifications when other sites mention it.

Webmention w3c specification

This is a wonderfull way to interact between two websites. You can use it to send a notification to a third party when you mention it on your site or to send a notification to your site when you mention it on a third party site.

You can use to check also interaction with your twitter, mastodon, reddit and github with some tools like Bridgy .

Implementation

Thanks to Jamie’s post ,Jamie’s post and Paul’s post I implemented my own display section for the webmentions.

I wrote and rewrote the code for the display section but now it’s something simple:

for getting the webmentions from Webmention.io I use the js package PlaidWeb/webmention.js with some changes for the rendering.

theme/layouts/partials/webmentions.html

<script src="/webmention.min.js" data-wordcount="100" async="" data-add-urls="https://fundor333.com{{ .RelPermalink}}">
</script>

<div id="webmentions" class="row">
</div>

I suggest to download and edit the webmention.min.js file for adding some customizations for the rendering and add some CSS because the basic theme is minimal.

With this code imported, you can show the webmention feed on your site in real time.

Indiweb

Realy the big thing and the last thing I studied and implement. It is “a people-focused alternative to the corporate web” and it has three core concepts:

  • Your content is yours
  • You are better connected
  • You are in control

I it.

So I rewrote all my templates to implement the Indiweb concept:

  1. Find a domain for my space
  2. Adding an h-card/microformat to my homepage
  3. Adding an h-card/microformat to my posts’ articles
  4. Adding the social media profiles for implementing the IndieAuth identity
  5. Adding RSS feeds and/or other type of feeds

After one or two month of work on my template the work was done and I was happy. And I search for more posts about indiweb and webmentions because I WANT MORE, so I find a lot of articles, posts and tweet about this stack of tecnologies.

One of my favorite posts about indiweb is AM I ON THE INDIEWEB YET? by Miriam Suzanne .

Here are some more articles I find about webmentions:


✨ jbschirtzinger - 2023-02-02 22:15:54

New Technologies Some time ago I implemented Coil on this site. If you have not heard of Coil, and odds are you have not, you will understand why I am not using it on the site now. The idea behind it, however, was good. Monetizing content creators or independent authors is what it is supposed to do, but requires a “buy-in” of five dollars monthly. Since I have had months where five dollars was the difference between making rent or missing it, and because there was not wide adoption of Coil, I …

✨ Christian Engel - 2022-08-01 11:48:39

I actually can't recall anymore, what got me started with this whole IndieWeb thing. According to my browser history, I visited IndieWeb.org on June 15, 2022, so around a month ago. I read up on Miriam Suzanne's hugely popular post Am I on the IndieWeb Yet? and searched Google for "hugo indieweb" in the hopes there was some kind of recipe to get me started on my static page (I'm a developer and after all *let's say it all together* developers are lazy). There wasn't THE ONE answer I was hoping …