Introducing plug-ins for Micro.blog

I often hear from people who like the built-in designs on Micro.blog-hosted blogs, but they want to customize just one little thing about the default HTML. No problem! Because the designs are built with Hugo, you’ve been able to create a custom theme to override any template file or add new functionality to your blog. But that flexibility comes with a learning curve: it requires knowledge of HTML, CSS, and sometimes even JavaScript.

Today I’m launching a plug-ins system for Micro.blog that formalizes a lot of the power of Micro.blog themes, but wrapped in a package that is easier to develop and install. Instead of creating a custom theme for your blog and editing the templates yourself, you might be able to find a plug-in that will add the feature. Unlike custom themes, there can also be multiple plug-ins installed for a single blog.

Here are a few of the things plug-ins can do:

  • Provide a brand new design. Plug-ins are actually just special Hugo themes, so anything a Hugo theme can do, a plug-in can provide. Now web developers can create custom blog designs that are easy to install.
  • Override one or more template files in a theme. For example, changing the header or footer, or adding new CSS or JavaScript includes.
  • Add new Hugo parameters that are available in the plug-in or another custom theme. Micro.blog can even show a settings screen so that users can edit parameter values easily.

There is a new plugin.json file that a plug-in can provide to tell Micro.blog what parameters should be configurable for the plug-in. This file also includes the plug-in metadata and any extra CSS or JavaScript references.

Here’s what a plugin.json file would look like for a plug-in I wrote to provide some more control over Micro.blog’s default Photos page. Because the plug-in defines some parameters, those are available in a settings UI inside Micro.blog automatically:

Screenshot of settings

Plug-ins are available under a new “Plug-ins” tab in your blog settings. Click “Find Plug-ins” to see a list of registered plug-ins.

Screenshot of plug-ins tab

Since this is brand new, it only includes a few plug-ins that I wrote. Web developers who want to contribute a new plug-in to the directory can email me: help@micro.blog. There’s a help page here with more details about developing plug-ins.

And if you have ideas for a plug-in, let me know that too. In the past, when I’ve heard a feature request that requires a custom theme, I’d have to consider either adding that as a built-in Micro.blog feature — which might complicate the UI for everyone, even if few people wanted the feature — or I’d explain how to create a custom theme to solve it. Now, I can implement some of those requests as plug-ins.

There’s a lot more which I’ll be documenting. Having said that, Micro.blog plug-ins can’t do everything. As we learn what people want, I’d like to work with plug-in developers to iterate on this system, as well as clean up some of the built-in themes so that it’s easier to override certain behavior in a blog. Enjoy!

Manton Reece @manton
🕸💍