Blog Renovation - From Jekyll to Hugo

In the past years, the blog was generated using Jekyll. Recently, I decided to migrate to Hugo along with other changes, such as utilising discussion plugin Valine.

Reasons

1. Hugo is written in Golang and it takes less time to build than Jekyll. This determines how fast the live edit will take place.
2. Some plugins in the old websites are outdated and hard to maintain.

My Choice of Theme - LoveIt

Lots of themes are available. LoveIt supports various tools and functionalities. It is also highly configurable and customisable. Check it out 👍

Valine + Valine Admin

The discussion system after the content of each post has been changed to Valine. The main reason for abandoning Disqus is its accessibility from mainland China.

Valine is based on LeanCloud and it can be easily deployed as described in the official quick start guide.

Valine does not have a built-in way to moderate comments. This is when Valine-Admin comes into play. It provides

• Email notification
• Comment moderation
• Spam filtering with Akismet

Deploy Using GitHub Actions

There is a guide written by Hugo about how to host and deploy on GitHub by using a script.

I prefer to use GitHub Actions to deploy the site on gh-pages branch whenever the main branch got updated. The script below checkout the repository, setup Hugo, make it available on cache, build the site and push it to the gh-pages branch.

 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
27
28
29
30
31
32
33
34
35
36
37
38

name: deploy

on:
  push:
    branches:
      - main  # Set a branch to deploy

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - uses: actions/cache@v2
        with:
          path: /tmp/hugo_cache
          key: ${{ runner.os }}-hugomod-${{ hashFiles('**/go.sum') }}
          restore-keys: |
            ${{ runner.os }}-hugomod-            

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
          cname: example.com # CHANGE THIS

Tips, Pitfalls and Final Thoughts

• While migrating from Jekyll to Hugo, the posts can be converted using these tools.
• Migrate Disqus comments to Valine using disqus-to-valine.
• The lookup order for layouts and assets (css, scss) are root directory and then under /themes/ folder. Therefore, if you want to customise anything in the theme, you can create a similar path on the root directory to overwrite the files in the theme.
• It is a bit odd how to support multilingual tags. You need to create a folder for each tag and then have a Markdown file containing its translation.

Hope you enjoy the design and the posts on PwzXxm ❤️ ❤️ ❤️