Setting up Indieweb Homepage

Remember microformats? Me neither! Back when the web was open and we were trying to find ways to interconnect independent things? Let’s bring them back!

Steps: Simple

Get a domain
Host your own site on it
On the index page, create an h-card
Inside of that h-card an identity markers.
That’s it.

Example

You should replace this stuff with your own. Check out the standard’s documentation for more details.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="h-card">

  <h1 class="p-name">Will Schenk</h1>
  <img class="u-photo" src="photo" width="300">

  <p>
    I work at
    <a href="https://happyfuncorp.com" class="p-org">HappyFunCorp</a>
    where I am a
    <span class="p-job-title">software craftman</span>
  </p>

  <p>
    <ul>
      <li><a href="https://willschenk.com" class="u-url u-uid" rel="me">Will Schenk</a></li>
      <li><a href="mailto:wschenk@gmail.com" class="u-email" rel="me">wschenk@gmail.com</a></li>
      <li><a href="https://twitter.com/@wschenk" rel="me">Twitter</a></li>
      <li><a href="https://instagram.com/wschenk" rel="me">Insta</a></li>
      <li><a href="https://linkedin.com/in/will-schenk-420266" rel="me">LinkedIn></a></li>
    </ul>
  </p>
</div>

You should obviously replace that information with your own.

Testing

After you deploy, the easiest way to test is to go to https://indiewebify.me/validate-h-card/

So do that.

But lets build a simple tester so we can see how to interact with it.

1
2
3
4
$ mkdir indieweb
$ cd indieweb
$ npm init
$ yarn add microformat-node node-fetch

Then create index.js to pull it down and print it out:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const fetch = require( 'node-fetch' );
const microformat = require('microformat-node');

(async () => {
  const page = await fetch( 'https://willschenk.com' )
  const text = await page.text()
  const info = await microformat.get({html: text})

  console.log( JSON.stringify( info ) )
})()

And you should see the nicely parsed information! Now what to do with this all!