Migrating from WordPress to Hugo

After registering my first domain, steveyigame.com, in 2018, I tried to set up my first WordPress blog. At that time, I was also learning to use Linux systems and came to understand the difference between cloud drives (like Google Drive) and file servers.

Why Switch to Hugo? Is WordPress Not Good?

I believe there is no such thing as good or bad, it’s all personal preference. However, as I gradually learned about backend development, I thought, “If it can be a static website, let it be static and don’t let the website server handle things.” PS. WordPress can also be optimized very well, but I simply don’t want to optimize it XD.

In addition, because WordPress is a dynamic website, it must be connected to a database. When a general user visits the website, the website goes to the database to fetch data, processes it, and then responds to the user.

I don’t want to maintain a database R

Performance Comparison

Let’s take a look at the specific differences before and after the switch.

• WordPress loading speed

• Hugo loading speed

As you can see, WordPress takes 4.11 seconds to load for the first time, while Hugo only takes 1.41 seconds, a significant difference.

About Hugo

Because Hugo is a static website, I thought of deploying it on GitHub and using it with GitHub Pages.

So I opened two repositories, one for the source files of the website. Of course, if you want to open it in the same repository, you can use different branches!

• Hugo source code

• Generated website source code

Installing Hugo

First, let’s install Hugo on your computer.

The Hugo official website provides pre-compiled versions for the following systems, which means that these systems do not need to be compiled manually!

• macOS (Darwin) for x64, i386, and ARM architectures
• Windows
• Linux
• OpenBSD
• FreeBSD

You can download the pre-compiled files directly from the official website: https://github.com/gohugoio/hugo/releases

If you are a macOS user, you can also install Homebrew and use the following command to install Hugo:

brew install hugo

Configuring Hugo

Next, we use the following command to create a new website:

hugo new site path

Then we will see these files:

Open the config.toml file and you will see these options that we can customize for our website:

• baseURL
• languageCode
• title

Then you can use this command to add a new post/page:

hugo new post/hello.md

After getting familiar with Hugo, let’s set up the GitHub part! PS. If you want to learn more about how to use Hugo, you can refer to the official documentation.

Deploying with GitHub and GitHub Pages

1. Create a repository.
2. In the .github/workflows directory of the blog source code, add a GitHub Action configuration file.

Here I used three Actions, each of them is as follows:

• actions/checkout@v2
• peaceiris/actions-hugo@v2
• peaceiris/actions-gh-pages@v3

name: Hugo Build and Deploy

on:
  push:
    branches:
      - main

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.64.1'

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          external_repository: yourusername/yourrepository
          publish_dir: ./docs
          publish_branch: gh-page # branch name
          cname: blog.steveyi.net # if not using custom domain, it is not necessary

3. Commit the configuration file to the GitHub repository.

You will definitely encounter an error at this point because we did not provide an ssh-key for GitHub Action to use.

Let’s first create an ssh-key. Then, in the settings of the repository, select Deploy keys and add a key, remember to check Allow write access.

Next, in the secrets part, upload the Private Key of the SSH Key.

Finally, commit again and there will be no errors!

At the same time, we can also visit the website to see if it can be browsed! PS. If you have a custom domain, be sure to set a CNAME to yourusername.github.io!