Over the past couple of years, I have been slowly working towards using iOS exclusively to update my website–it’s incredibly liberating being able to publish posts and photos with just an iPhone or iPad. Now that it’s all working, I’ve been asked to describe my workflow, and the tools I use.
The site itself is stored on GitHub as a collection of Markdown1 and media files–one per page. Whenever a change is pushed, it’s built and deployed automatically. While I use a homegrown solution for this build-publish process, GitHub Pages offers this behaviour out-of-the-box using Jekyll, and is a great starting point.
With an automated process like this, editing and publishing the site becomes all about efficiently managing a git repository of Markdown files. For this, I make use of a few apps and workflows:
- Working Copy for editing content and templates
- Safari and Split Screen for live previews while editing
- Photos and Shortcuts for managing and exporting photos
- iA Writer for dedicated Markdown editing and offline previews
Working Copy has been around for some time now and is the git client for iOS. It’s fully featured enough to be the only tool you need, providing a great built-in editor, while also playing nicely with other apps supporting by supporting Files integration, Shortcuts, and open-in-place.
The integrated editor provides syntax highlighting for a comprehensive set of languages including Markdown, allowing me to edit content, templates, and even the build scripts for my site. Publishing those changes is then simply a matter of pushing to master. This is where Working Copy’s comprehensive set of keyboard shortcuts come in, allowing quick turn-around when editing drafts: you can commit and push right from the editor using Command + Shift + C.
Since I publish a large number of images and movies on the site, I make extensive use of git-lfs, and Working Copy excels here too, offering out-of-the-box support.
While I can edit in Working Copy, it’s useful to be able to preview the content as it will appear in my website. To achieve this, I publish drafts posts to a separate section of my website, commit and push regularly during editing, and use Safari for previewing.
Using Split screen–one of of the features that really allows iOS to shine–I can keep both Safari and Working Copy side-by-side without having to worry about excessive screen furniture or other distractions.
Publishing media is a large part of the reason I build and maintain my own infrastructure–most off-the-shelf website builders still focus on text, not images or movies. Even though I can’t offer a complete solution for publishing photo albums, I hope it’s useful to share the general approach.
The photos and movies themselves, I manage in Photos2, which syncs photos between all my devices. These days, I capture most content with my iPhone, but when I use my DSLR, I can still import these directly to my iPad or iPhone.
When it comes to the site, the approach I is very pragmatic: folders are created for the year, month, and album, and the corresponding photos and movies live there, in numbered files. A Markdown index file contains the album metadata and comments. I then use a custom template (and much CSS) for the index page to display an album showing all its sibling files.
/photos/2018/10/prge/ index.markdown 1.jpg 2.jpg 3.jpg ... 7.m4v ...
Using Working Copy, it’s easy to manually create the directory structure–I only need to do this once for each album so it doesn’t represent significant effort–and export directly from Photos.
Naming the files correctly on export takes a little more work and, for this, I use Shortcuts: with a simple workflow, it’s possible to rename files sequentially, and then prompt the user for a location to save them.
Adding my photos to Working Copy, is then a matter of selecting the Shortcut from the share sheet in photos, instead of exporting directly to Working Copy.
iA Writer is a new addition to the setup, but it already feels like it might warrant a post all to itself, and I’m very hopeful about its future place in my workflow.
I have been keeping an eye on iA Writer for some time, but it wasn’t until the recent support for opening remote locations (TODO: what are these called?) that it became a viable alternative to the Working Copy editor, allowing me to edit files directly in my local git clone.
While Working Copy does provide a way to preview content as Markdown, this can be a little cumbersome–it’s strength is breadth, not depth. For this, it’s nice to be able to kick-out to a dedicated editor.
(iA Writer even supports posting to WordPress or Medium if that’s how you choose to publish your content.)
Like many other dedicated Markdown editors, iA Writer offers a collection of tools for formatting, including inserting links, and adding images directly from Photos.
Offering just enough configuration to disable things like smart quotes and smart dashes in the editor, and adjust the basic Markdown preview templates to output something close to how it will look when published.