Genx Notes

Blog

  • A Plugin to Automatically Share Posts on Bluesky

    eduardo ramos dp12afcVr8M unsplash scaled

    Use the following plugin:

    Autoblue

  • How I Added a Share Button to My Article Pages in Hugo

    rizki ardia X3vD9 0kky4 unsplash scaled

    I recently wanted to make it easier for readers to share my articles on my blog, so I added social share buttons for some popular platforms. Here’s how I implemented this in Hugo, my static site generator. This approach is flexible, if you use different sections or want to add more networks, adapting is simple.

    1. Deciding Where To Show the Share Buttons

    First, I chose to display share buttons only on specific sections (example: posts and tech). I edited my single.html template to add this conditional code wherever I wanted the buttons to appear:

    {{ if or (eq .Section "posts") (eq .Section "tech") }}
  {{ partial "share-buttons.html" . }}
{{ end }}

    This tells Hugo to include the share buttons partial for articles in those sections only.

    2. Creating the share-buttons.html Partial

    Next, I created a new partial file at layouts/partials/share-buttons.html with the following content:

    <!-- Bluesky Share Button -->
<a class="share-link share-bluesky"
   href="https://bsky.app/intent/compose?text={{ .Title | urlquery }}%20{{ .Permalink | urlquery }}"
   target="_blank"
   rel="noopener"
   aria-label="Share on Bluesky">
  <i class="fa-brands fa-bluesky fa-lg"></i> Bluesky
</a>

<!-- Mastodon Share Button -->
<a class="share-link share-mastodon"
   href="#"
   onclick="shareToMastodon('{{ .Title }}', '{{ .Permalink }}'); return false;"
   aria-label="Share on Mastodon">
  <i class="fa-brands fa-mastodon fa-lg"></i> Mastodon
</a>

<script>
function shareToMastodon(title, url) {
  var instance = prompt("Enter your Mastodon server (e.g., mastodon.social):", "mastodon.social");
  if (!instance) return false;
  var shareUrl = "https://" + instance + "/share?text=" + encodeURIComponent(title + " " + url);
  window.open(shareUrl, '_blank');
}
</script>

<!-- RSS Feed Button -->
{{ $rss := "" }}
{{ range .Site.Home.OutputFormats }}
  {{ if eq (lower .Name) "rss" }}
    {{ $rss = .Permalink }}
  {{ end }}
{{ end }}
<a class="share-link share-rss"
   href="{{ $rss }}"
   target="_blank"
   rel="noopener"
   aria-label="RSS Feed">
  <i class="fa-solid fa-rss fa-lg"></i> RSS
