Tags: independent



Indie web building blocks

I was back in Nürnberg last week for the second border:none. Joschi tried an interesting format for this year’s event. The first day was a small conference-like gathering with an interesting mix of speakers, but the second day was much more collaborative, with people working together in “creator units”—part workshop, part round-table discussion.

I teamed up with Aaron to lead the session on all things indie web. It turned out to be a lot of fun. Throughout the day, we introduced the little building blocks, one by one. By the end of the day, it was amazing to see how much progress people made by taking this layered approach of small pieces, loosely stacked.


The first step is: do you have a domain name?

Okay, next step: are you linking from that domain to other profiles of you on the web? Twitter, Instagram, Github, Dribbble, whatever. If so, here’s the first bit of hands-on work: add rel="me" to those links.

<a rel="me" href="https://twitter.com/adactio">Twitter</a>
<a rel="me" href="https://github.com/adactio">Github</a>
<a rel="me" href="https://www.flickr.com/people/adactio">Flickr</a>

If you don’t have any profiles on other sites, you can still mark up your telephone number or email address with rel="me". You might want to do this in a link element in the head of your HTML.

<link rel="me" href="mailto:jeremy@adactio.com" />
<link rel="me" href="sms:+447792069292" />


As soon as you’ve done that, you can make use of IndieAuth. This is a technique that demonstrates a recurring theme in indie web building blocks: take advantage of the strengths of existing third-party sites. In this case, IndieAuth piggybacks on top of the fact that many third-party sites have some kind of authentication mechanism, usually through OAuth. The fact that you’re “claiming” a profile on a third-party site using rel="me"—and the third-party profile in turn links back to your site—means that we can use all the smart work that went into their authentication flow.

You can see IndieAuth in action by logging into the Indie Web Camp wiki. It’s pretty nifty.

If you’ve used rel="me" to link to a profile on something like Twitter, Github, or Flickr, you can authenticate with their OAuth flow. If you’ve used rel="me" for your email address or phone number, you can authenticate by email or SMS.


Next question: are you publishing stuff on your site? If so, mark it up using h-entry. This involves adding a few classes to your existing markup.

<article class="h-entry">
  <div class="e-content">
    <p>Having fun with @aaronpk, helping @border_none attendees mark up their sites with rel="me" links, h-entry classes, and webmention endpoints.</p>
  <time class="dt-published" datetime="2014-10-18 08:42:37">8:42am</time>

Now, the reason for doing this isn’t for some theoretical benefit from search engines, or browsers, but simply to make the content you’re publishing machine-parsable (which will come in handy in the next steps).

Aaron published a note on his website, inviting everyone to leave a comment. The trick is though, to leave a comment on Aaron’s site, you need to publish it on your own site.


Here’s my response to Aaron’s post. As well as being published on my own site, it also shows up on Aaron’s. That’s because I sent a webmention to Aaron.

Webmention is basically a reimplementation of pingback, but without any of the XML silliness; it’s just a POST request with two values—the URL of the origin post, and the URL of the response.

My site doesn’t automatically send webmentions to any links I reference in my posts—I should really fix that—but that’s okay; Aaron—like me—has a form under each of his posts where you can paste in the URL of your response.

This is where those h-entry classes come in. If your post is marked up with h-entry, then it can be parsed to figure out which bit of your post is the body, which bit is the author, and so on. If your response isn’t marked up as h-entry, Aaron just displays a link back to your post. But if it is marked up in h-entry, Aaron can show the whole post on his site.

Okay. By this point, we’ve already come really far, and all people had to do was edit their HTML to add some rel attributes and class values.

For true site-to-site communication, you’ll need to have a webmention endpoint. That’s a bit trickier to add to your own site; it requires some programming. Here’s my minimum viable webmention that I wrote in PHP. But there are plenty of existing implentations you can use, like this webmention plug-in for WordPress.

Or you could request an account on webmention.io, which is basically webmention-as-a-service. Handy!

Once you have a webmention endpoint, you can point to it from the head of your HTML using a link element:

<link rel="mention" href="https://adactio.com/webmention" />

