Yes, I finally am blogging again. Only 6 months of silence this time. Not too shabby.

Anyway, a major hindrance was that my blogging workflow wasn’t working quite right yet, which in turn was like an invisible wall that I was just too tired to climb each time I want to post something. Luckily, I have had the last two days to tinker with it and to figure it out. Now I have a pretty solid workflow. Well, at the moment it looks solid. It is not battle tested however. That’s what future blog posts are for.

But since it is a little involved, I thought I’d write it down here right away. For one so I won’t forget and also some friends asked me how I am handling blogging from iOS to my Kirby blog.

Tl;dr1

Write your post in whatever text editor you prefer. Ideally one that supports x-callbacks. I personally use Editorial since it’s nice for writing and I also use it for processing everything anyway. Before that I used Drafts together with Editorial.

Fire off the Editorial workflow that transforms your text into a blog post with the correct formatting and uploads it to Dropbox.

Create or edit any imagery that goes along with the post and upload the images to the right Dropbox folder. The path of said folder has been copied to the clipboard by the above Editorial workflow.

Have Hazel put everything into place and let it upload to post to the web server.

The long version

There are several steps involved to make this work. It sounds complicated, but is actually rather straightforward.

  • Kirby, of course.
  • Drafts (or any other editor that allows you to send stuff to Editorial via x-callback URLs).
  • Editorial, Pythonista works equally well, but Editorial is simpler to set up, plus you can write in Editorial as well and just skip Drafts entirely, which is what I do most of the time.
  • Filterstorm Neue or alternatively Photoforge 2 if you still have access to it.
  • Dropbox
  • Hazel
  • CrushFTP, optional, but depending on the image editor you use more convenient

Kirby

First of all, why Kirby? Sounds like an awful lot of work for something that Tumblr offers for free. Tumblr even has an iOS app. Just log in and be done with it.

For me it comes down to owning what I create. And that involves hosting what I create. Yes, Kirby is a little more involved and— gasp —costs money, but it is really flexible—I built several sites with it for myself, friends and even customers—, fast and pretty cheap considering.

Plus it works with text files and Markdown, both things that I value dearly and that make this specific workflow possible without a special “Kirby iOS app”.

Drafts (optional)

For completeness sake I’m including my Drafts workflow as well. However, I have since completely switched over to Editorial for writing as well as post-processing my posts.

I started writing my posts in Agile Tortoise’s Drafts, a fine and frictionless text editor with the added bonus that it supports the x-callback URL scheme and a ton of other ways to share or manipulate the written word.

When I write a blog entry, I put the post’s title in the first line and the actual post content right after it. If I want a subtitle, that goes at the very bottom with the tag Subtitle:

So a typical post in Drafts would look like this:

This is my title

And this is my content.
It can have any content. Paragraphs, code blocks, lists, you name it.

----

Subtitle: And then at the bottom I have the option to put a subtitle.

When it comes time to share my post with the world, I have a Dropbox action called Blog Post, that will create a file in a designated Dropbox folder—I have a global Apps folder and I put it in a subfolder there—with the name of my post title as filename. It will also fill in a couple of things for me. Most notably the date and the title. So the above post transforms into:

‘This is my title.md’ with the following content:

Title: This is my title

----

Date: 07.11.13 (used for display purposes)

----

Time: 2013-11-07-17-33-55 (used for sorting purposes)

----

And this is my content.
It can have any content. Paragraphs, code blocks, lists, you name it.

----

Subtitle: And then at the bottom I have the option to put a subtitle.

You can import this action into Drafts by clicking this link: → Import Blog Posts action into Drafts

Editorial

This first part is part of the old Drafts workflow. Jump to the second part to see how I’m working right now.

The old way

The next two steps are only for the times I want or need images in my posts or if I want to create one of those snazzy banners that are sorely underrepresented in my blog.

I use Editorial as a simple text filter in this case. I could write something like this for Pythonista to make it work on iPhone (Editorial is iPad only), but I, well, I didn’t feel like it.

Editorial simply gives me back the future path of my new blog post, something I need if I want to drop pictures into that folder without hunting for the correct folder in my next step.