</a>

    Here’s a quick rundown:

    • Bluesky: Opens a new post window with the article title and link prefilled.
    • Mastodon: Prompts the user for their Mastodon instance, then opens a share window.
    • RSS: Links to my site’s RSS feed.

    3. CSS for Share Buttons

    At this point, you’ll want the buttons to look nice. Here’s a sample CSS snippet you could add to your main stylesheet or a partial. (I placed it in custom.css in /static/css/ )

    css.share-link {
  display: inline-block;
  margin: 0 0.5em 0.5em 0;
  padding: 0.5em 1em;
  border-radius: 4px;
  text-decoration: none;
  color: #222;
  background: #f2f2f2;
  transition: background 0.2s;
}
.share-link:hover {
  background: #e0e0e0;
}
.share-bluesky { color: #0077FF; }
.share-mastodon { color: #6364FF; }
.share-rss { color: #FFA500; }

    4. Font Awesome Icons

    To display the icons, I used Font Awesome. Make sure to include the Font Awesome CDN (or your preferred setup) in your head.html partial or site template, for example:

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.6.0/css/all.css">

    (Adjust the version or method as needed.)

    5. Any Missing Steps?

    • Partial Path: Confirm that your share-buttons.html file is in layouts/partials/.
    • Testing Output: Run hugo server locally and load a page in a qualifying section to see if the buttons appear.
    • Accessibility: Each button uses aria-label for better screen reader support.
    • Future Extensions: You can easily add Twitter, Reddit, or Facebook. Just follow the same pattern as above.

    Conclusion

    Adding social share buttons to your Hugo articles isn’t hard. You just need a template partial, some HTML/JS/CSS, and (optionally) icons. Now, it’s even easier for readers to help spread the word about your posts.

    Pro tip: If you use a different theme or site structure from the Hugo default, just adjust the file paths and sections accordingly.

  • Mastodon vs Bluesky: Auto-Post Removal for Old Social Content

    marek piwnicki w3ju9TIrtrk unsplash scaled

    Cleaning up old, irrelevant social media posts is a crucial feature for anyone who cares about maintaining a professional or fresh online presence. Here’s how Mastodon and Bluesky compare when it comes to automatic post deletion:

    Mastodon: Built-In Auto-Delete for Posts

    Mastodon offers a native, highly configurable automated post deletion feature right in its core settings:

    • Location: Available in Preferences > Automated Post Deletion.
    • Control: You can set the age threshold for post deletion (from 1 week up to 2 years).
    • Exemptions: Choose to skip deletion for specific posts, such as pinned items, DMs, posts with media, posts that are bookmarked, or even posts above a certain popularity (measured by boosts or favorites).
    • Manual override: Turning off the feature simply disables it for future posts, but already deleted posts are not recoverable.
    • Federated deletion: Attempts to delete old posts from all federated servers, though some copies may persist if other servers do not honor deletion signals.

    Bluesky: No Native Auto-Delete—Relying on Third-Party Tools

    Bluesky currently lacks an integrated automated post deletion feature:

    • Manual or third-party only: Users must use external tools or services (like Redact.dev or scripts such as Skeeter-Delete) for scheduled post removal.
    • Disappearing Mode & Bulk Removal: Third-party apps allow auto-deletions, such as removing posts, reposts, and likes based on age or specific criteria, but this is not part of Bluesky’s native workflow.
    • Configurability: Deletion settings depend on the chosen tool or service and may require payment, manual setup, or periodic intervention.
    • Upcoming features: There are user requests for a built-in feature, but as of now, it remains external.

    Feature Comparison Table

    PlatformNative Auto-DeleteGranular ControlsThird-Party Tools OnlyFederated/All-In-One
    MastodonYesYes (age, popularity, exceptions)NoFederated, but not all servers may respect deletion
    BlueskyNoDepends on external toolYesAll-in-one platform

    Why This Matters for Content Managers & Creators

    For someone who manages blogs and values fresh content—especially if you prefer self-hosting and absolute control—Mastodon’s built-in automation gives you peace of mind. You can avoid the hassle of manual cleanup, keep your archive lean, and ensure that outdated, irrelevant posts do not linger to potentially harm reputation, clutter your profile, or dilute your brand. Bluesky’s reliance on third-party solutions for a basic function like auto-removal is a significant drawback for anyone who regards content lifecycle and curatorial control as top priorities.

    Verdict: Mastodon’s auto-removal tools are more robust and convenient for content creators and managers who want minimal maintenance of old social content.

  • How to Attract Traffic to Your “Isolated Island” WordPress Blog Without Relying on Google

    behnam norouzi zNcEBHCPwq0 unsplash scaled

    Launching a new static blog feels a lot like setting up camp on a remote, undiscovered island: there’s excitement, creative freedom, and… almost no visitors. If you’ve felt the sting of zero traffic, you’re not alone. In a web landscape dominated by Google, it’s easy to believe search engines are the only way to attract readers. Fortunately, the landscape is evolving, and there are now more ways than ever to guide readers to your digital shore, without depending on Google at all.

    Welcome to your comprehensive guide to blog promotion in the post-Google era.

    Rethinking Blog Promotion: Why Go Beyond Google?

    Relying only on search engines like Google puts your blog at the mercy of ever-shifting algorithms. For new and independent sites, it’s common to receive little or no search-driven traffic at first. This can be discouraging, but it’s also an opportunity. By diversifying how you reach your audience, you’ll insulate your site from algorithm changes, build a more engaged readership, and participate in new, exciting web communities.

    Practical Ways to Attract Non-Google Traffic

    1. Integrate With the Fediverse

    The Fediverse is a decentralized network of social platforms (like Mastodon, Pleroma, and PeerTube) that communicate using open protocols (such as ActivityPub). By connecting your blog to the Fediverse, you open it up to readers who value independent publishing and want content delivered directly, free from centralized control.

    How to Do It:

    • Use plugins or static site generators (e.g., Hugo with ActivityPub support) to make your articles available as Fediverse posts.
    • Each new blog post can automatically be shared as a “status” or note within the Fediverse, enabling shares, likes, and replies.

    Result:
    You enter a thriving, open network of early adopters and web-enthusiasts, a perfect audience for unique, indie blogs.

    2. Leverage Microblogging Services

    Platforms like micro.blog are designed for independent creators. These services let you syndicate your blog updates, operate under your own domain, and often provide cross-posting features to reach users on Mastodon, Bluesky, and elsewhere.

    Steps:

    • Sign up with micro.blog (or similar).
    • Configure your blog’s RSS feed to auto-syndicate new posts.
    • Enable cross-posting to Mastodon, Bluesky, and other supported networks.

    Tip:
    Using your own domain or subdomain camouflages your microblog presence as a native extension of your main site while giving you access to a wider audience.

    3. Build Your Own Mastodon Server

    Running your own Mastodon instance is easier than ever, especially with managed hosting services (like XServer SNS in Japan). This lets you create a fully controlled social media platform that’s automatically part of the Fediverse.

    Benefits:

    • Broadcast new blog posts directly to followers, across the entire Fediverse.
    • Maintain ownership and moderation of your community.
    • Integrate your blog and Mastodon feed for seamless content publishing and discovery.

    Self-hosting provides unmatched flexibility and can become a showcase for both your technical skills and your content.

    4. Configure IndieWeb Features

    The IndieWeb is a grassroots movement for a web built by, and for, individual creators. Its philosophy: own your content, your platform, and your connections. By enabling IndieWeb functionality, you make your site more discoverable within a network of like-minded creators, facilitate direct interactions, and reinforce your independence.

    Key IndieWeb Features to Enable:

    • Microformats: Mark up your blog’s HTML with microformats (like h-entry for posts), making your content machine-readable for social readers and aggregators.
    • Webmentions: Enable sending and receiving Webmentions (like trackbacks, but modern and decentralized) so that when another IndieWeb site mentions your post, you get a notification, and vice versa. Try using webmention.io or self-hosted software.
    • IndieAuth: Support IndieAuth, allowing decentralized, portable login across IndieWeb sites.
    • POSSE: Publish on your Own Site, Syndicate Elsewhere, use tools like Bridgy to push updates to Twitter, Mastodon, and others, linking back to your site.

    Join IndieWeb directories and news aggregators like IndieWeb.xyz and IndieNews to further boost your chances of discovery.

    Benefit:
    Joining the IndieWeb makes you part of an interconnected web of sites that value conversation, direct feedback, and peer-driven discovery.

    5. Join WebRings

    WebRings are a classic, yet powerfully resurgent, way to connect sites with common interests. By joining a WebRing, you participate in a circular network, where each site links to others in the group. Visitors are encouraged to “surf” the ring, discovering new content in a way that’s fun and serendipitous.

    How to Join:

    • Find relevant WebRings (e.g., for static sites, music producers, indie blogs, etc.).
    • Follow each ring’s signup process, typically adding a provided HTML/JS snippet to your blog’s footer.
    • Consider starting your own WebRing if one doesn’t exist for your niche.

    Result:
    Instant traffic from a pool of interested, community-minded visitors who enjoy supporting small and independent websites.

    6. Blend in Traditional Methods

    Don’t overlook tried-and-true methods that continue to work:

    • Start an email newsletter: Build a direct relationship with your readers. Direct emails work, and newsletter subscribers are among the most valuable and engaged visitors.
    • Share on social media: Twitter, Instagram, Discord communities, or music and coding forums can generate word-of-mouth and network effects.

    Final Thoughts

    You don’t have to depend on Google for your blog’s survival or success. By integrating with the Fediverse, leveraging microblogging platforms, running your own Mastodon instance, embracing IndieWeb principles, and joining WebRings, you can transform your “isolated island” blog into a vibrant hub connected to countless digital journeys.

    These grassroots, open-web strategies celebrate the original spirit of the internet: connection, discovery, and individual expression. The tools exist now for you to build a readership that’s platform-proof, algorithm-resistant, and truly yours.

    Get started today, your readers are out there, waiting to discover your island.

  • How to set your own domain as a username in Bluesky

    riswan ratta QGe3iE8ImDM unsplash scaled
    1. Log in to the Bluesky app and open the settings screen.
    2. Click “Change handle”.
    3. Select “I have my own domain”
    4. Enter the custom domain name you want to use.
    5. Copy the displayed DNS setting information.
    6. Add the copied information to the domain’s DNS settings:
      • Add as TXT record
      • Enter hostname and target (or value) exactly
    7. After saving your DNS settings, return to the Bluesky app and click “Verify DNS Record.”
    8. If the authentication is successful, you will see the message “Your domain has been verified!”.
    9. Click Save to confirm your changes.

  • How I Fixed IndieAuth Problems by Adding rel=”me” in WordPress

    david palma buVtAQuhRs unsplash scaled

    Have you ever wanted to use your own website to log in to other sites? That’s what IndieAuth helps you do.

    But what if the special WordPress plugin for IndieAuth stops working?

    That’s what happened to me. So, I found a simple way to fix it myself—with help from something called the Code Snippets plugin.

    Let me show you how I did it.

    What Is rel=”me”?

    rel=me is a small bit of code that you can add to your site.

    It tells other websites which social media accounts and links belong to you.
    This helps prove that you are really you when you log in or connect your accounts.

    For example:

    <link rel="me" href="https://mastodon.social/@yourusername" />
<link rel="me" href="https://github.com/yourusername" />

    You can add as many links as you want for your different profiles.

    Why Did the Plugin Break?

    Sometimes, plugins don’t work because:

    • Your WordPress site or theme gets a big update.
    • Another plugin causes problems.
    • The plugin just hasn’t been updated in a long time.

    When this happens, important things like rel=”me” might not show up on your site.

    How I Fixed It With Code Snippets

    Instead of changing tricky WordPress code, I used the Code Snippets plugin.

    This plugin lets you safely add new code to your site, kind of like adding stickers to a notebook.

    Step 1: Get the Code Snippets Plugin

    • Go to “Plugins” in WordPress.
    • Click “Add New.”
    • Search for “Code Snippets.”
    • Install and turn it on.

    Step 2: Add Your rel=”me” Link in Header & Footer

    • Go to your WordPress dashboard.
    • Open the Code Snippets plugin.
    • Find the section for “Header & Footer.”
    • In the “Header” area, paste your rel=”me” code.
    • Change the links to match your real accounts!
    • Save your changes.

    How to Check If It Works

    • Go to your website.
    • Right-click and choose “View Page Source.”
    • Look for your rel=”me” links in the head section.
    • Try using IndieAuth again on another site.

    If you see your links, you did it.

    Why This Helps

    Plugins can break sometimes. But you can still show other sites which accounts belong to you. Adding rel=”me” links by yourself is a simple fix.

    This way, you stay in charge of your online identity, even when tools break. Give it a try and see how easy it is.

  • How to Get Started with the IndieWeb Webring on Hugo

    erry s nugroho HMhG9RgADN8 unsplash scaled

    Joining the IndieWeb Webring is a great way to connect your personal Hugo site to the broader IndieWeb community. Here’s how to get started:

    1. Visit the IndieWeb Webring

    2. Set Up Authentication: IndieAuth or RelMeAuth

    • The Webring site uses IndieAuth and/or RelMeAuth for sign-in. Since Hugo sites are static, you’ll generally use RelMeAuth.

    What is RelMeAuth?

    • RelMeAuth is an authentication method based on linking your personal website to established profiles (like GitHub or Mastodon) using rel=”me” links.
    • This lets you use your social profiles to authenticate as “you”, using your site’s identity.

    Steps for Setting Up RelMeAuth

    Add rel=”me” Links
    In your Hugo site’s layouts (usually in the head partial template), add links to your existing verified social profiles with rel=”me”. For example:

    <a href="https://github.com/yourusername" rel="me">GitHub</a> <a href="https://mastodon.social/@yourusername" rel="me">Mastodon</a>

    Make sure your social profiles link back to your website as well (for bidirectional verification).

    Sign In on the Webring Site

    Click the “Sign in” button at https://xn--sr8hvo.ws/.

    Enter your personal website URL. The service will look for your social rel=”me” links and use those to authenticate you through RelMeAuth.

    Complete the authentication process by authorizing through your social profile (usually GitHub or Mastodon).

    3. Add Webring Navigation Links to Hugo

    Once authenticated and added to the webring, you’ll be instructed (or allowed) to add navigation links to your website.

    Edit your Hugo footer partial ( commonly layouts/partials/footer.html ).

    Add the following HTML snippet for the navigation links:

    <a href="https://xn--sr8hvo.ws/previous">←</a> An <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍 <a href="https://xn--sr8hvo.ws/next">→</a>

    This enables seamless navigation to the previous and next sites in the ring.

    4. Double-check Your Site Links (Recommended)

    • Validate that your rel=”me” links are correctly formatted. You can use indielogin.com/setup or indiewebify.me to check for errors.
    • Ensure your social profiles link back to your website (bidirectional linking is required for verification).
    • If you use domain aliases or non-www/www inconsistencies, ensure your social profiles match your canonical website URL.

    5. All Set. You’re in the Webring!

    • After your site is approved, the webring links will automatically display the correct previous/next sites based on updates at xn--sr8hvo.ws.
    • From now on, when someone visits your site, they can use the webring links to discover other IndieWeb sites.

    Optional Enhancements

    • Consider customizing the placement or style of the webring links to match your site’s theme.
    • Document any IndieWeb or Webmention features you support—many IndieWebbers like sharing how their sites interact with others.

    That’s it.
    You’re now part of a decentralized community-powered webring, using web standards and your own web identity.

  • How to Achieve POSSE (Publish on your Own Site, Syndicate Elsewhere)

    rizal ramadhany 9UerTAAiywo unsplash scaled

    POSSE (Publish on your Own Site, Syndicate Elsewhere) is a content publishing strategy that emphasizes posting original content on your own website first and then syndicating (sharing) it to third-party platforms like social media or other content aggregators. This approach ensures you maintain control and ownership of your content while still reaching audiences on external platforms. Below is a comprehensive guide to implementing POSSE:

    Steps to Implement POSSE

    1. Set Up Your Personal Website

    • Use a platform like WordPress, Hugo, or Jekyll to create a website that you own and control.
    • Ensure your website supports RSS feeds, as these are often used for syndication.
    • Choose a domain name that reflects your brand or identity.

    2. Publish Content on Your Website

    • Post all original content (articles, blog posts, microblogs, etc.) on your website first.
    • Include metadata like canonical URLs to establish your site as the original source.

    3. Syndicate Content to External Platforms

    Syndication involves sharing copies or summaries of your content on third-party platforms with links back to the original post. Here’s how:

    • Manual Syndication: Copy and paste the content or its summary to platforms like Twitter, Facebook, or LinkedIn, including a link to the original post.
    • Automated Syndication:
    • Use tools like Bridgy for automated sharing to platforms like Twitter or Mastodon.
    • Plugins like “WordPress Crosspost” can automate syndication from WordPress to Medium or other platforms.
    • Services like IFTTT or Zapier can connect your RSS feed to social media accounts for automatic posting.

    4. Link Back to Your Original Content

    • Ensure syndicated posts include a link (e.g., permashortlink) back to the original post on your site. This helps redirect traffic and improves SEO.

    5. Track and Manage Responses

    • Use tools like Webmentions or Bridgy Backfeed to aggregate comments, likes, and shares from third-party platforms back onto your website.

    Tools and Plugins for POSSE

    Here are some tools and plugins that can simplify POSSE implementation:

    • WordPress Plugins: Plugins like “IndieWeb” or “Jetpack” support syndication and webmentions.
    • RSS-Based Tools: Tools such as Feed2Toot (for Mastodon) or Enhance’s Arc Plugin can syndicate RSS feed content automatically.
    • Custom Scripts: For developers, tools like SiloRider (Python) or custom GitHub Actions can be used for more advanced automation.

    Benefits of POSSE

    1. Content Ownership: You retain full control over your content without relying on third-party platforms.
    2. Improved SEO: Canonical links and backlinks from syndicated content improve discoverability.
    3. Platform Independence: If a social media platform changes its terms of service or shuts down, your content remains safe on your site.
    4. Audience Reach: Syndication allows you to meet audiences where they are while driving traffic back to your site.

    Example Workflow

    1. Write an article on your personal site (e.g., WordPress).
    2. Use an RSS-based plugin or tool like Bridgy Publish to share the article on Twitter and Mastodon.
    3. Include links in syndicated posts pointing back to the original article.
    4. Aggregate comments from Twitter using Bridgy Backfeed.

    By following this model, you can ensure that you maintain ownership of your content while leveraging external platforms for visibility and engagement.

  • Easy IndieWeb Login: Using rel=me and GitHub When IndieAuth Breaks on WordPress

    m umar farooq ZT ssX5kISw unsplash scaled

    Sometimes WordPress plugins break. This happened to the IndieAuth plugin.

    When this plugin doesn’t work, you can’t use it to log in to other sites with your WordPress website. That’s a problem if you use IndieWeb tools.

    But there’s a simple way around this.

    Use something called relmeauth. You don’t need a plugin for this. Instead, you just connect your site to another account you own, like GitHub.

    Here’s how you can do it:

    Why IndieAuth Stops Working

    Sometimes updates or new settings in WordPress mess up the IndieAuth plugin. This can stop you from logging in to sites that need IndieAuth. You might see errors or things just don’t work as you expect.

    What Is relmeauth?

    Relmeauth is an easier way to prove who you are on the web.

    It uses something called a “rel=me” link. This is just a special kind of link that tells other sites, “I own this other account too!”

    Sites like Mastodon and some IndieWeb tools know how to read these links.

    How to Use GitHub With rel=me

    1. Add this line to the header (top part) of your WordPress site:
    <link rel="me" href="https://github.com/yourusername">
    1. Next, go to your GitHub profile. In the “Website” field, add the link back to your website.

    This makes a 2-way connection. Your site links to GitHub. GitHub links back to your site.

    Now, some sites will let you login or prove who you are by checking these links.

    The Good Parts

    • No plugin needed! This works even if the IndieAuth plugin is broken.
    • Simple steps. It’s just adding a link on your site and a link on your GitHub.
    • Still works for IndieWeb login on places that check rel=me links.

    One Thing to Remember

    This only works on websites that support rel=me login. If the site checks for these links, you’re good.

    So, if IndieAuth stops working on your WordPress, just use rel=me with GitHub. It’s quick, easy, and keeps your IndieWeb login working.

  • How do I put a verification mark next to a link when adding my website in Mastodon?

    riswan ratta kXukovKHLXs unsplash scaled

    You need to include the rel=”me” attribute in the link from the destination URL to your Mastodon profile. However, there is currently no direct way to set the rel=”me” attribute on links in the Gutenberg editor. Therefore, it is better to use the “Custom HTML” block and edit the HTML directly.

    Example: <a href="https://mastodon.social/@username" rel="me">Mastodon</a>