It has now come to an end of an era. The time has come to move on from from my previous way of building this blog (with Jekyll) to something new. For a while now I’ve been looking for a reason to dig some more into golang, so when i began looking for a new theme for my blog the choice to migrate to Hugo came quite easy. At first glance it does exactly the same thing as Jekyll, but for someone who from time to time make changes to the theme it makes more sense (my personal opinion).

The old website, built in Jekyll

Buidling the Site

The first thing to do when migrating is to find a new theme and adapt/move things into it. I ended up choosing PaperMod, due to its simplicity in combination with a modern look and feel. With that out of the way it was time to move my logotype and descriptive texts. In both cases this kind of information is stored in the configuration files.

The next step is to move the actual contents of the blog. In Jekyll this is stored in two folders (at least in my case):

  1. The posts: /_posts -> /content/posts
  2. The images /assets -> /static/images

With this out of the way it is time to go through every single post to update the syntax. The first thing is the metadata of the posts, the top of my markdown files. In my case there was no difference. The following is the configuration is what was used in Jekyll.

1
2
3
4
5
6
7
8

---
layout: post
title:  "Building a Webpage"
date:   2020-08-19
categories: "Projects"
tags: ["Jekyll", "Projects"] 
author: "Oskar Edbro"
---

The layout is just discarded, and the rest have the same functionality in both Jekyll and Hugo. With this knowledge it is time to look at how each post looks. And sadly there is a difference between how images are included. The good thing is that Hugo better handles the default image syntax from markdown. This means that images can be included as shown below:

![A phone with apps seen as privacy violations](/images/2022/The-Modern-Con/The-Modern-Con-Privacy-Violation.jpg 'Photo by Jeremy Bezanger on Unsplash')

With that all the modifications required for the application is finished. The next step is to polish the site with information and ensure that all information is available.

Hosting

Setting up the hosting i Decided to use GitHub Actions instead of just using the Cloudflare auto build (as I did previously in Migrating to Cloudflare). This means that I am required to learn some thing about how to create a CICD Pipeline.

Getting everything to play nicely was a bit of a hazel, especially since I to insisted on separating the build and deploy actions into different jobs. In the end, the issue was in regards to saving and then retrieving the artefacts. When that issue was solved all went smooth. So how was it done? To build the page I used the following job:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          # extended: true
      - name: Build with Hugo
        env:
          # For maximum backward compatibility with Hugo modules
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo \
            --minify           
      - name: Upload artifact
        uses: actions/upload-artifact@v3
        with:
          name: site
          path: ${{ github.workspace }}/public
          retention-days: 7

Noteworthy things are the use of an existing Hugo build action, and saving the artefacts to my GitHub workspace. We also make sure to minify the generated HTML, just to save a bit of data. It does not make much difference, but every little bit counts. For the deployment, there are just two steps. Downloading the artefacts we saved, and then uploading them to Cloudflare. The project name has however been masked.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    needs: build
    steps:
      - name: Download a single artifact
        uses: actions/download-artifact@v3
        with:
          name: site
          path: ${{ github.workspace }}/public
      - name: Publish
        uses: cloudflare/pages-action@1
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          accountId: ${{ secrets.CF_API_ID }}
          projectName: XXXXXX
          directory: ./public
          gitHubToken: ${{ secrets.GH_PAT }}

Summary

So in the end, it took more time than expected to migrate to Hugo. However, most of the time spent was in learning things. How to use GitHub Actions, how Hugo works, etc. With that out of the way, it was quite easy. Now, the next step is to start modifying the small things to get the theme even better.