Joining the Indieweb

Is any personal website a part of the Indieweb? I’d argue that on some level, that is true, but the Indieweb movement also embodies a specific approach and set of practices as an alternative to social media. For me, it’s about intentionality and orientation along with the technical implementation.

To that end, I spent some time today Indieweb-ifying this blog. I’ve been interested in the Indieweb movement for a while for philosophical reasons. It posits the idea of personal websites as alternative to corporate Internet silos. A quick definition from the site:

The IndieWeb is a community of independent & personal websites connected by simple standards, based on the principles of: owning your domain & using it as your primary identity, publishing on your own site (optionally syndicating elsewhere), and owning your data.

I really resonate with the idea and believe that it’s a great alternative to the centralized Internet that has become dominant over the past ~15 or so years. If we own our own content, we aren’t at the whims of whatever social media platform is dominant and their business decisions. People have been making personal websites since the start of the web, but they have fallen out of favor as social media platforms became popular.

However, one thing I have noticed is that getting started is a bit hard. There are a lot of terms — Microformats, IndieAuth, Webmention — that are tossed around. While there is a wiki full of information, I’ve found that some of the concepts and implementations are a bit difficult. In my experience, this is broadly true for most open alternatives to the corporate Internet.

Indieweb on WordPress

For this blog, I chose to use WordPress. It’s the easiest (in my opinion) of the various open-source Content Management Systems (CMSs) and has a wide usage basis, which makes it easy to get help when you need it. Setting up WordPress is beyond the scope of this post, so I’m mainly going to focus on what I did to make this an Indieweb site. It assumes that you already own your own domain and have WordPress installed on that domain.

The first thing I did was install the Indieweb plugin as it seemed like a good starting point (There is also a guide on Indieweb.org for using WordPress, but for the most part, I followed my own path). Unfortunately, it doesn’t support modern WordPress implementations using the Block Editor, so I had to implement various features manually. What follows is what I did in case it helps others.

Getting Started

When I’ve setup other Indieweb implementations using other CMSs, I have followed the guide at IndieWebify.Me to help guide me through the process. I find that the site offers a reasonably user friendly starting point. As such, I’ll focus on the steps there and how I accomplished the various implementations using WordPress.

Set Up Web Sign In

This was probably the easiest part for me. I used the plugin IndieAuth and added my website to my User Profile in WordPress. Once that is done, it adds gives you the ability to sign-in

Along with this, I used the Social Icons block in WordPress, I added links to my own website using the “me” attribute in the “rel” field. I also did the same with a Mastodon account that links back to my main site. I wanted to add “u-url” classes to each link as recommended, but apparently that isn’t possible. I wrote a quick plugin to do that but it isn’t really a necessary step.

Create a Homepage H-Card

The next step was to create a h-card microformat to identify your site and your authorship. Basically, it’s a process of adding a bunch of specific classes to your HTML. I thought I’d do this by adding custom classes to the various blocks in the editor, but it didn’t work as easily as I would have hoped. I had a lot of trouble getting the mark up correct so that it could be parsed. Ultimately, it was quicker to just use a Custom HTML block (I placed mine inside of a Group Block with the “h-card” class added) and add a class to visually hide the mark-up:

<style>
.hidden { display: none; }
</style>
<div class="hidden">
<p><span class="p-name">Abe Noe</span> runs this site as <span class="p-note">an experiment in digital gardening.</span> </p>
<ul>
<li><a href="https://subvert.city" class="u-url u-id" rel="me">subvert.city</a></li>
<li><a href="https://hachyderm.io/@subvertxcity" class="u-url" rel="me">mastodon</a></li>
<li><a href="https://www.tumblr.com/subvertxcity" class="u-url" rel="me">tumblr</a></li>
</ul>
<img src="https://150144737.v2.pressablecdn.com/wp-content/uploads/2023/09/OIG-150x150.jpeg" alt="" class="u-photo"/>
</div>

The main thing here is having classes that explain specific types of content for an h-card parser, wrapped inside a container of with the class of “h-card”. I feel like this process should have been a bit easier, but I think the particulars of the mark-up made it a bit finicky. In the future, I might try seeing if I could create a h-card block to make this easier.

Add H-Entry Items to Posts

The next step is to add h-entry microformats to posts. You could do this manually by editing templates or blocks. I chose to use a plugin called IndieBlocks to automatically add the required mark-up to posts. It worked for me, but the developer says the feature is “experimental” so your mileage may vary.

Add Webmention Support

A Webmention is an open web standard to facilitate cross-site conversations and interactions. The idea is that it creates a distributed network of peer-to-peer comments, likes, reposts, and other responses across the web. To implement this, I installed the Webmention plugin. It didn’t need any special configuration and I used the Webmention Rocks! site to test my implementation. It now allows me to receive Webmentions that are moderated like traditional WordPress comments.

The End… (for now)

That’s all I did for now. In the future, I plan to add different post types and what not for different types of content and microformats (example: notes, likes, and replies).