Setting up Blot.im and 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.

  #MacOS     #micro.blog     #Blot  

Posted on 6/25/2018




Where the Light Gathers is a blog by Chad Moore.

I write about doing less with technology, parenthood, working with creative and technical people, improv comedy, writing fiction, and woodworking.

Email me, check out my Micro Blog where I post photos and what I'm thinking, reading, or watching. Or read another post:



September 2018  2 posts

Improv101  ·  A Quiet Place

August 2018  2 posts

The Other Direction  ·  Blotmentions

July 2018  3 posts

Side Hustle Sprint  ·  Beep  ·  Minimal design

June 2018  1 post

Setting up Blot.im and micro.blog

April 2018  2 posts

blotter  ·  Time

March 2018  1 post

Minimal Digital

December 2017  1 post

Side Hustle

November 2017  1 post

The Art of 3D Modeling at Digital Portsmouth

October 2017  1 post

Panobook

September 2017  1 post

Leadership for Animators (and other creative people too)

August 2017  1 post

Gratitude

July 2017  4 posts

Drafts and Actions  ·  First things first  ·  100 years  ·  Lower than Erlich

March 2017  4 posts

I am not a minimalist  ·  Sips  ·  Carrd  ·  conservation

February 2017  7 posts

WTF per paragraph  ·  chimera  ·  Text Expansion is built into iOS  ·  Blot, aText & nvAlt  ·  Collusion  ·  Tsundoku  ·  A simpler way

January 2017  1 post

Streams

December 2016  2 posts

Don't compare your backstage to their onstage  ·  Ideas are cheap

September 2016  3 posts

Kid A, Owls, and perfect pens.  ·  I am uncomfortable, which is good.  ·  The perfect pen

August 2016  2 posts

Premortem  ·  Every 6 weeks

July 2016  3 posts

Mini-disconnects  ·  Get to know a furnace.  ·  Just the Facts

June 2016  4 posts

Dude, where’s my car?  ·  The Doodle  ·  Crazy  ·  Bones

February 2016  4 posts

Broken Records  ·  Little white numbers in little red circles  ·  Squirrel  ·  #Right Now

January 2016  2 posts

I loved arguing with my son about doing his homework Never Alone

December 2015  1 post

Mr. Oldman stands up and expands

November 2015  3 posts

Some notes on Agile Development  ·  Single Tasking and Spotlight  ·  Sacrifices

October 2015  1 post

My Leaf blower doesn’t have bluetooth

June 2015  1 post

#Digital Portsmouth, The Art of Video Games

April 2015  2 posts

A call from out of the blue Ask

September 2014  1 post

Talk

May 2014  1 post

Nerd Alert

August 2013  1 post

UX for Technical Artists

February 2013  1 post

Cliques and Tribes

January 2013  2 posts

Pay it Forward Trust

May 2012  1 post

Four Distractions

October 2011  1 post

The three things we need at work