As we all know you can embed a Twitter timeline in your website like this:

A Twitter timeline

You can also embed a Twitter post like this:

A Twitter post

However, there is no official way of embedding a Mastodon timeline. At most, you can embed a specific Mastodon post like this:

A Mastodon post

This just embeds a specific Mastodon post instead of dynamically grabbing the latest posts. Also, this embed requires JavaScript on the client side, which I have been trying to avoid. Another downside of this embed is that it does not have a light-theme version.

Thanks to Mastodon’s API, the community implemented various ways of embedding Mastodon timelines or posts. I then decided to develop my own way of embedding Mastodon posts. Here was the roadmap:

  • The home page of my website shows my latest Mastodon post.
  • It should be rendered server-side, without the necessity of client-side JavaScript.
  • Blend the post in the webpage with a style consistent with rest of the webpage.

How do I ensure the embedded post is always the latest one if it was rendered server-side? This means I have to somehow trigger the building and deployment of by website automatically whenever a new Mastodon post is created. Thanks to the Huginn instance deployed on my self-hosted server, I can monitor my Mastodon account and trigger a GitHub Actions workflow whenever there is a new post.

Here is then the idea of implementing the roadmap:

  1. On the Jekyll side:
    1. Write a Jekyll hook at :site :after_init that reads the RSS feed of my Mastodon account to get all information I need.
    2. Write a Liquid template that can be populated with the collected information.
    3. Include the Liquid template in the home page of my website and write some SCSS to style it.
  2. On the GitHub side:
    1. Use GitHub Actions to build and deploy on GitHub Pages and make the GitHub Actions triggered by workflow_dispatch.
    2. Create a GitHub personal access token. It will then be used to trigger GitHub Actions through REST API.
  3. On the Huginn side:
    1. Create an agent to monitor the RSS feed of my Mastodon account.
    2. Create an agent to send HTTP requests to invoke GitHub’s REST API. It receives events from the first agent and triggers the GitHub Actions workflow.

Great! Now, my website can show my latest Mastodon post on the home page.