trashpanda.cc

Kohlenstoff-basiert Zweibeiniges Säugetier

How to manage a statically-generated website from iOS devices

tl;dr with the aid of two apps, you can create and manage content for websites with git-based static site publishing workflows like Hugo, Eleventy and others.

Why is this worth doing?

If you've outgrown the blog-as-a-service platforms like Wordpress or Typepad, running your own site often involves using tools like Hugo or Eleventy.

They're basically static site generators - create content in text files, use templates to define layouts, run the content through a processing engine, and then publish the resulting HTML and assets to a web server. They're fast, powerful, flexible and decouple the content management from the hosting.

Many of this type of tools can also take advantage of git-based deployment - you configure something like Github Actions to react to pushes to the site's repository by building the content and transferring it over to the hosting platform. Some hosting services like Render will do the same thing in the opposite direction - they watch the respository for changes, and fetch and build the updates when something pushed.

Regardless of what tool, source code respository and hosting platforms are involved, the content creation process is usually similar. You edit the source files in some text editor, then commit the changes using the command line or a Git client. That's straight-forward enough on a desktop system, but tends not to play nicely with mobile devices.

I spend much more time using my mobile devices than I do sat in front of a Macbook, so I wanted a way of being able to CRUD content on my sites with the tools that I've got in my hand. The good news is that it's a) possible and b) very straight-forward, albeit at the cost of a couple of (very reasonably priced imho) apps.

The process also doesn't need any changes to either the publishing workflows or the hosting platform.

How it works

For the purposes of this explanation, I've got the following moving parts:

  • Eleventy as my static site generator
  • Github as the source code repository
  • Render as my hosting platform

The desktop workflow goes:

  1. Create a new post in the local repo copy of the site's source code using a text editor
  2. Commit the changes to Github
  3. Render watches the repository
  4. When it detects changes, it checks out the updated source, builds the static site content, and deploys to its content distribution network automatically.

This process is going to reproduce that workflow, but with mobile tools:

  1. A local copy of the site's source code will live on an iPad (you can subsitute iPhone for iPad as needed, because the process is exactly the same)
  2. A text editor app will be used to create and/or update the site source
  3. A Git client app will handle pushing and pulling to the Github repo
  4. All other components and workflows will remain exactly the same and unchanged.

For this you'll need an iOS Git client (I'm going to use Working Copy) and an iOS text editor that can open and save files in Markdown format (I'm going to use Textastic). Both of these are paid apps with free trials - the total outlay will be about 35€, but to me that's a reasonable price for the flexibility of being able to manage my site on the go.

Setup

Setup is split into two parts - the Git component, and the text editor

Setting up Working Copy as the Git client

  1. Install Working Copy from the App Store
  2. Clone the site's respository from Github
  3. Enable Working Copy as a file source using these instructions

Open the local files in Textastic

  1. Install Textastic from the App Store
  2. Add the repo to the sidebar
    1. In the Textastic sidebar, tap the Add external folder option
    2. Tap on the Working Copy entry in the Locations section of the sidebar
    3. Open the folder for the repo
    4. Navigate down to the content files (e.g. 11ty's content files normally live in ./content/blog )
    5. Tap Open to add the folder to the Textastic side bar

Operation

  1. Create a new post file in Textastic (I've found the easiest way to do this is long-press on an existing post file, tap the Duplicate option to clone it, then edit the new file to overwrite the existing content)
  2. Switch to Working Copy
  3. Create a new commit
  4. Push the commit to the remote repo
  5. Wait for the changes to be built and published.

Conclusion

For a total outlay of around 40€, it's possible get the best of both worlds - the utility of a mobile device that you've always got to hand; and the power and flexibility of a modern static site generator. It feels like a step closer to a world where table and laptops are functionally-equivalent - we're not there quite yet, but being able to manage sites without being dependent on "monolithic" client apps is definitely progress.