Now you can receive responses to your posts.

Here’s the really cool bit: if you sign up for Bridgy, you can start receiving responses from third-party sites like Twitter, Facebook, etc. Bridgy just needs to know who you are on those networks, looks at your website, and figures everything out from there. And it automatically turns the responses from those networks into h-entry. It feels like magic!

Here are responses from Twitter to my posts, as captured by Bridgy.


That was mostly what Aaron and I covered in our one-day introduction to the indie web. I think that’s pretty good going.

The next step would be implementing the idea of POSSE: Publish on your Own Site, Syndicate Elsewhere.

You could do this using something as simple as If This, Then That e.g. everytime something crops up in your RSS feed, post it to Twitter, or Facebook, or both. If you don’t have an RSS feed, don’t worry: because you’re already marking your HTML up in h-entry, it can be converted to RSS easily.

I’m doing my own POSSEing to Twitter, which I’ve written about already. Since then, I’ve also started publishing photos here, which I sometimes POSSE to Twitter, and always POSSE to Flickr. Here’s my code for posting to Flickr.

I’d really like to POSSE my photos to Instagram, but that’s impossible. Instagram is a data roach-motel. The API provides no method for posting photos. The only way to post a picture to Instagram is with the Instagram app.

My only option is to do the opposite of POSSEing, which is PESOS: Publish Elsewhere, and Syndicate to your Own Site. To do that, I need to have an endpoint on my own site that can receive posts.


Working side by side with Aaron at border:none inspired me to finally implement one more indie web building block I needed: micropub.

Having a micropub endpoint here on my own site means that I can publish from third-party sites …or even from native apps. The reason why I didn’t have one already was that I thought it would be really complicated to implement. But it turns out that, once again, the trick is to let other services do all the hard work.

First of all, I need to have something to manage authentication. Well, I already have that with IndieAuth. I got that for free just by adding rel="me" to my links to other profiles. So now I can declare indieauth.com as my authorization endpoint in the head of my HTML:

<link rel="authorization_endpoint" href="https://indieauth.com/auth" />

Now I need some way of creating and issuing authentation tokens. See what I mean about it sounding like hard work? Creating a token endpoint seems complicated.

But once again, someone else has done the hard work so I don’t have to. Tokens-as-a-service:

<link rel="token_endpoint" href="https://tokens.indieauth.com/token" />

The last piece of the puzzle is to point to my own micropub endpoint:

<link rel="micropub" href="https://adactio.com/micropub" />

That URL is where I will receive posts from third-party sites and apps (sent through a POST request with an access token in the header). It’s up to me to verify that the post is authenticated properly with a valid access token. Here’s the PHP code I’m using.

It wasn’t nearly as complicated as I thought it would be. By the time a post and a token hits the micropub endpoint, most of the hard work has already been done (authenticating, issuing a token, etc.). But there are still a few steps that I have to do:

  1. Make a GET request (I’m using cURL) back to the token endpoint I specified—sending the access token I’ve been sent in a header—verifying the token.
  2. Check that the “me” value that I get back corresponds to my identity, which is https://adactio.com
  3. Take the h-entry values that have been sent as POST variables and create a new post on my site.

I tested my micropub endpoint using Quill, a nice little posting interface that Aaron built. It comes with great documentation, including a guide to creating a micropub endpoint.

It worked.

Here’s another example: Ben Roberts has a posting interface that publishes to micropub, which means I can authenticate myself and post to my site from his interface.

Finally, there’s OwnYourGram, a service that monitors your Instagram account and posts to your micropub endpoint whenever there’s a new photo.

That worked too. And I can also hook up Bridgy to my Instagram account so that any activity on my Instagram photos also gets sent to my webmention endpoint.

Indie Web Camp

Each one of these building blocks unlocks greater and greater power:

Each one of those building blocks you implement unlocks more and more powerful tools:

But its worth remembering that these are just implementation details. What really matters is that you’re publishing your stuff on your website. If you want to use different formats and protocols to do that, that’s absolutely fine. The whole point is that this is the independent web—you can do whatever you please on your own website.

