#architecture
-
A Brief Intro to My Website Architecture
This is a description of all the pieces and tools that I use to post to my website and handle comments and responses. Many of the pieces are open source and/or based on open protocols that you can implement yourself.
Writing
I write posts using an app called Quill. It's an open source application that I wrote. I run a hosted version at quill.p3k.io, and you can run it on your own server if you want as well. Quill provides an interface for posting longer blog posts with embedded images like this, as well as short text notes, and a handful of other kinds of posts like bookmarks.
Quill doesn't actually store any posts itself. It is just an interface for writing posts.
When I click the "post" button in Quill, it sends a Micropub request to my own website, which then creates the post and displays it on my website. Micropub is an API standard for creating short notes and posts, and it supports photos and videos too!
You can start using Quill if your website supports Micropub. There are some Micropub plugins for various CMSs, and it's also not too hard to write an endpoint yourself if you're into that sort of thing.
Posting to Twitter/Facebook
I never write posts directly on Twitter or Facebook. Instead, I write a post in Quill, and then check the boxes for where I want to syndicate the post.
Providing the text for the buttons is a feature of Micropub, but the actual posting to Twitter and Facebook is done through a tool called silo.pub. Silo.pub exposes a Micropub endpoint for many services, as a way to avoid writing silo-specific code. My server can simply make a Micropub request to the silo.pub endpoint and silo.pub creates the post using the Twitter API. Silo.pub is open source, and is written by Kyle Mahan. I run a copy of it on my server for my own use.
My Website
My website CMS is called p3k. It's not open source as a whole, although I have open sourced many of the components that are used to create it. At some point I might open source the whole thing, but when I do, I want to make sure I've built an easy installer for it, as well as a clear path for rolling out updates.
When Quill makes the API request to my website to make the post, it's handled by the Micropub endpoint that is built into p3k. The Micropub endpoint receives the Micropub request, writes the post to the storage file, which is then rendered on my website.
Comments and Responses
On many of my posts, you'll see comments and other responses. However there is no comment form on my site! Every comment or "like" is actually posted by someone else on their own website, and they sent a Webmention to my site letting me know about it.
Sending a Webmention is just a simple POST request to my Webmention endpoint, with the two URLs in question: the page that links to me, and which of my pages it links to.
My Webmention endpoint is actually a separate service that is open source, and you can use it too! It's at webmention.io or you can install your own copy. Once you sign in, it will give you instructions for adding the endpoint to your site. Basically you just paste an HTML tag into your website header, and that tells Webmention senders where to send the Webmention.
When the endpoint receives a Webmention, it first verifies that the link exists, and then it extracts some data from the web page. It looks for a Microformats 2 h-entry on the page, which tells it where to find the author data, comment text, date, and other properties. This part of the process is also broken out as a separate service I wrote, called X-Ray. You can use the test tool at xray.p3k.io to check what it finds at your own blog's URLs, in order to see what will show up when you send me a Webmention. X-Ray is open source and you're also welcome to use the service or install it yourself.
Social Media Responses
Since I copy my posts to Twitter and Facebook, I also want to know when people comment or "like" my posts there. There is a fantastic tool called Bridgy, written by Ryan Barrett that helps with this. Once you connect Bridgy to your silo accounts, it will watch when people respond to your posts, and create "proxy" web pages with Microformats markup for each response, and then send you Webmentions.
This means you don't have to write any special code for handling responses from Twitter/Facebook/etc, as long as you've written code that handles Webmentions and the various kinds of h-entry Microformats posts!
Further Reading
If you've made it this far and want more, here are some more links to get you going!
- The IndieWeb home page
- More about Microformats
- Micropub test tool
- Webmention test tool
- The IndieWeb weekly newsletter
- Come to a Homebrew Website Club!
- Join the IndieWeb chat! (Slack & IRC)
- The IndieWeb home page
