IndieWebifying my website: part 1, the why & how

IndieWeb

I’ve decided to re-design my personal website, richardmacmanus.com. My primary reason is to become a full-fledged member of the IndieWeb community. If I’m writing about Open Web technologies here on AltPlatform, then I ought to be eating my own dog food. Another reason is to discover – likely by trial and error – how to route around Walled Gardens like Facebook and Twitter, which host so much of our content these days. In other words, my goal is to make my personal website the hub for my Web presence. Finally, I want to re-discover blogging in 2017 – what it can do in this era, who’s doing interesting things and how, and what opportunities there might be for the Open Web to cross into the mainstream.

So in a series of posts on AltPlatform, I’m going to document my re-design and see where it takes me.

Goals

With any website re-design, you need to know what you’re trying to achieve. I’ve touched on some of that already, but here’s how I wrote it out in my Evernote:

My goals for my website in 2017:

  1. Author website: promote my books and other activities as a professional writer (e.g. my tech column).
  2. Blogging circa 17: participate in the Open Web and experiment like I did in 2003/04 [when I was starting ReadWriteWeb].
  3. Make my website my central hub / identity on the Web.

The first goal is purely professional: ensuring my website supports and promotes my career as a writer. So my books, columns and any other writing I do should be front and center.

The second goal is the most exciting one; and the reason for this post. I’m keen to interact with other indie bloggers – through comments, likes, social streams, and whatever else I find that connects people together on the Indie Web.

If I accomplish the second goal, that will go a long way to making the third goal a reality: making my website the central hub for my Web activity.

Principles

In addition to these goals, I have started jotting down some principles. These are personal to me, so they may not be relevant to others. One of my principles is to maintain my privacy about certain things. The Social Web is great, but I have come to really dislike the oversharing aspect of it. So, for example, I don’t wish to share what books I read or what music I listen to. Those are things I prefer to keep to myself.

In other words I will be selective about which social streams I aggregate on my blog. The stuff I share on Facebook with my friends and family, for example, will stay on Facebook where it belongs. I may aggregate my Mastodon stream, perhaps even my Twitter, but if I do it will be for experimental reasons. It’ll be to see what value it has on my website (perhaps none, in which case the experiment will end).

Let’s now get to the re-design…

Getting started

My website runs on WordPress.org and is hosted at InMotion. Here’s what my website looked like just before I began IndieWebifying it:

previous design

It was an okay design, based on the Tortuga theme. But it didn’t really connect me to other people, or help sell many books for that matter. So it was ripe for disruption!

The first thing I did was go to the IndieWeb community wiki. Over the years, it has built up a number of tools to help you create a personal website that not only communicates your online presence, but also connects you to other blogs – as well as social media (such as Twitter and Mastodon). There’s a Getting Started page, which is of course a great place to start. That pointed me to IndieWebify.Me, which has a step-by-step guide. Even better for my purposes was the Getting Started on WordPress page, much of which was written by AltPlatform’s own Chris Aldrich.

Before I got stuck in, I wanted further inspiration from other indie bloggers. After all, the beauty of the early Web was its “view source” nature – the ability to re-use other peoples innovations to build your own place on the Web.

Chris Aldrich’s website looks to be the quintessential IndieWeb site. He has all kinds of content streaming into and out of his site – check out the post types listed below. I resolved to ‘copy’ the way he does things, at least until I’m knowledgeable and confident enough to try my own ways.

Chris Aldrich

I then came across Jonathan LaCour’s website, after he left a comment on a recent AltPlatform post. “I have a website that supports Webmention and Micropub,” he wrote in that comment, “and I’ve created a plugin for Nextcloud News, my feed reader of choice, that enables interactions.”

Alan Levine also has a fun-looking indie blog, which features his own photography amongst other things.

The re-design begins

During my initial research, I discovered the fastest way to get up to speed was install an IndieWeb recommended WordPress theme. So I switched from my old theme to one called SemPress, designed by Matthias Pfefferle. It’s a brilliant design from a technical point of view, since it supports all the latest Open Web standards. The design isn’t as colourful as my previous one, but I’ll work on personalizing it later.

the new design

I then installed the IndieWeb family of plugins, which you can find by simply searching “IndieWeb” in the WordPress.org plugin directory. Here are the individual plugins you get, and what each one enables:

  • Webmention – allows you to send and receive by adding webmention support to WordPress. Mentions show up as comments on your site.
  • Semantic Linkbacks  – makes IndieWeb comments and mentions look better on your site.
  • Post Kinds – Allows you to reply/like/RSVP etc to another site from your own, by adding support for kinds of posts to WordPress.
  • Bridgy Publish – Adds a user interface for using Bridgy to publish to other sites
  • Syndication Links – Adds fields to a post to allow manual entry of syndication links as well as automatically from a supported syndication plugin.

In a nutshell, those five plugins allow you to a) send and receive responses with your site; and b) syndicate your content to other sites.

After installing these and playing around, I tested the Post Kinds plugin by posting a reply to a post Chris wrote. Essentially I created a new post on my site, which looked like this:

replying to Chris on my own blog

Eventually my reply showed up on Chris’ original post. Of course it reminded me of trackbacks from the 03/04 era.

After I saw how easy it was to post all kinds of social content to one’s own site, I re-designed my menu to include “Social Streams” – with the sub-categories “Reply,” “Like,” and “Note.” I may add other types of social streams, like Chris has done on his site, as I continue my experiments.

So, I’ve made a start re-designing my website into an IndieWeb one. I still have a lot to do, including adding my own design. But I’ll continue to document my progress in the next post. In the meantime, any tips or feedback appreciated!

Image credit: Tantek

33 comments

Leave a Reply