An excellent improvement to Micro.blog was announced last month. The addition of custom templates via the implementation of the Hugo framework makes hosted blogs endlessly customizable.1 The easiest way to get started is to clone an existing theme from an account’s design page and use the existing structure to change just about every detail of a hosted blog. It’s really quite remarkable how much control @manton has added by switching the build engine to Hugo.

Hugo Templates

I’ve been reading through the Hugo docs in my spare time this last month and I’ve made a few notes along the way which I thought I would share. First, here’s a list of the template file names used by the average Hugo theme:

static/css or static/assets/css: the folder where the CSS file for a theme will be found. This is where most (if not all) customizations are made.
layouts/list.archivehtml.html: the page to make adjustments to the blog archive.
layouts/_default/baseof.html: provides the main structure of every page served by a blog.
layouts/post/single.html: provides the layout for every post.
layouts/_default/single.html: provides a backup layout to load when layouts/post/single.html fails or doesn’t apply.
layouts/post/summary.html: provides the layout for the individual posts listed on a blog’s front page.
layouts/index.html: provides the pagination structure of the front page.
layouts/_default/list.html: builds the front page of a blog based on an index of the individual posts’ summaries.

Get to Theming

It’s not hard to clone an existing theme and personalize just about every aspect of it. In the account page, Navigate to Posts then Design and Edit Custom Themes. From there clicking on New Theme will prompt you for a URL of a Hugo Github repo to clone. Micro.blog themes can be found here. If you want to be more adventurous you can clone any Hugo theme and follow the instructions from this video by Manton.

From here it’s just a matter of digging into the CSS file to make your blog look any way you like. I used the Arabica because it’s very simple and I really like the pop up footnotes2 which are implemented through Javascript that’s beyond my knowledge but I don’t need to know because it’s built into the theme.

Basic changes to CSS can make a big difference in the overall look of any site. Start with text adjustments like font, colors, size. You can chose a Google font, copy one line of code to your partials/head.html file. The Google fonts site walks you through the process but the link looks something like this <link href=\"[fonts.googleapis.com/css](https://fonts.googleapis.com/css?family=FONT+NAME)\" rel=\"stylesheet\">. Once you put the link into your head file, set the font for the body tag or headings in your CSS file. In Arabica a Google font is already loaded so all you have to do is change the name of the font linked and change the CSS file accordingly.

Next you can make the font color lighter for ease of reading or pick something colorful just so you can remake a late 90’s Geocities look. Change the sizes of the Headings (h1, h2... h6 tags) to your liking. Or change the style of your header to make it smaller and left aligned. Here are some CSS selectors in Arabica to get you started:

.blog-title: class for the main title of your blog. Mine is uncrtn blog.
.blog-description: class for the link to your Micro.blog timeline.
.nav: class for pages linked in the header.
.post: class for the body of a post.
.site-footer: class to edit your blog footer.

Some Marfa Additions

Lastly, as part of my ongoing theme edit I copied some stuff over from the Marfa theme into my Arabica based theme.

Search Field

For a Marfa-style DuckDuckGo search insert this code into the CSS file:

 #search input.field {
    width: 600px;
    height: 2rem;
    font-size: 0.777rem;
    font-weight: 300;
    padding-left: 1rem;
    border: 1px solid #eee;
    margin: 1rem auto;
    border-radius: 9px;
    -webkit-appearance: none;
}

And add this to the layouts/partials/footer.html file:

<form method=\"get\" id=\"search\" action=\"[duckduckgo.com](https://duckduckgo.com/)\">
    <input type=\"hidden\" name=\"sites\" value=\"%20%22/%22%20%7C%20absURL%20\"/>
    <input type=\"hidden\" name=\"k8\" value=\"#444444\"/>
    <input type=\"hidden\" name=\"k9\" value=\"#ee4792\"/>
    <input type=\"hidden\" name=\"kt\" value=\"h\"/>
    <input class=\"field\" type=\"text\" name=\"q\" maxlength=\"255\" placeholder=\"Search…\"/>
    <input type=\"submit\" value=\"Search\" style=\"display: none;\" />
</form>

For a Marfa like avatar and timeline link at the bottom of your posts add this to your CSS file:

 #post-meta {
    font-size: 13px;    
    font-weight: bold;
    line-height: 1.5;
    border-top: 1px solid #eee;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 60px;
    border-bottom: 1px solid #eee;
    display: block;
}
 #post-meta div span {
    color: #212121;
    font-weight: 500;
    display: block;
}
 #post-meta a {
    color: #000;
}
 #post-meta img.avatar {
    height: 36px;
    width: 36px;
    float: left;
    margin-right: 15px;
    margin-top: 0;
    border-radius: 50%;
}

Then add this to your /layouts/post/single.html file:

<section id=\"post-meta\" class=\"clearfix\">
  <a href=\"/\">
    <img class=\"u-photo avatar\" src=\"%20.Site.Author.avatar%20\">
    <div>
      <span class=\"p-author h-card dark\">%20.Site.Author.name%20</span>
      <span><a href=\"[micro.blog/%20.Site....](https://micro.blog/%20.Site.Author.username%20)\">@%20.Site.Author.username%20</a></span>
    </div>
  </a>
</section>

Anyway, those are just some of the changes I’ve made so far. As always, feel free to correct me if I’ve done some thing wrong and if you have any questions be sure to ask.

  1. And honestly, something of a time suck for someone like me who enjoys endlessly fiddling with the design of my blog. ↩︎

  2. Like this one. ↩︎