I send over my post from Drafts to Editorial with a simple x-callback URL.

You can import the URL Action into Drafts by clicking this link: → Import URL action “Copy Blog Path” into Drafts

Editorial then cleans it up in a variety of ways. For example, everything gets turned to lowercase, spaces are removed, etc.

The resulting URL is copied to the clipboard. In the example above This is my title turns into http://alexanderkucera.com/20131108-this_is_my_title.

I opted not to run any action after this, as I want to be able to switch to any app I want as the situation requires. But usually it is now on to Filterstorm.

If you want to import the URL cleanup workflow into Editorial or simply read through it in detail, you can take a look at this “create blog URL” Editorial Action

The new way

Since I have completely switched over from Drafts to Editorial, I had to create a workflow that would prep a standard Markdown document and turn it into a blog post. Since Editorial is much more powerful then Drafts, I was also able to make it a bit smarter, ask for input on a few things and optionally archive or delete a post once I’m done with it.

It does a lot of things similar to my Drafts workflow though. After all is said and done, a file with the correct naming scheme gets written to a Dropbox folder. And I also get the blog URL at the end from the workflow above.

The bonus with the Editorial workflow is that I don’t need to watch out for any specific formatting. I can have a standard Markdown document and everything just works™. And Editorial is just really pleasant to work in.

Editorial Blog Posting Workflow

Filterstorm (Neue)

Filterstorm Neue, is brand new, but the old Filterstorm or Filterstorm Pro have pretty much the same abilities. Or you could use Photoforge 2 if you still have it. The important bit is that the app allows you to either export to Dropbox or to upload via FTP and to give your images a name of your choosing.

Well, this step is really simple. Do your image edits. Done? Ok. Then upload it to the folder we just had the path created for in Editorial. Simple, right?

Well, yes and no. There is one step that I consider crucial. I don’t want to upload to my web server. I want to upload my image to Dropbox. I consider the Dropbox version of my site to be the canonical copy. Everything goes there first and then gets uploaded to the server. Otherwise I end up with a file mess. Files might get updated or changed here or there. Who knows? By always going Dropbox first, that issue gets sidestepped completely.

If you don’t have an always on server machine, your best bet is to find a way to upload to Dropbox directly. Photoforge has a Dropbox uploading feature. Filterstorm does as well, though it involves browsing to your posts folder manually instead of just giving it a path.

For various reasons, mostly because I don’t want to hunt down a folder and I have the exact path I need from my Editorial workflow above, I decided to go a completely different route: FTP.

I happen to use CrushFTP for work anyway, which means I just need to set up an FTP account that points to the blog’s content folder in my server’s Dropbox folder and the rest is very straightforward. Get path from Editorial and upload to said path.

Hazel

The last and final step. The one step that unifies desktop and iOS blogging. Automatically uploading my posts from Dropbox to the server. Hazel is the perfect match for that. Especially since it got the ability to open an FTP connection on its own a couple of versions back.

The Hazel flow goes like this:

  • Look into the Drafts Or Editorial app folder and check if there is new post.
  • Put the file into a subfolder called <date>-postname.
  • Rename the file to article.md (the name of my Kirby layout template for a blog post)
  • move the new folder with the post in it into my blog

There another Hazel rule takes over as Hazel rules only ever can work on one folder at a time. It goes like this:

  • Is there a folder? Look into it.
  • Any file that doesn’t have a red or grey color tag and that has been modified within the day gets uploaded
  • After the upload color the file grey

The color tags are there to stop Hazel from constantly uploading files that have been modified inside the “today” timeframe. But they also allow me to simply take off the color label if I want a file to be re-uploaded.

Grab the Hazel ruleset here: hazelrules.zip

The one called Drafts-Editorial-Folder is for the incoming Drafts or Editorial file and the one called Kirby-Blog-Folder monitors the Kirby blog folder.

That’s it.

See? Simple, right?

Subtitle: Kirby, iOS, Drafts, Editorial, Filterstorm and Hazel tied into a neat bundle

  1. Too long; Didn’t read ↩︎