I have always felt like I wanted my web content to be on my website. I have also always felt that my website is a pretty lonely and inactive place.

Recently, I connected my website to my social media (twitter for now), by following an article by Sia Karamalegos1.

The stack I connected

I currently write my website (this website) with eleventy, javascript, nunjucks, and markdown. The main framework in this list is eleventy - a static site generator. I currently store the source code on github and deploy the site to netlify. At the time of writing her article, Sia used the same stack.

Sia's article explains how to use webmentions2 and brid.gy3 to retrieve and show twitter conversations, likes, and retweets. Exactly what I wanted to make my content more engaging even if I don't write a new post every day.

If you run on the same stack you can follow Sia's article1 completely. Problems I ran into stemmed exclusively from me learning the tools involved.

How things work in the background

The main tool that ensures my website can know what twitter discussions are going on about it is brid.gy. It regularly scans twitter for my tweets and replies to them and forwards them to webmentions.io. Brid.gy has an extensive documentation: Be sure to read it - you need to post in the right way for content to get picked up.

Keeping up-to date with social media

Since eleventy is a static site generator, new social media content won't be included unless we make sure our website knows about it regularly. That is why the final step in the process is to regularly deploy our website4. Now, every time a deployment happens, new twitter related to my website's content gets added automatically.

personal website (1) webmentions (2) social media (1)

Social

2 Retweets

Dave ♦️ Eleventy (1.0.0-beta.4)

1 Replies

Max Böck Max Böck

one of us one of us one of... source

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


Except where otherwise noted, content on stephanhagemann.com is licensed under CC BY 4.0 by Stephan Hagemann