✉️ How, and Why, I Use Micro.blog

A friend of mine, Simen (who has a nice, Norwegian blog), asked me about Micro.blog. That’s where this blog is hosted, and is also a social medium of sorts.

His questions

First, I want to give quick answers to the questions he had – and then go into more detail on how I’ve set things up.

1) “Which tier do you use, and why?"

Micro.blog has several tiers:

When I signed up, they only had the $5/month and $10/month plans. And I don’t quite remember what made me require the Premium plan – but things has been restructured now, so I could probably make do with one plan lower. If my friend wants to move to Micro.blog, we could go for a Family plan. 🫶🏻

I don’t find any value in things like notes and bookmarking, as I’d much rather use dedicated tools for this. I also don’t really use the newsletter feature – so I can’t really comment on that.

2) “Which features do you appreciate the most?"

I like the cross-posting features and robust ActivityPub support. For instance, the comment feature here is neat:

I also like that there are great option for third-party apps for publishing, like Ulysses, Drafts, and MarsEdit.

And I find that the platform has a good balance between being easy enough to use, while also being powerful and flexible enough to form into what I need. An example of the contrary was how I couldn’t find a way to have WordPress have a front-page with the start of my blog posts like I have now. (I’ll go into how I’m doing that later.)

3) “How is it different from the alternatives?"

Before I tried WordPress, my blog was on Write.as. However, that was too simple, and not expandable enough. With Micro.blog I can freely add features via Javascript, for instance. (Examples below.) And it also has a plug-in system (even though it’s far from as powerful as WordPress in that regard).

I know that Simen uses Quartz, which I also use for my band’s website. This is a nice static site generator where you, for instance, can simply “push” an Obsidian vault. However, this doesn’t have integrated newsletter support, doesn’t support ActivityPub, and doesn’t have cross-posting (among other things).

4) What’s missing? Or is too clunky?

One thing Quartz is better suited for, though, is digital gardens. Micro.blog is absolutely built around traditional, chronological blogging.

I also find uploads to be very clunky, when I don’t do it through Shortcuts. I can only upload one file at the time – and there’s no way, even in the … menu, to copy just the URL to the file. (I have to carve it out from the HTML or Markdown.) 👇🏻

The ActivityPub posts that Micro.blog push, for the long-form posts, are also very lacklustre, IMO. Just the title, and link to the post:

And I don’t like the social media part of the service – which I’ll get into next.

However, I’m generally delighted with the place I’ve gotten this blog!

My use, and how I got there

I’m largely a total novice when it comes to web stuff. So setting up this blog has been a way for me to learn. I’ve gotten a lot of help from LLMs – but I don’t want to go full vibe coding: I want to understand so I learn.

Social media

One can use Micro.blog as a social media, like Mastodon. However, I find having conversations and consuming much better via one of the terrific third-party Mastodon clients, compared to Micro.blog. The new Micro Social app improves it for iOS, but still…

So I just use the timeline and conversations sparingly.

Theme

My theme is a highly edited version of the Tiny theme, by Matt Langford. The CSS is written totally from scratch by me – but I take advantage of the framework for Microhooks. Check out his newer themes, Sumo and Bayou!

I’ll touch on things I’ve added to the theme in the next section.

Plugins and JS

I’ve expanded the features via native plugins, custom forks of plugins, and some javascript.

Glightbox

Check out this blog post for details on my photo workflow. It’s based it on an edited version of a Glightbox plugin. And code for an image looks like this:

