Saturday, Sep 12, 2020

Revitalizing my Blog with Hugo and Github Actions (aka a New Hope)

This is my third attempt to revitalize my blog. I never migrated my old posts. Some of the posts were kind of successful, because they were posted as answers in stackoverflow questions. I realized that when I got some messages from twitter or by email why my post disappeared. Luckily this is not a problem anymore, because all of the topics are outdated and nobody cares anymore. 😌

First I started with wordpress. This was quite easy and straightforward. One big problem was that I did not care about the updates. Yes, I have self-hosted wordpress. In hindsight it was a really bad decision. After some “security issue”, I took my blog down and started from scratch with Jekyll. I really fell in love with the concept of creating your blog in markdown with a site generator. But this attempt did not take off as well and I had no good ideas for topics to write about. So after a while I also shut down this blog and created a simple static site as some kind of a virtual “business card”.

Build your own Hugo Theme

Now some weeks ago I started playing around with Hugo. What started as a small project to replace my homepage ended up in a longer session than expected, because it was quite fun to rebuild my site with Hugo.

The existing Hugo themes are fine and look very good, but when you want to create your unique homepage you have to create your own Hugo theme. There are good tutorials out there. I would recommend you to take the time and write your own theme. I think it’s the best way to learn Hugo and get some understanding how things work.

To build my own theme was a good change to get my rusty JavaScript and CSS skills updated. In the last web projects I used Bootstrap or Material Design, but this time I wanted to use a framework with a smaller footprint. So I decided to use Skeleton.

The downside with Skeleton is that the GitHub project is not active anymore. The last release was in December 2014 and there are open PR’s and issues. But besides that it works pretty well. As an alternative for Skeleton I will also have a look at Milligram. But for now Skeleton seems to work fine.

Build Pipeline with GitHub Actions

Next we need a build pipeline to publish new content to our webpage. The easiest way is to host your site as a GitHub page. There are plenty of examples of how to set up your workflow with GitHub pages and Hugo. I have an external provider which hosts my domain and emails. So this was no option for my. Luckily there is a SFTP GitHub Action which I used to publish my homepage with SFTP. The following is my GitHub workflow which builds my site with Hugo and the publish it with SFTP on my web server.

 
name: Build Live
on:
  push:
    branches: 
      - master
jobs:
  build:
    name: Publish Homepage (Live)
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master
      name: Checkout
    - uses: jakejarvis/hugo-build-action@master
      name: Hugo Build
      with:
        args: --minify
    - name: List output files
      run: ls
    - name: Upload Homepage (sftp)
      uses: SamKirkland/FTP-Deploy-Action@3.1.1
      with:
        ftp-server: sftp://foo.bar:22/page
        ftp-username: ${{ secrets.FTP_USERNAME }}
        ftp-password: ${{ secrets.FTP_PASSWORD }}
        local-dir: public
        git-ftp-args: --insecure

This GitHub Action will be triggered when changes are merged into the master branch. The password and username should be stored as GitHub secrets. It’s probably also a good idea to store the FTP server and port as secrets as well when you have a public GitHub repository.

I hope this post was useful for you in some way. It was definitely fun for my to build a Hugo theme and play around with GitHub Actions.