The Brilliance of Ulysses for Blogging

When I started the Hugo-based incarnation of this website, I wrote all posts for the site in iA Writer. It’s a very clean and focused Markdown text editor suited well for blogging with Hugo or other platforms that take Markdown and convert it to HTML.

Then I accidentally discovered a secret1 about Ulysses.

When you export a sheet to Markdown text from Ulysses, you get a text file of plain text with all your Markdown formatting. But when you attach images to that same sheet and export it as Markdown, it gives you a zip file with your Markdown document and all attached images. Furthermore, if you put the images in the text of the document, Ulysses lets you add image metadata which it then puts into the Markdown image tags that it creates.

Ulysses image attachments and metadata

The above image shows what it looks like when I attach an image to the sheet (attachment seen in the right attachments pane) and drag it into the document and add metadata to it. Ulysses lets you add a caption, image size, title, and file name to export the photo with.

Below is the Markdown generated by this image and its metadata.

Image link Markdown

Because Ulysses zips up the markdown file with images, I can have my Blog Post Publish shortcut check to see if it’s getting a markdown file or a zip file from Ulysses, and then handle the images appropriately if it’s a zip file.

The Markdown generated by Ulysses can similarly be processed with a regular expression and converted to a Hugo shortcode in order to display it the way I want. I’m already checking for YouTube and Twitter links to generate shortcodes for, so adding one more is not a big deal.

Shortcut regular expressions for generating Hugo shortcodes for Twitter, YouTube, and Image links.

With iA Writer, I had my Blog Post Publish shortcut search for image links and then ask me for an image for each one of them, plus the metadata that I get included in Ulysses by inserting them. I don’t have to know anything about the image path on the server or anything about Hugo shortcodes to write a blog post, because my shortcut handles it all for me.2

Hugo is a tremendous static site generator, and Ulysses is the perfect writing app for sharing complete posts with images to Shortcuts for processing and dumping onto the Hugo site for compilation. The fact that it bundles up all the resources attached to the sheet means I can write a shortcut that does all the work for me without me having to tell it a thing at run time.

  1. Not really a secret ↩︎

  2. Obviously I do know about the image paths and Hugo shortcodes because I made the website, I co-run the server, and I made the shortcut that does the work for me, but when I’m writing I don’t want to have to double-check all that stuff. That’s the beauty of automation. It does everything the same way every time. ↩︎