Building a custom homepage for micro.blog

I spent the last days building a custom theme for my blog.

You can find the source on GitHub.

It is based on the Hyde Theme and the modifications Manton made for micro.blog.

I am pretty happy with how it turned out. What du you think? You can find some details about what I created below.

Features

Separate between posts and microposts

I wanted to separate between long blog posts and microblog posts. While I could use micro.blog categories for that I didn’t want to remember to tag every microblog post with a special category, especially because Icro, my preferred iOS client, does not support categories at all.
I created three categories, Blog, Microblog, Photo. Micro.blog can tag every photo automatically, but unfortunately you can’t set a default category. That’s why I overwrote the layouts/categories/category.html template. This checks if the current category is microblog and renders every post in a special micro-format (defined at layouts/post/micro.html). Other categories render only posts that are tagged with the category. For Hugo to create the /categories/microblog/ page I needed to tag at least one post with that category.

Theme adjustments

I also made a few adjustments for the theme.

Avatar image in sidebar

I wanted to make the theme a little bit more personal. That’s why I added a small avatar to the sidebar.

Dark mode support

If you are running Safari on macOS the site will either show you a dark or light theme, depending on your settings.

Switching between the light and dark theme using your macOS preferences

Notch support

I alsp edited the css to include the notch on iPhone. Here is how it looks like.

The sidebar respects the notch on iPhone X style phones

Conclusion

I used a lot of hacks to get the theme like I wanted to. I don’t feel proud for all of them but at least it works. Feel free to check out the theme on GitHub, modify it or use it as is for your blog. I plan to expose a few more settings to the config.json file to make it easy to adopt the theme for your needs.