Middleman & Ulysses – My perfect writing setup

July 2018

There are two ways to overcome resistance to writing. The first is to get started. The second is to keep going. Using the right tools makes both of these easier.

Enter Middleman & Ulysses

I built this site using Middleman, a static site generator. I've used it since 2014, which is a long time in internet years. It's fast and flexible. I've no reason to think I'll switch any time soon.

Ulysses is a markdown text editor for Mac & iOS. I use it for almost everything I write. Whether it's a quick idea or a 2,000-word blog post–if it's written, it lives in Ulysses.

I love it so much I wanted to do all my writing for this site in Ulysses too. Here's how I connected the two to create my perfect writing setup.

How to edit Middleman blog posts in Ulysses

Ulysses allows you to add any folder on your Mac to the sidebar for easy access. These are known as External Folders.

As Middleman keeps all blog posts as Markdown files in a single folder, adding them to Ulysses is easy. Just go to File > Add External Folder, and add your blog post folder. You can now use Ulysses to write Middleman blog posts.

My Middleman 'writing' folder as an External Folder

And thanks to Middleman's live reload, any edits made in Ulysses will trigger a page refresh on your development server.

Editing text snippets in Ulysses

Chunks of text are the litter of static sites. Sometimes they're small, like an introductory paragraph. Sometimes they're longer, like an About page. Buried within template code these pieces of text can be difficult to edit.

Styling them can be tricky too. Manually editing HTML inside a template is a shortcut to inconsistency. I write all my blog posts in Markdown, so ideally all text would be Markdown.

To solve this, I moved all chunks of text into individual Markdown files and added them to a snippets folder. Then, they are rendered as partials inside Middleman templates:

// ./source/about.html.haml

%h2 About
  = partial "snippets/about"

%h2 Contact
  = partial "snippets/contact_links"

Now, I can add snippets as an External Folder in Ulysses, and edit that text as Markdown. Again, any changes will show instantly thanks to Middleman's live reload.

Why not just use a Atom / Vim / Sublime?

Wiring up Ulysses and Middleman is all well and good, but why bother? As I use Vim to build my site, I could write there too. It's a text editor. So why go to the effort?

I find using different tools for writing and coding puts me in a different state of mind. In Vim, it's easy to slip into editing a style here, a heading there.

With Ulysses, there's only one thing I can do. Write.

Ever wish you got more email?

Neither do I. You're busy, and so is your inbox. I'll only be in touch when I publish something new. And of course it goes without saying your email will be kept completely private.