<div class="lazy-placeholder medium"
	style="background-image:
		url(https://havn.blog/uploads/2025/cleanshot-2025-04-04-at-14.39.372x.png);">
	[{<glightbox src=
		"https://havn.blog/uploads/2025/cleanshot-2025-04-04-at-14.39.372x.webp"
		alt="Explained above."
		title="" description="" >}}
</div>

I use a shortcut that

1. Asks me to select an image,
2. prompt me for alt text,
3. creates a lazy loading version and webp version,
4. uploads them to Micro.blog,
5. and then spits back the code above.

Tinylytics

The site uses Tinylytics, via a Micro.blog plugin. As previously mentioned, I’m firmly in the writing into the void phase of blogging. So just knowing that someone is visiting the site is very nice. ☺️

Open Graph Cards

This is another plugin I have, that, I think, makes the links I share to posts look better.

Summaries

I’ve adjusted the Summaries add-on to the Tiny theme. In short, this allows me to add a shortcode in my posts: <!--more--> Only things up to that code will be shown on the front page, and a Read More button is added at that point. I love this flexibility.¹

Barefoot

Footnotes, like the one above, are made via a Barefoot plugin that I’ve customised a bit. However, I haven’t made it work inside the summaries on the front page. 😕

These, and links, are my favourite parts of my, admittedly kind of extra, CSS code and animations. I am a bit ashamed that my links can go over more than one line, though…

Highlight.js

This is what I use to get syntax highlighting on code.

hr {
    display: flex;
    justify-content: center;

    margin: var(--margin-line) 0;
    border: unset;

    &::before {
        display: block;
        content: "";

        height: var(--thickness-line-1);
        width: clamp(8rem, 5.6rem + 10.667vw, 12rem);
        background-color: var(--mid-blue);
        border-radius: var(--radius-1);
    }
}

Lite-youtube-embed

This is what I use to make YouTube embeds liter. Explained more in this blog post.

Soundcite

I use Soundcite to create clickable sound bites like this.

<span class="soundcite" data-url="https://havn.blog/uploads/2025/nice.mp3" data-start="0" data-plays="1">this</span>

Other JS

I also have some Javascript for a couple of features:

• The reading indicator on single posts,
• the back-to-top arrow,
• and lazy loading of images.

Other CSS features

A couple of “features” are made only with CSS + HTML:

I’m using <figcaption> to indicate captions – which are then styled.

I’ve also created a mobile version of the galleries, which I’m quite happy with. And I’m using something similar to get scrolling on wider tables.

I’m using this styling for quotes.

— Me

Micro.blog doesn’t have a built-in feature for anchor links – but I can link to headings (and other stuff with IDs) manually, like this.

I’ve also recently added support for kbd and samp elements for keystrokes and computer inputs and outputs instead of using code.

• So a keyboard shortcut could be like this: Command + A
• And selecting a menu item can be like this: Edit → Select All

Lastly, I have a couple of hidden categories – for instance English and Norwegian, for “proper” blog posts in that language. My front page here is only those I mark with English, and it’s also so people can subscribe to the RSS they want. However, I don’t want it to say “English” at the bottom of every post. So I don’t recommend subscribing to the main RSS feed. Instead subscribe to the English and/or Norwegian feed. I want to see if I can find a way to not serve that main feed – as that would feature micro posts and both languages. I also always first post without the language tag. Because then I can fix problems before pushing to RSS and the front page.

Markdown

As the sicko I am, I have the following workflow:

• All my Markdown files (notes, tasks, blog posts, and more) are located in NotePlan’s iCloud folder.
• However, I mostly edit them with Paper.
• And I proofread and publish with Ulysses.
  • I’ve added NotePlan folders as external folders.
  • I use keywords to create file posts into categories on Micro.blog.
  • Ulysses also knows whether a post should be created or updated.
  • I also use it to create tables.

I have a shortcut for creating new blog posts:

1. This asks for a title,
2. gives it title case,
3. creates a file in my drafts folder,
4. and opens the file in Paper.

I like that I simply edit the same file in all three programs, and that I can use whichever device I want.

Footnotes, tables, quotes, and more, are simply native Markdown. However, some things use HTML – like galleries, captions, callouts, and more. There are two main ways I make reproducing this easier:

1) Raycast 🖇️

Some snippets are saved in Raycast. For instance, typing ,sc gives me the code for Soundcite.

I also have an AI command that turns the selected Markdown text into HTML. For instance, I’ll use this to format text inside a callout.

2) Popclip

If I have text selected, and hit Hyper + M, I get this menu:

From left to right:

1. Wraps selected text in <figcaption> </figcaption>
2. Wraps selected text in <div class="callout"> </div>
3. Wraps selected text in <strong> </strong>
4. Wraps selected text in <em> </em>
5. Wraps selected text in <p class="lyric"> </p> (used for my band’s website)
6. Wraps selected text in <a href=""> </a>
7. Wraps selected text in <kbd> </kbd>
8. Wraps selected text in <samp>.</samp>
9. Changes select text to Title Case

Issues

Mostly, all of this interoperability works great. Ulysses detects HTML, and wraps it in something it calls Raw Source, so it gets passed properly to Micro.blog. However, an annoying bug makes it so <!--more--> needs to be added later. (It’s also annoying that Ulysses needs 4 dashes to create an hr.)

Furthermore, the data Ulysses uses to know whether to update a post or publish it as a new one, is stored locally. So I can’t publish a post from my iPhone and then update it on my Mac. This has to be done from the same device.

I think all of this would’ve been fixed if I only used Ulysses (and stored the files in its library) – and that’s generally what I would recommend to others, hehe.

In general, though, I love my setup. It’s crucial that the friction be at an absolute minimum: Especially when it comes to creating new posts, adding images, and publishing. And I can do it all in excellent apps! 👌🏻

In addition to being a fantastic place to dump some of the things on my mind, this site is also a great playground for learning. It’s also a nice bonus that Micro.blog is a smaller player, trying their best (even though they’re not perfect) to make the web a better place.