Avatar of Matt Moriarity
Matt Moriarity

mattmoriarity.com

This site is one of my projects. I started it at the beginning of 2018 when I started microblogging. The idea is that instead of posting to Twitter directly, I write things here, and have some software crosspost to Twitter.

The site has gone through several generations of implementations, though the content has been carried forward as I transitioned between them.

  1. Wordpress + several microblogging-related plugins
  2. A completely homegrown static site generator running on AWS Lambda
  3. Gatsby + some adaptations for microblogging
  4. Gatsby + Sanity.io, with new implementations of my microblogging support

The current generation is largely a pretty typical Gatsby blog, but there are some things about it that I think are interesting.

Sanity.io

Most statically-generated sites tend to keep the content in the repository with the code that generates the site. The original Gatsby version of this site did that too, and I used it that way for about a year. At some point I learned about Sanity.io, a headless CMS that seemed to be designed for static site systems like Gatsby.

Sanity.io is basically an API for structured documents, along with an open-source React-based CMS that you customize and then deploy yourself. I defined a schema with different document types for the kinds of content I want to create on this site. Based on that schema, Sanity gives me a CMS that's built for editing my site's content. I'm extremely impressed by it.

With everything in a structured format, it's really easy to query for my different posts and pages from Gatsby in order to generate my site exactly how I want it.

Micropub support

Most of my posts to this site are tweet-style posts: one-off thoughts that I don’t spend a lot of time constructing. I want to be able to easily fire these off, similar to how I might write a post on Twitter if I still did that. To do that, I’ve been using the super useful app Drafts on my iPhone to write up these posts. I have an action in Drafts that uses the Micropub API to create the post. I’ve been doing this since Generation 2 of the site, so when I converted to Gatsby, I wanted to reimplement this feature.

I'm now on my third version of a Micropub API for this site: I've had to redo it each time I changed the backend for the site. The current version is written in Go and deployed with ZEIT Now. It receives Micropub API requests, and then uses Sanity's HTTP API to update the site's content. It can even translate Markdown text into Sanity's Portable Text format. Once the content is updated, it uses a Netlify build hook to trigger the site to rebuild with the new content. It's working great so far, but if it ever does have issues, I've instrumented with OpenTelemetry tracing which exports to Honeycomb, which is by far my favorite way to debug issues in server-side code.

I like this a lot better than my previous Micropub implementation, which had to create or update text files in Git in order to update the site's content. Being able to work with my posts as structured data is much easier to reason about. And since Sanity manages my image assets now, I don't need to use Git LFS to store them, simplifying my builds and other Git workflows.

Webmentions

This site doesn’t use a typical commenting system. Instead, I only support webmentions, an open standard where someone can reply to (or repost, or like, or bookmark) a post on a site by making one on their own site. As a bit of a shortcut, Micro.blog will send webmentions for replies within its system. This makes it trivial to do Twitter-like replying in an IndieWeb-friendly way.

I like displaying these mentions on my site. In Generation 2, I implemented support for receiving webmentions myself. For the Gatsby versions of the site, I decided to use Webmention.io for this and cut down on how much data I was responsible for handling by delegating to another service.

The static rendering of the site doesn’t include any information about webmentions, since that data would get stale very quickly. Instead, the React components that render the posts have dynamic effects that only occur when they run in the browser. They get the latest mention counts or mention data from Webmention.io and update the page client-side. It’s not too different to how Disqus embeds comments in a static page, although it’s much more lightweight. Gatsby makes this incredibly easy to do: I wrote this exactly how I would in a traditional React webapp, and it worked exactly how you would expect.