jekyll-webmentions-static
jekyll-webmentions-static — likes, reposts, and replies rendered as static HTML at build time.
Open Source Plugin

jekyll-webmentions-static

Fetch and render Webmention.io mentions as static HTML at Jekyll build time — no JavaScript, no runtime API calls.

jekyll-webmentions-static fetches your Webmention.io mentions at Jekyll build time and renders them as plain static HTML. No JavaScript, no client-side API calls, no runtime dependencies — just static output that works on GitHub Pages or any static host.

Webmentions are the IndieWeb’s response system. When someone likes, reposts, or replies to your content from a webmention-enabled platform (Mastodon, Micro.blog, and others via Bridgy), those interactions can appear on your site as first-class content.

How It Works

  1. At build time, the plugin fetches all mentions for your domain from the Webmention.io API
  2. Mentions are cached to _webmentions_cache.json to avoid redundant fetches
  3. Each post gets its mentions injected into page.webmentions
  4. The {% webmentions %} Liquid tag renders them as styled HTML

Requirements

  • A Webmention.io account (free)
  • A <link rel="me"> pointing to your GitHub profile in your site’s <head> for authentication
  • Your Webmention.io API token

Installation

Add to your Gemfile:

gem "jekyll-webmentions-static"

Add to plugins: in _config.yml:

plugins:
  - jekyll-webmentions-static

Configuration

webmentions:
  token: YOUR_TOKEN      # or use WEBMENTION_TOKEN env var (preferred for CI)
  cache: true            # cache fetched mentions (default: true)
  cache_ttl: 3600        # seconds before re-fetching (default: 3600)

Add _webmentions_cache.json to your .gitignore.

For GitHub Actions, set WEBMENTION_TOKEN as a repository secret instead of putting the token in _config.yml.

Keep mentions fresh with a scheduled rebuild. Webmentions only update when your site is rebuilt — if you don’t publish often, add a schedule trigger to your Pages workflow so they stay current:

on:
  push:
    branches: [main]
  schedule:
    - cron: '0 */6 * * *'   # rebuild every 6 hours

Adjust the interval to taste. Daily (0 0 * * *) is reasonable for most sites.

Template Usage

Add the tag to your post layout:

{% webmentions %}

Or access the raw data directly via page.webmentions for custom rendering:

{% assign likes = page.webmentions | where: "type", "like-of" %}
<p>{{ likes.size }} likes</p>

Output Structure

The {% webmentions %} tag renders:

  • Reaction counts — likes (♥), reposts (⟳), and bookmarks in pill badges with tooltip text on hover
  • Replies — each reply shown as a card with author avatar, name linked to their profile, date, and reply text

Example webmentions output showing heart and repost count pills, a Replies heading, and a reply card with avatar, author name, date, and reply text

Styling

The plugin emits unstyled semantic HTML. All elements use BEM class names for easy targeting:

/* Outer section */
.webmentions { }

/* Reaction count pills */
.webmentions__counts { }
.webmentions__likes { }
.webmentions__reposts { }
.webmentions__bookmarks { }

/* Replies section */
.webmentions__replies { }
.webmentions__replies-heading { }

/* Individual reply card */
.webmention__reply { }
.webmention__author { }
.webmention__avatar { }        /* circular avatar img */
.webmention__author-name { }   /* linked name */
.webmention__date { }
.webmention__content { }

Source

Available on GitHub and RubyGems.

gem install jekyll-webmentions-static