Architecting data in Eleventy
Setting and using data in the static site generator Eleventy
Webmentions + Eleventy Talk
Slides and resources from my talks at JamStack Toronto and Magnolia JS.
, updated by 
Sia Karamalegos
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
Show conditional Twitter intents with Eleventy
Encourage users to retweet or share a post based on whether a Tweet already exists for your blog post.
An In-Depth Tutorial of Webmentions + Eleventy
Add Webmentions to your Eleventy static site with this step-by-step tutorial.
Webmentions
If you liked this article and think others should read it, please share it.
❤️ 37
🔁 3
💬 9
JamstackTORONTO
thank you so much for joining us! that was an awesome talk Sia! source
Sia Karamalegos
Thanks so much for having me! source
André Jaenisch
Did you used the chance to update the link at the end, too? 😅 source
Sia Karamalegos
Lol no. But the link on my site is correct at least source
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
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
King Freret IX approves of slide 1. (Nice talk! I'm inspired to finally bring back "replies" to my site.) source
Sia Karamalegos
Thanks! Laissez les bons temps rouler! source
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: