Create a photo post to Jekyll blog using the GitHub API and Apple Shortcuts

A profile photo of Richard Saunders

By on

I’ve recently added a photos section to my site, and in keeping with the indie web movement I wanted to post photos to my site first and look to POSSE later.

I’ve been keen to try out the Shortcuts app on my phone and seemed an ideal way to give it a go. I’ve seem a few similar approaches on uploading content to GitHub, and they all relied on the Working Copy app to do so.

This shortcut submits the content directly to GitHub using the GitHub API.

Once committed, Netlify sees the changes in my repository, then builds and deploys my site.

You can download a copy of the shared version of the shortcut. When installing it will prompt you to provide the following prerequisites.

Prerequisites

  • GitHub username – used to authenticate to the GitHub API.
  • GitHub repository name – the repository you are uploading to.
  • GitHub personal access token – this must have read/write access to the appropriate repository. View the Github docs to find out how to create a access token.
  • GitHub committer name and email address – used when committing files to the repository.
  • Image upload path – where the photos should be uploaded.
  • Post upload path – where the markdown file should be created e.g. _photos .

What the shortcut does

  1. You can pass a photo using a share sheet or choosing a photo directly when running the shortcut.
  2. The photo is resized to a maximum of 1024px wide
  3. Converts the image to a JPG from HEIC
  4. Prompts you to Set a title
  5. Prompts you to Provide Alt text
  6. Prompts you to enter tags
  7. Uses the Photo creation date and the provided title to generate a filename which is auto hyphenated and converted to lowercase.
  8. BASE64 encodes the image to send via the GitHub API
  9. Uploads the image to GitHub to path specified during shortcut setup, it automatically places the file in a /year/month/ structure.
  10. Creates and uploads a markdown file containing the location, latitude, longitude, alt text, title, date, image and tags using YAML front matter.

YAML front matter structure

A table explaining how the front matter is populated
Front matter field Data population
title Uses the title provided by the user.
date Uses the creation date of the photo.
altText Uses the alt text provided at the prompt.
location Gets the Town/City from the photo GPS coordinates when available.
geolocation An array.
latitude Get the latitude from the photo GPS coordinates.
longitude Get the longitude from the photo GPS coordinates.
image A file path created from upload path and year and months from the photo creation date e.g. /uploadpath/2019/11/filename.jpg
tags An array of tags.

Notes / quirks

  • There was a lot of messing about with trimming variable names which seem to get space added to the end of them. I had to use the replace text action with a regular expression to tidy them up.
  • I want to add setting location as an optional setting when running the shortcut.
  • Need to get this working with Git LFS properly
  • Large images seemed to get corrupted on upload so put the resize action in to improve the upload.
Tagged: Photography and Front-end development