Skip to main content

My quick thoughts, back stage, and rants as I try to Teach kids about the Web while learning how to help others build a better Web.

IndieWebRing

Come Journey Through the IndieWeb Sites

🕸💍

Greg McVerry

I accidentally built a free blog on @glitch for the #newwwyear challenge

5 min read

I wanted just a couple of static pages, but ended up with a fully functional blog on @glitch

When Tantek posted about the challenge I knew I wanted in.

I had just launched a 100 day challenge to move my site from WordPress. I wanted to simplify. I am also trying to learn CSS Grid. I wanted to grow

The challenge provided me an opportunity to work on both goals. Double dip my challenges if you will (I failed on the 100 day challenge).

My thinking was a static site for content I consider canon and using Known, where my journey started, for my social stream

The Accidental Blog

To layout my blog I turned to Glitch, I had a bit of a heads up on the demise of Thimble and I needed a new home to code. I don't use Terminal and prefer to make websites in the cloud where the sun can peek through on my understanding. Basically, my learning gets scafolfded.

So I made a Staging site with just a homepage and a few other pages. Then I thought, I should make pages for my long form articles and other HTML projects. Sometimes I need a blank page and get stuck in the CSS of my CMS

So I styled up a long-form article page and thought while I am at it I should add the proper microformats that get utilized by cool tools. It only took me adding five classes to some HTML elements

Use Microformats

You stick an h-entry on the entire post, on the body, main, or article element usually. This includes a title, a summary, and an h-card for the author. An h-card is the business card. It contains a name, url, and stuff like a photo.

<article class="h-entry">
  <h1 class="p-name">Microformats are amazing</h1>
  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
     on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p>
 
  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
 
  <div class="e-content">
    <p>Blah blah blah</p>
  </div>
</article>

Add a Four Links

I added two links to my header, One is a webmention endpoint and the other an inideauth endpoint. The webmention endpoint means I can collect comments. I did not have to do anything but signup at webmentions.io. To sign up I needed to login and thie required the IndieAuth endpoint

Many sites have an IndieLogin feature meaning get to sign in with nothing but your domain. This uses a protocol called IndieAuth and all you have to do is add a line of code to your website. If you have a link back to your website on a tool like GitHib that requires authentication you will be asked to sign in with GitHub. This works because on your website you have a link to GitHub with rel="me" and a link on GitHub back to your blog. The IndieAuth serves know that you are you.

<link rel="webmention" href="https://webmention.io/jgmac1106homepage.glitch.me/webmention" />
<link rel="pingback" href="https://webmention.io/jgmac1106homepage.glitch.me/xmlrpc" />
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
<link rel="token_endpoint" href="https://tokens.indieauth.com/token">

It Just Worked

I didn't realize it but it just worked. My blog started showing up in people's readers, they were subscribing to my the feeds...on what I thought of as kind of my staging server. I started to receive webmentions.

So I kept going I built an h-feed for podcasts, and video playlist (Bonus I connected to https://archive.org to host all my media), a resume and a following page. They all just work.

I truly understand how microformats can power the social web. You just stick five classes into your HTML and four links in your header and any website gets connected to the social web.

What is Next?

Maybe I keep going. I could layout an h-feed for my photos and add a photo post template, I could do the same for notes, likes, and reads, and watches..all the post types...Should I?

I could learn to display and not just collect webmentions. Can I?

My goal was to get a few pages up on a static site and not worry about everything else.

I had no idea not worry about everything else and doing it yourself was so easy.

Now I say, easy with the caveat of people who can write HTML. Yet I take people every year who have never been online on their own site and they can build websites in a semester. 

Can I build the lightest weight blogging platform for my students on @Glitch? Here is the thing. I think I could. Wanna help?

 

CLMOOC

Prev | Home | Join | ? | Next