<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>Indieweb on Stephen Ajulu</title><link>https://ajulu.netlify.app/tags/indieweb/</link><atom:link href="https://ajulu.netlify.app/tags/indieweb/feed.xml" rel="self" type="application/rss+xml"/><description>Hello, I'm Stephen Ajulu, a seasoned multidisciplinary tech professional with over a decade of experience. I build impactful solutions using design, tech, and engineering in the pursuit of impact.</description><generator>Hugo -- gohugo.io</generator><language>en-us</language><managingEditor>ajulu.b22uf@aleeas.com (Stephen Ajulu)</managingEditor><webMaster>ajulu.b22uf@aleeas.com (Stephen Ajulu)</webMaster><copyright>Stephen Ajulu.</copyright><lastBuildDate>Mon, 27 Apr 2026 10:00:00 +0000</lastBuildDate><item><title>Implementing Webmentions on Hugo: An IndieWeb Guide</title><link>https://ajulu.netlify.app/posts/indieweb-webmention-hugo-guide/</link><pubDate>Mon, 27 Apr 2026 10:00:00 +0000</pubDate><guid>https://ajulu.netlify.app/posts/indieweb-webmention-hugo-guide/</guid><description>&lt;p&gt;Webmentions are a cornerstone of the IndieWeb movement. They allow you to &amp;ldquo;own your data&amp;rdquo; while still participating in the broader social web. Instead of having a centralized comment system (like Disqus), Webmentions allow you to receive notifications whenever someone links to your post from their own site, or even from social networks like Mastodon or Twitter.&lt;/p&gt;
&lt;h2 id="how-it-works"&gt;How it Works&lt;/h2&gt;
&lt;p&gt;The workflow typically follows the &lt;strong&gt;POSSE&lt;/strong&gt; principle: &lt;strong&gt;P&lt;/strong&gt;ublish (on) &lt;strong&gt;O&lt;/strong&gt;wn &lt;strong&gt;S&lt;/strong&gt;ite, &lt;strong&gt;S&lt;/strong&gt;yndicate &lt;strong&gt;E&lt;/strong&gt;lsewhere.&lt;/p&gt;</description><content:encoded><![CDATA[<p>Webmentions are a cornerstone of the IndieWeb movement. They allow you to &ldquo;own your data&rdquo; while still participating in the broader social web. Instead of having a centralized comment system (like Disqus), Webmentions allow you to receive notifications whenever someone links to your post from their own site, or even from social networks like Mastodon or Twitter.</p>
<h2 id="how-it-works">How it Works</h2>
<p>The workflow typically follows the <strong>POSSE</strong> principle: <strong>P</strong>ublish (on) <strong>O</strong>wn <strong>S</strong>ite, <strong>S</strong>yndicate <strong>E</strong>lsewhere.</p>
<ol>
<li><strong>Syndication:</strong> You publish a post here and share it on Mastodon or Twitter.</li>
<li><strong>Interaction:</strong> Someone likes or replies to your syndicated post on social media.</li>
<li><strong>Bridge:</strong> A service like <a href="https://bridgy.gy">Bridgy</a> sees that interaction and sends a &ldquo;Webmention&rdquo; to your site&rsquo;s endpoint.</li>
<li><strong>Inbox:</strong> Your site&rsquo;s endpoint (configured via <a href="https://webmention.io">Webmention.io</a>) receives the mention.</li>
<li><strong>Display:</strong> Your Hugo templates fetch these mentions via JavaScript and display them at the bottom of your post.</li>
</ol>
<div class="member-gate" data-role="premium">
    <div class="unlocked-content" style="display:none;">
        <h2 id="step-by-step-implementation">Step-by-Step Implementation</h2>
<h3 id="1-setup-your-identity-indieauth">1. Setup your Identity (IndieAuth)</h3>
<p>Ensure your site has <code>rel=&quot;me&quot;</code> links to your social profiles in the <code>&lt;head&gt;</code>. This proves you own the domain.</p>
<h3 id="2-configure-webmentionio">2. Configure Webmention.io</h3>
<p>Log in to Webmention.io with your domain. Add the following to your <code>extend-head.html</code>:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;webmention&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://webmention.io/ajulu.netlify.app/webmention&#34;</span> <span class="p">/&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;pingback&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://webmention.io/ajulu.netlify.app/xmlrpc&#34;</span> <span class="p">/&gt;</span>
</span></span></code></pre></td></tr></table>
</div>
</div><h3 id="3-display-the-mentions">3. Display the Mentions</h3>
<p>Add a container and a script to your post template. We&rsquo;ve already implemented a themed version of this in our <code>webmention.html</code> partial, which uses CSS Grid to display likes and a threaded list for replies.</p>

    </div>
    <div class="locked-message">
        <div class="gate-overlay">
            <span class="gate-icon">🔒</span>
            <h3>Premium Insight</h3>
            <p>This deep-dive is exclusive to <strong>Premium Members</strong>.</p>
            <div class="gate-actions">
                <a href="/membership" class="btn">Unlock Access</a>
                <button class="btn-secondary" onclick="netlifyIdentity.open('login')">Already a member? Log in</button>
            </div>
        </div>
    </div>
</div>

<script>
    (function() {
        function checkAccess() {
            const user = window.netlifyIdentity && netlifyIdentity.currentUser();
            const isPremium = user && user.app_metadata && user.app_metadata.roles && user.app_metadata.roles.includes('premium');
            
            document.querySelectorAll('.member-gate').forEach(gate => {
                const unlocked = gate.querySelector('.unlocked-content');
                const locked = gate.querySelector('.locked-message');
                if (isPremium) {
                    unlocked.style.display = 'block';
                    locked.style.display = 'none';
                } else {
                    unlocked.style.display = 'none';
                    locked.style.display = 'block';
                }
            });
        }

        if (window.netlifyIdentity) {
            netlifyIdentity.on('init', checkAccess);
            netlifyIdentity.on('login', checkAccess);
            netlifyIdentity.on('logout', checkAccess);
        }
    })();
</script>

<style>
.locked-message {
    padding: 40px;
    background: var(--base-offset-color);
    border-radius: 8px;
    border: 1px dashed var(--highlight-color);
    text-align: center;
    margin: 30px 0;
}

.gate-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
}

.gate-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--highlight-color);
    color: var(--highlight-color);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
</style>

<h2 id="why-bother">Why Bother?</h2>
<p>By using Webmentions, you become a first-class citizen of the open web. You aren&rsquo;t just a &ldquo;user&rdquo; on a platform; you are a node in a distributed social network.</p>
<p>Happy hacking!</p>
]]></content:encoded><media:content url="https://images.unsplash.com/photo-1516259762381-22954d7d3ad2?q=80&amp;w=1000&amp;auto=format&amp;fit=crop" medium="image"/></item></channel></rss>