Still, if you decide to start using these tools and technologies, you’ll get the benefit of all the other people who are working on this stuff. If you have the chance to attend an Indie Web Camp, you should definitely take it: I’m always amazed by how much is accomplished in one weekend.

Some people have started referring to the indie web movement. I understand where they’re coming from; it certainly looks like a “movement” from the outside, and if you attend an Indie Web Camp, there’s a great spirit of sharing. But my underlying motivations are entirely selfish. In the same way that I don’t really care about particular formats or protocols, I don’t really care about being part of any kind of “movement.” I care about my website.

As it happens, my selfish motivations align perfectly with the principles of an indie web.

In dependence

Jason Kottke wrote an end-of-the-year piece for the Nieman Journalism Lab called The blog is dead, long live the blog:

Sometime in the past few years, the blog died. In 2014, people will finally notice.

But the second part of the article’s title is as important as the first:

Over the past 16 years, the blog format has evolved, had social grafted onto it, and mutated into Facebook, Twitter, and Pinterest and those new species have now taken over.

Jason’s piece prompted some soul-searching. John Scalzi wrote The Death of the Blog, Again, Again. Colin Devroe wrote The blog isn’t dead. It is just sleeping.:

The advantages to using Facebook should be brought out onto the web. There should be no real disadvantage to using one platform or another. In fact, there should be an advantage to using your own platform rather than those of a startup that could go out of business at any moment.

That’s a common thread in amongst a number of the responses: the specific medium of the blog may certainly be waning, but the idea of independent publishing still burns brightly. Ben Werdmuller sums that feeling up, saying the blog might be dying, but the web’s about to fight back:

If you buy the idea that articles aren’t dying - and anecdotally, I know I read as much as I ever did online - then a blog is simply the delivery mechanism. It’s fine for that to die. Even welcome. In some ways, that death is due to the ease of use of the newer, siloed sites, and makes the way for new, different kinds of content consumption; innovation in delivery.

Kartik Prabhu writes about The Blogging Dead:

In any case, let’s not ‘blog’, let’s just write—on our own personal place on the Web.

In fact, Jason’s article was preceded by a lovely post from Jeffrey called simply This is a website:

Me, I regret the day I started calling what I do here “blogging.”

I know how he feels. I still call what I write here my “journal” rather than my “blog”. Call it what you like, publishing on your own website can be a very powerful move, now more than ever:

Blogging may have been a fad, a semi-comic emblem of a time, like CB Radio and disco dancing, but independent writing and publishing is not. Sharing ideas and passions on the only free medium the world has known is not a fad or joke.

One of the most overused buzzwords of today’s startup scene is the word “disruption”. Young tech upstarts like to proclaim how they’re going to “disrupt” some incumbent industry of the old world and sweep it away in a bright new networked way. But on today’s web of monolithic roach-motel silos like Facebook and Twitter, I can’t imagine a more disruptive act than choosing to publish on your own website.

It’s not a new idea. Far from it. Jeffrey launched a project called Independent’s Day in 2001:

No one is in control of this space. No one can tell you how to design it, how much to design it, when to “dial it down.” No one will hold your hand and structure it for you. No one will create the content for you.

Those words are twelve years old, but they sound pretty damn disruptive to me today.

Frank is planting his flag in his own sand with his minifesto Homesteading 2014

I’m returning to a personal site, which flips everything on its head. Rather than teasing things apart into silos, I can fuse together different kinds of content.

So, I’m doubling down on my personal site in 2014.

He is not alone. Many of us are feeling an increasing unease, even disgust, with the sanitised, shrink-wrapped, handholding platforms that make it oh-so-easy to get your thoughts out there …on their terms …for their profit.

Of course independent publishing won’t be easy. Facebook, Pinterest, Medium, Twitter, and Tumblr are all quicker, easier, more seductive. But I take great inspiration from the work being done at Indie Web Camp. Little, simple formats and protocols—like webmentions—can have a powerful effect in aggregate. Small pieces, loosely joined.

Mind you, it’s worth remembering that not everybody wants to be independent. Tyler Fisher wrote about this on Medium—“because it is easier and hopefully more people will see it”— in a piece called I’m 22 years old and what is this. :

