Today, I enter the IndieWeb

Today I updated my personal website. If you ever visited it before, you may think that nothing has changed. And you'd be right, visually not much has changed since I created it, just some links here and there.

I know my website may look simple, barebones, or some may say... ugly, but I like it that way. Also, I'm very proud that it supports light / dark theme based on your system preferences. And more importantly, it has this feature that I'm sure yours doesn't.

So what's the IndieWeb? It's a way to use your own website as your entire online presence. You can set it up as your personal business card of sorts, and even log in into services with it, which is just mind blowing.

h-card

The first thing you'll probably want to do is set up your profile. How can you do it? You have to add an h-card to the index page fo your website. Here's mine:

As I mentioned earlier, visually nothing has changed in my website, and that's partly because there's no minimum data requirements to build your h-card. My website had the exact amount of data I wanted to share.
Since the IndieWeb focuses on humans first, machines second, they are against hiding content.

The h-card is about defining metadata about you, and the way you do it is adding classes to DOM elements. There are a lot of properties you can use to present yourself. The IndieWeb respects how you want to publish your content and that includes you personal information, that's why there's no defined structure to build your h-card.

Here are some h-card examples, of varying complexity:

<span class=h-card>Mario Nachbaur</span>

<div class=h-card>
  <span class=p-name>Mario Nachbaur</span>
  <span class=p-nickname>marionauta</span>
  <p>I am a full stack software developer that likes
    <span class=p-category>Rubik Cubes</span>.
  </p>
</div>

<div class=h-card>
  <a class="p-name u-url u-uid" href=https://mario.nachbaur.dev>
    Mario Nachbaur
  </a>
</div>

You can go to my website and check out how I configured my h-card (secondary click, view page source). The website is very simple and the source it's easy to read.

IndieAuth

This part is what wowed me the most. The fact that there are online services that allow you to sign up and log in using your website (remember, your website is your identity) is amazing. And the process to set it up couldn't be easier. Just have links with rel=me between your profiles in various web services.

Sadly, there aren't that many services that support it, and I don't think that I'll be using it that much, but the fact that I can do it is incredible. I will consider adding IndieAuth to the next project I build.

The cost vs. the fun

The only requirement to use the IndieWeb is owning a domain name, and host a website. Yes, domain names cost money and the hosting for the website too (unless you use a free service). That said, I think the cost is justified with the concept of the IndieWeb, owning your data, content and so on. The whole idea has The Matrix vibes to it, avoiding silos, that I enjoy.

If you already own a personal website, you don't loose anything trying it. In fact, you'll gain a couple of hours learning an interesting format. I promise it's worth it!

Lastly, thanks to Kev whose post inspired me to enter the IndieWeb, and to Brian, who explains really well the h-card format.