Introduction to indieweb

www.lewiscowles.co.uk • Techlete Ltd • @phpessex
Essex Web Developers Meetup
18th
March 2020

A bit about me
I have 17 years professional development experience.
I am interested in the creativity and engineering of others.
I am concerned about, and hostile towards surveillance capitalism.
I am paranoid about frameworks and platforms, but respect standards and openness.
I’ve been exploring IndieWeb as a personal interest.
N.B. I have not received authorization or endorsement of the information or views expressed
from the IndieWeb community. I’ve tried to keep this Lewis opinion free. I Do hope that it
meets with their approval, and I am willing to amend or iterate on it at their request.

Introductions
Let’s get introduced:
● Your name
● Your role or desired role
● What are you working on / with / learning at the moment?

A Gentle introduction to Indieweb

Agenda
● Deﬁning IndieWeb
● Getting your own website
● Silos
● Choosing what you’d like to publish
● Using MicroFormats to enhance that
● Using GitHub / Twitter to Auth via your site
● Setting up Webmentions to receive comments, likes, etc
● Sending Webmentions to others
● Displaying webmentions from others
N.B. This is My own (Lewis Cowles) Agenda, not the agenda of IndieWeb, it’s leadership or
community

Let’s get on with it

The IndieWeb is a people-focused alternative to the "corporate web".

Things I like about Indieweb
● Collaborative effort, supporting most skill-levels
● Talented, friendly people
● Encouragement of broad technology surface & approach
● Establishment of standards and tooling from a core team of subject-experts
● No attempt made to upsell or force ideas
● Events and a Wiki
● A cool, powerful chat-bot Loqi
● Lots of examples and inspiration
● Supportive ethos

Great right?

Getting your own website
● Multiple providers with managed, self-hosted & shared-hosting
● Choose a plan that ﬁts your skill-set and interest level
● Make sure your provider supports the type(s) of content you plan to publish
● Familiarise yourself with their documentation, and related resources
I Chose self-hosted, but I’ve been through the mill from my own custom CMS projects
to popular platforms such as WordPress, and then onto Jekyll. I’m currently publishing
static HTML manually in a “manual until it hurts” mindset as it gives me the most
technical control, which is something I enjoy.

Getting your own website

Who Remembers MySpace?
Within IndieWeb all third-party
service-providers are referred to as Silo’s
In exchange for some content-creation tools
and free hosting; they make YOU the product
they sell.
What is a Silo?

POSSE: Publish [on your] Own Site, Syndicate
Elsewhere
Some approaches to cross-posting
PESOS: Publish Elsewhere, Syndicate [on
your] Own Site
https://indieweb.org/cross-posting

Linking to External silos

Linking back from Silo’s to your site
● Usually found in settings
● Try to pressure sites to offer rel=“me”
● Check using https://indiewebify.me/
● Ensure you are matching protocol, www and
path
○ http or https. pick one
○ with www or without. pick one
○ unless you plan on making a page per-silo, try to
settle on with / or without

Choosing what you’d like to publish
● Micro-blogs like twitter & Facebook
● Locations like foursquare
● Article form blog posts, tips & tutorials
● Code snippets
● Links, mentions & interactions
● Photos
● Videos
● Audio
● Reviews
● Authorship information

Authorship
(This is the most minimal example)
https://indiewebify.me/
https://indieweb.org/authorship

● Basic non-comprehensive example
● Each article has a class h-entry
● Using HTML <time> to markup
original publish date
● Each link doubles
○ as a name
○ as a url
● Speciﬁc tags used, other than
anchors are not important, but
rather my personal choice.
https://indieweb.org/microformats
http://microformats.org/
My own site blog listing 
<article class="h-entry">
<time class="post-date dt-published"
datetime="2020-02-16">
<span class="year">2020</span>-<span
class="month">02</span>-<span
class="day">16</span>
</time>
<a class="u-url p-name"
href="/blog/the-meanings-of-words/"
>The meanings of words</a>
</article>

datetime="2020-03-17">
</time>
<a class="u-url p-name"
href="/blog/keep-on-keeping-on/"
>Keep on keeping on</a></h1>
</article>

Using Silo’s to verify / attest to ownership
Standards have been created by members of
the indieweb community
Most use existing
technologies, such as
oauth
Using Silos to auth via your website
I use a service called
IndieLogin to be able to
publish to my site, which
works with Static HTML

Linking to External silos
(On your website have one of these linking to your silo)

Authenticating via IndieLogin.com

Signing in via Auth endpoint
(It’s oauth)

See conﬁrmed login
https://www.w3.org/TR/indieauth/

Getting your own instance
Pending upstream merge or using my branch

Interactions with others Independent
websites using shared speciﬁcations for
common interactions
Comment💬
Webmentions
Like❤
RSVP📆
Bookmark🌟

To receive on your site
(This is a minimal example)
https://indiewebify.me/ - test
https://www.w3.org/TR/webmention/ - spec
https://webmention.io/ - register

● Basic non-comprehensive example
● Within an element with class h-entry
● Providing a like and a comment
○ class=“u-like-of”
○ class=“p-summary”
● Speciﬁc tags used, other than
anchors are not important, but
rather my personal choice.
Webmention markup

<main>
<a class="u-like-of"
href="https://cheuk.dev/2020/03/15/indie-webm
ention/"
rel="nofollow"
>Check out Cheuk awesome post</a>
datetime="2020-03-15">
</time>
<p class="p-summary">
Hi Cheuk. Welcome to WebMentions
</p>
</article>
</main>

To send to a site
(This is a minimal example)
https://indiewebify.me/ - test the site you’re mentioning supports
https://www.w3.org/TR/webmention/ - spec
https://webmention.io/ - register your site

To Display on a page
(This is a minimal multi-domain example)

Caution when using webmentions

Join us!
https://chat.indieweb.org/slack

Thank you!
www.lewiscowles.co.uk

Introduction to indieweb

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Introduction to indieweb

Semelhante a Introduction to indieweb (20)

Último

Último (16)

Introduction to indieweb