Fighting to get the open web back sounds great. But I don’t know what that means.

If we don’t care about how the web works, how can we understand why it is important to own our data? Why would we try if what we can do now is so easy?

Therein lies the rub. Publishing on your own website is still just too damn geeky. The siren-call of the silos is backed up with genuinely powerful, easy to use, well-designed tools. I don’t know if independent publishing can ever compete with that.

In all likelihood, the independent web will never be able to match the power and reach of the silos. But that won’t stop me (and others) from owning our own words. If nothing else, we can at least demonstrate that the independent path is an option—even if that option requires more effort.

Like Tyler Fisher, Josh Miller describes his experience with a web of silos—the only web he has ever known:

Some folks are adamant that you should own your own words when you publish online. For example, to explain why he doesn’t use services like Quora, Branch, and Google-Plus, Dave Winer says: “I’m not going to put my writing in spaces that I have no control over. I’m tired of playing the hamster.”

As someone who went through puberty with social media, it is hard to relate to this sentiment. I have only ever “leased,” from the likes of LiveJournal (middle school), Myspace (middle school), Facebook (high school), and Twitter (college).

There’s a wonderful response from Gina Trapani:

For me, publishing on a platform I have some ownership and control over is a matter of future-proofing my work. If I’m going to spend time making something I really care about on the web—even if it’s a tweet, brevity doesn’t mean it’s not meaningful—I don’t want to do it somewhere that will make it inaccessible after a certain amount of time, or somewhere that might go away, get acquired, or change unrecognizably.

This! This is why owning your own words matters.

I have a horrible feeling that many of the people publishing with the easy-to-use tools of today’s social networks don’t realise how fragile their repository is, not least because everyone keeps repeating the lie that “the internet never forgets.”

Stephanie Georgopulos wrote a beautiful piece called Blogging Ourselves to Live—published on Medium, alas—describing the power of that lie:

We were told — warned, even — that what we put on the internet would be forever; that we should think very carefully about what we commit to the digital page. And a lot of us did. We put thought into it, we put heart into, we wrote our truths. We let our real lives bleed onto the page, onto the internet, onto the blog. We were told, “Once you put this here, it will remain forever.” And we acted accordingly.

Sadly, when you uncover the deceit of that lie, it is usually through bitter experience:

Occasionally I become consumed by the idea that I can somehow find — somehow restore — all the droppings I’ve left on the internet over the last two decades. I want back the IMed conversations that caused tears to roll from my eyes, I want back the alt girl e-zines I subscribed to, wrote poetry for. I fill out AOL’s Reset Password form and send new passwords to email addresses I don’t own anymore; I use the Way Back Machine to search for the diary I kept in 1999. I am hunting for tracks of my former self so I can take a glimpse or kill it or I don’t know what. The end result is always the same, of course; these things are gone, they have been wiped away, they do not exist.

I’m going to continue to publish here on my own website, journal, blog, or whatever you want to call it. It’s still possible that I might lose everything but I’d rather take the responsibility for that, rather than placing my trust in ”the cloud” someone else’s server. I’m owning my own words.

The problem is …I publish more than words. I publish pictures too, even the occasional video. I have the originals on my hard drive, but I’m very, very uncomfortable with the online home for my photos being in the hands of Yahoo, the same company that felt no compunction about destroying the cultural wealth of GeoCities.

Flickr has been a magnificent shining example of the web done right, but it is in an inevitable downward spiral. There are some good people still left there, but they are in the minority and I fear that they cannot fight off the douchtastic consultants of growth-hacking that have been called in to save the patient by killing it.

I’ve noticed that I’m taking fewer and fewer photos these days. I think that subconsciously, I’ve started the feel that publishing my photos to a third-party site—even one as historically excellent as Flickr—is a fragile, hollow experience.

In 2014, I hope to figure out a straightforward way to publish my own photos to my own website …while still allowing third-party sites to have a copy. It won’t be easy—binary formats are trickier to work with than text—but I want that feeling of independence.

I hope that you too will be publishing on your own website in 2014.