Over the past few months I’ve been trying to transform this website from a resume/portfolio into a cheaper, and more easy to update (and more fun to use) blog. To do so I created a workflow to post blog entries from my iPad and iPhone.

My personal website site originally used the heavy Ruby on Rails framework to create posts via RSS feed from my micro.blog. This let me make posts from my phone (via the micro.blog app), but it was hosted on Elasticbeanstalk, which was expensive. I migrated to Linode, which was cheaper, but dealing with Docker images, SSL certificates, databases and all their resultant headaches was too much. It also still cost $5/month for the server, on top of the money I was paying micro.blog. I wanted something that cost pennies, not dollars and I wanted to be able to post from my phone. I had heard about static site generation and after researching the different options available I settled on Hugo for the following reasons:

• It was fast
• It had a strong and active community
• It used Go, which I was interested in learning more about

I was able to port my site from the Ruby on Rails framework in about the span of a weekend. I could reuse the .erb templates from the Rails project, and the css was handed by Bulma. I made some example posts and threw the results on S3. After wrangling with some name-server issues my static site was live!

I could now create a post by adding a simple markdown file that looked something like this:

---
title: "Blog Post"
date: 2020-07-28
image: header-image.jpeg
---
This is the body of the blog post. You can see a image below. 

{{< figure src="image.jpeg" >}}

I could include any images in the same folder to embed them in my blog post.

However I still had the issue that posting from my phone was not possible. A post needed to be witten and pushed into GitHub; and the static site still needed to be compiled and uploaded to S3. I was also concerned about image sizes. To avoid bloat in the git repo I would need to resize them before uploading.

To solve the first issue I used a combination of Shortcuts and the app Working Copy. Working Copy allows you to view, edit and commit in git repos. It’s free try out, but costs a few dollars to unlock the ability to push. It also has a fully featured code editor with syntax highlighting, a local webserver, and most importantly for my purposes, great Shortcuts integration. After setting up my websites repo on my device, I created one Shortcut to create a post, and one for processing images.

The Shortcut to create a post includes the following steps:

• Ask for the blog title
• Transform the blog title into a slug formatted like “2020-09-26-blog-post”
• Use a text template to combine the title, date and shortcut input into a Hugo markdown template file called index.md
• Add index.md to my git repo via Working Copy in a folder with the sliggified blog title

I can now use the share sheet to add any markdown file in a new blog post.

Adding an image is similarly invoked from the share sheet and involves the following steps:

• Ask for the name of the image
• Resize the image to be 1024px wide
• Get the blog post slug in the same way as the ‘create post’ shortcut
• Add the resized image to the same folder as the blog post via Working Copy
• Embed the image in index.md by appending {{< figure src="image.jpeg" >}} to the contents (you can do this by opening the ‘Show More’ options under the Working Copy action)

These two Shortcuts allow me to easily create a post from either a markdown file, or an image, and I can easily add multiple images to the same post. After doing any final edits in Working Copy I commit my post and push it to GitHub. Once it’s been pushed, actually publishing the site is achieved with a GitHub Action.

The action is pretty straightforward. We checkout the current branch, setup Hugo and then build and deploy the site to S3. (Edit: I updated action script below to avoid using s3-sync-action. While there is nothing wrong with that action, it builds a docker container, adding around 30 seconds to the build time. configure-aws-credentials allows you to setup the AWS credentials and then you can use the included aws-cli to push your files.)

name: CI
on: push
jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - name: Git checkout
        uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "0.75.1"
          extended: true
          
      - name: Build
        run: hugo --minify

      - name: Configure AWS
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ca-central-1
          
      - name: Copy files
        run: |
          aws s3 sync public s3://${{ secrets.AWS_S3_BUCKET }} --acl public-read --follow-symlinks --delete

GitHub gives every user 2000 minutes of actions per month, and compiling my site takes less then 30 seconds each push, so using actions is essentially free. I also found them a lot easier to use then AWS’s CodePipeline as there is a rather large library of different actions that are available to use.

I had a lot of fun with Hugo, and GitHub Actions in particular were very easy to setup. I hope this inspires more people to try setting up their own blog or static website.

Some useful links:

Outline on posting to Hugo from an iPhone using Travis CI to build the site.

Hugo GitHub Action

Static website hosting on S3

Bulma CSS Framework

GitHub Actions documentation

Escaping Hugo shortcodes (useful for this article)