Update of my static site ⬆️

I underwent a rather significant overhaul of my blog. I wanted to take a few minutes to write about my approach.

This article follows the one on creating the blog.

"Update" banner generated by Dall-e 3

The big surprise

I discovered that Toha, the theme I use for Hugo, has been updated.

In fact, it was Hugo that told me, because it was impossible to compile the site on my laptop with a recent version of Hugo. So I had two options:

1. Either use an older version of Hugo locally
2. or update my theme to be compatible with my local Hugo

Switching from Git Module to Hugo Module

This is well explained in the theme’s documentation. So you need to:

1. From gitmodule (…)

# Terminal
git rm themes/toha/
git commit -m "Remove v3 theme"

2. Remove the line theme: toha from the config .yaml

3. Rename config.yaml to hugo.yaml
4. (…) to hugomodule

# Terminal
hugo mod init github.com/timothechauvet/timothechauvet.github.io

5. Add the theme as a module in hugo.yaml

module:
  imports:
  - path: github.com/hugo-toha/toha/v4
  mounts:
  - source: static/files
    target: static/files
  - source: ./node_modules/flag-icon-css/flags
    target: static/flags
  - source: ./node_modules/@fontsource/mulish/files
    target: static/files
  - source: ./node_modules/katex/dist/fonts
    target: static/fonts

6. Make the various changes to the hugo.yaml file. For me, there were
   • darkMode
   • analytics (I use GoatCounter, goats are funny)
7. Initialize the modules

# Terminal
hugo mod tidy
hugo mod npm pack
npm install

8. A bit annoying because Node hates outdated libraries. I also ran npm audit fix --force in the terminal to temporarily resolve this.

Updating the GitHub Action

First of all, a big problem for me was that I wasn’t using the actions dedicated to compiling Hugo. So I swapped downloading the binary for the peaceiris/actions-hugo action, which makes everything easier.

Otherwise, the rest remained similar. PeaceIris also had an action to publish the site on GitHub Pages, but I find it really overkill for 2 fewer small steps.

Here’s what worked for me:

name: 🤖 Deploy Hugo site to Pages

on:
  push:
    branches: 
      - master
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: true

defaults:
  run:
    shell: bash

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3.0.0
        with:
          hugo-version: '0.139.4' # Latest version as of date
          extended: true
            
      - name: Update hugo modules
        run: |
          # Retrieve the latest modules
          hugo mod get -u
          hugo mod npm pack

          # Clean the go.sum file
          hugo mod tidy          
      
      - name: Install node modules
        run: |
          # Install Node modules
          npm install

          # Remove security vulnerabilities
          npm audit fix --force          

      - name: Build with Hugo
        env:
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"          
      
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4 # I was also able to update this since I have Node >16!

Solving problems that weren’t there before

And now, the site works!! Plus:

• Language switching works well within an article
• Better spacing of elements
• A new color palette
• A table of contents
• Ability to publish an article in the future

But I quickly noticed that quite a few images are now broken in production

So I had to replace all <img src=.*/> with { {< img src= >}}

The image paths also changed, from myimage.webp to /posts/tutorials/my-article/myimage.webp (only for the translated English part)

For the homepage, the certification badges were also broken. It’s a bit special because they are rendered by the theme by default and not written in Markdown like this article, for example. So I replaced the static images hosted in static/images/about with a Storage Account on Azure.

And finally, I removed the tags, because guess what: now they work. And I absolutely don’t feel like managing that.

If you have any questions or suggestions, feel free to contact me by email, on LinkedIn, or directly by opening an issue on GitHub.