I wanted just a couple of static pages, but ended up with a fully functional blog on @glitch
I had just launched a 100 day #IndieWeb challenge to move my site from WordPress. I wanted to simplify. I am also trying to learn CSS Grid. I wanted to grow
The #newwwyear 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 #indieWeb 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 #IndieWeb tools. It only took me adding five classes to some HTML elements
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 #indieWeb 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 #IndieWeb 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.
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?