It’s Thursday, April 04, 2019. I’ve moved this post from it’s former site to here on micro.blog.

Hello, it’s Monday, June 25, 2018. This write up shows one way to have blot.im handle your micro.blog posts. I’m going to skip right to the heart of the matter here. This article assumes you have used both blot.im and micro.blog, but not yet configured them to work together.

Disadvantages: You do lose a bit of the community aspect by not posting to micro.blog from one of the tools designed to work with that system right out-of-the-box

Note: Personally, I moved away from this setup once micro.blog could have longer form posts.

A quick look at what we’re building. You can see the Posts on blot are just the post title, and link to the full post, where my micro.blog posts do not have titles or links. This isn’t a rule, just a choice I made a long the way. You can configure these two post types in any way you can imagine. Use this as a reference for the rest of the article.

“

Configuring blot.im

Essentially you need to have blot.im host your micro.blog rss feed, and control how that feed is displayed. This is done through the Themes section of Blot.

Make a new theme by choosing Create a new theme and use the clone the blank theme dropdown. Clone the theme that looks closest to what you want to achieve visually.

Then Edit the new theme. Note you can edit the theme in the browser, or download it to edit it in your choice of software on your computer. I’ll stick to editing in the browser for this article.

Once the Edit Theme page loads you’re presented with the list of all the files associated with the theme in the left sidebar, and some of the themes options on the main portion of the page.

Take a look at the list of files on the left. For this setup there’s three files we’ll need to edit.

  1. You’ll need a new file called microblog.rss (we’ll start here in a minute)
  2. You’ll need to edit the entries.html to control how the regular posts and micro.blog posts are displayed
  3. The style.css if you want to style the post types differently

microblog.rss

The goal here is to split out your main posts and your micro.blog posts so you can route the latter feed to the micro.blog platform.

I’ve used the terms “post” and “micro” specifically. The “posts” will be longer form blog posts, and the “micro” posts will be the micro.blog posts. You can use any words you wish in place of posts and micro, just choose and be consistent.

You should have a feed.rss file already in your theme by default. We’re going to edit that, copy the contents, then make the new feed, then edit it too.

Edit the feed.rss file. It looks like this by default:

{{#recentEntries}}
  <item>
    <title><![CDATA[ {{{title}}} ]]></title>
    <link>{{{blogURL}}}{{url}}</link>
    <guid>{{{blogURL}}}{{url}}</guid>
    {{! RSS feeds need a RFC 822 date}}
    <pubDate>{{#formatDate}}ddd, DD MMM YYYY HH:mm:ss ZZ{{/formatDate}}</pubDate>
    <dc:creator><![CDATA[ {{{name}}} ]]></dc:creator>
    <description><![CDATA[ {{{body}}} ]]></description>
  </item>
  {{/recentEntries}}

We need this feed.rss to have just the full length posts, so we’ll need to edit in the recent entries section. Change it to this:

{{#recentEntries}}
	{{#metadata.post}}
  		<item>
    		<title><![CDATA[ {{{title}}} ]]></title>
    		<link>{{{blogURL}}}{{url}}</link>
    		<guid>{{{blogURL}}}{{url}}</guid>
    			{{! RSS feeds need a RFC 822 date}}
    		<pubDate>{{#formatDate}}ddd, DD MMM YYYY HH:mm:ss ZZ{{/formatDate}}</pubDate>
    		<dc:creator><![CDATA[ {{{name}}} ]]></dc:creator>
    		<description><![CDATA[ {{{body}}} ]]></description>
  		</item>
  	{{/metadata.post}}
  {{/recentEntries}}

We’ve just wrapped the item in the feed in the metadata.post tag. Again this is part one of the separation of “posts” and “micro blogs”.

Next we’ll copy all the code in this file, then make the new microblog.rss and copy the contents of the feed.rss into it.

Select all and copy.

Head over to the sidebar and click + Create view. This is how you add pages

Name this microblog.rss and click create.

Paste the contents of your clipboard (which contains the feed.rss code)

A quick edit here: just change the tag metadata.post to read metadata.micro and save.

You’ve now separated the feeds!

Control the where and how

Now that you’ve got two feeds and two “post types” you can decide where to display them each and how they will be styled. Let’s do the where first…

The display of posts on your blot.im page is controlled via the entries.html file. Look for the entries tag. It should look something like this:

{{#entries}}
<a href="{{url}}" class="row">{{title}} {{#date}} · <span style="white-space: nowrap;">{{date}}</span>{{/date}}</a>
{{/entries}}

Just like we did with the feed, we want to be specific about which post type you’re calling up to the page.

Within the {{#entries}} tag, you’ll want to specify the micro and post post types individually.

{{#entries}}
	{{#metadata.post}}
		<p>
			<span class="light margin left">{{date}}</span>
            	{{title}}
        </p>

     {{/metadata.post}}

	{{#metadata.micro}}
  		<p>
          <span class="light margin left">{{date}}</span>
  			<p>{{{html}}}</p>
  		</p>
  	{{/metadata.micro}}

{{/entries}}

This particular setup has the “post types” split. It displays the posts differently. Note that the post types have the date and the title, and the micro posts have the date and the html contents. That’s a design choice I made. You can see the difference in the image here, where the Carrd blog post is just the title & link to the full post, but the micro post on conservation is the complete post, without a title and link.

Overheard at a conservation discussion: We are not inheriting this planet from our parents, we are borrowing it from our children.

I love that quote, btw

Wrap up & how do you actually use this thing?

So that’s what you need to get this up and running. Please note that I’m writing this bit-by-bit as time allows and mostly from memory, so if you have any questions or problems, please let me know! I’m sure I missed something.

email me or find me at micro.blog.

You can reference my post about actually using this setup.

Note that you can style the posts differently as well in the css file. Make different classes for the micro and post “post types” to further control the visual display.

Oh, you’ll need to add the “micro” rss feed to your RSS feeds in micro.blog as well, so your posts show up there.