Webmentions + Eleventy Talk

Slides and resources from my talks at JamStack Toronto and Magnolia JS.

two heart-shaped balloons
Photo background by Akshar Dave on Unsplash

Webmentions are an exciting standard which help enable the IndieWeb. We can own our own content, hosted on our own domains, without sacrificing social connection and replies with other people!

In this talk, I discuss what webmentions are and how to implement them. In the longer version for Magnolia.js, I also give a quick demo of Eleventy. The code is based on an Eleventy site, but the concepts should be applicable to any site.

Jamstack Toronto (shorter) #

Magnolia JS (includes short Eleventy tutorial) #

Slides #

The latest slides can be accessed at projects.sia.codes/webmentions-11ty-25min/. To advance the slides, use n for next and p for previous. The right arrow jumps to the next section (and left for previous section). Up and down to advance through slides within a section.

Resources #

If you're new to Eleventy, you can start with the mini-tutorial to get a flavor of it.

Follow my In-Depth Tutorial of Webmentions + Eleventy for a step-by-step guide to get started. It includes links to many great resources and prior art.

The slides are built as a live website, so all resource links mentioned are directly clickable.

Are you here for possums and image manipulation? Links to my source images are on the last slide. You can duotone your own varmint photos using Duotone by ShapeFactory.

You might also like


If you liked this article and think others should read it, please share it.

❤️ 37 🔁 3 💬 9

thank you so much for joining us! that was an awesome talk Sia! source

Sia Karamalegos Sia Karamalegos

Thanks so much for having me! source

André Jaenisch André Jaenisch

Did you used the chance to update the link at the end, too? 😅 source

Sia Karamalegos Sia Karamalegos

Lol no. But the link on my site is correct at least source

André Jaenisch André Jaenisch

I linked my GitHub with @schnarfed's bridgy. But haven't used it myself, so far. I can see other instances with „originally posted at“ or … reacjis was the term on the IndieWeb wiki, I think. source

André Jaenisch André Jaenisch

My first step is to PESOS (Publish Everywhere, Syndicate to Own Site), before I'll revert the process. Will be fun with Twitter! Perhaps I'll build a small app on my own site to provide another data source. Then use one of the MicroPub clients, @ChrisAldrich mentions so often. source

Hans Gerwitz Hans Gerwitz

King Freret IX approves of slide 1. (Nice talk! I'm inspired to finally bring back "replies" to my site.) source

Sia Karamalegos Sia Karamalegos

Thanks! Laissez les bons temps rouler! source

Chris Aldrich Chris Aldrich

First there’s the details of her post in particular that are cool, but I like how Sia is leveraging Twitter as part of the commenting system on her blog using Webmention and Brid.gy. This way for people who aren’t replying or interacting with their own websites (yet!), they can still take part in th... source

These are webmentions via the IndieWeb and webmention.io. Mention this post from your site:

← Home