Today, I enter the IndieWeb
Tags: indieweb, webdev, html
Published: 2020-04-12 16:38:07

Today I updated my personal [website][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][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:

![My very own h-card](https://dev-to-uploads.s3.amazonaws.com/i/57r3hcj1xiil0v1ulu32.png)

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][principles], they are [against hiding content][invisible-metadata].

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][h-card-properties] you can use to present yourself. The IndieWeb respects [how you want to publish your content][design] 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:

```html
<span class=h-card>Mario Nachbaur</span>
```
<figcaption>This one's probably the bare minimum</figcaption>

```html
<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>
```
<figcaption>I use p-category to tell people about my hobbies</figcaption>

```html
<div class=h-card>
  <a class="p-name u-url u-uid" href=https://mario.nachbaur.dev>
    Mario Nachbaur
  </a>
</div>
```
<figcaption>You can use multiple properties in a single element</figcaption>

You can go to [my website][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][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][silo], 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][h-card-format]. I promise it's worth it!

---

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

[website]: https://mario.nachbaur.dev
[indieweb]: https://indieweb.org/
[principles]: https://indieweb.org/principles
[invisible-metadata]: https://indieweb.org/antipatterns#invisible_metadata
[design]: https://indieweb.org/design
[h-card-properties]: http://microformats.org/wiki/h-card#Properties
[indieauth]: https://indieweb.org/IndieAuth
[silo]: https://indieweb.org/silo
[h-card-format]: http://microformats.org/wiki/h-card
[kevq]: https://kevq.uk/implementing-the-indieweb-into-my-website/
[randomgeekery]: https://randomgeekery.org/2020/04/11/indieweb-h-cards/