Switching from Hexo to Hugo

Several months ago I switched my site from Hexo-building to Hugo-building. Some readers asked me why the move and how to do it, so here I’d like to share my experience with you.

1. Hugo v.s. Hexo

Both Hexo and Hugo are static site generators, so why did I choose Hugo?

Hugo is super fast. At first I thought it means the page load time is short, so my readers could view the pages of my site instantly, and that’s the reason I decided to switch to Hugo. Later I realized it refers to the site building speed ( < 1ms per page according to Hugo site ), which means I can build the site fast and preview the changes in real time. It’s really a benefit, especially when you have written hundreds of articles, for you can still build your site in seconds (or even in a second) .

Besides, Hexo depends on Node.js. Sometimes when you install a wrong version of Node.js, it leads to problems. You don’t need to worry about that in Hugo because you don’t need to install external dependencies for it.

What about Hugo’s drawbacks?

From my experience, compared with Hexo, the site configuration of Hugo is a bit difficult for beginners. Hexo provides a default theme for you to begin with. While in Hugo, at first you have to pick a theme and install it. Besides, Hexo has a site configuration as well as a theme configuration. The site configuration fits all themes and saves your time when you change the theme. While Hugo has only one configuration file, and different themes have different settings, which makes beginners a little confused.

2. How I switched from Hexo to Hugo?

Since I have written some posts on the Hexo site, the main question is how to switch to Hugo without changing the links of the posts. I find this article helpful, so I followed the instructions in it to make the change.

2.1. Generate the pages by Hugo locally

First I followed the step0 and step1 in my first tutorial to build a Hugo site. Then:

(1) Copy the posts from MyHexoSite > source > _posts to MyHugoSite > content > post folder.

Please use copy , not move , so that if something went wrong, you can go to MyHexoSite folder and try it again. And I also advice you to make a backup of MyHexoSite folder.

(2) Change the front matter of the posts.

In Hexo the the published date is formatted as date:yyyy-mm-dd HH:MM:SS , while in Hugo a time zone needs to be added. For example, in my articles the format is date:yyyy-mm-ddTHH:MM:SS+08:00 .

(3) Change the image links ( You may read Step1.5 in my first tutorial first)

For local images:

Copy all images from MyHexoSite > source > _posts > imgs folder to MyHugoSite > static > imgs folder, then change the links in the markdown files.

If in Hexo the link is like:

![image1_title](imgs/image1.jpg)

In Hugo it’s changed to:

![image1_title](/imgs/image1.jpg)

If in Hexo the link is like:

<img src="imgs/image1.jpg" alt="image1_title" align=center />

Here align=center is optional. It’s set to display the image in the center of the line.

In Hugo it’s changed to:

{{< figure src="/imgs/image1.jpg" title="image1_title" >}}

For web images:

If in Hexo the link is like:

![image2_title](image2_weblink)

You can keep the links as the same.

If in Hexo the link is like:

<img src="image2_weblink" alt="image2_title" align=center />

You need to remove the double quotes around image2_weblink and image2_title.

(4) permanent link

To be consistent with the URL of my Hexo site, I set the permanent links in the config.toml of the Hugo site as:

[permalinks]
  post = "/:year/:month/:day/:filename/"

I used the Next theme of Hexo. You may need to refer to the links of your own Hexo site before setting the permalinks.

2.2. Push to GitHub for the first time

(1) Save the links of several articles of your Hexo site. Later you can use them to check the links of your Hugo site.

(2) Follow the step2 in my first tutorial, except one thing. Because I have pushed Hexo-generated pages to GitHub before, the GitHub repository was not empty, the first time I added -f after git push as follows:

git add .
git commit -m "YourCommitMessage"
git push -f upstream master

From the next time I use git push upstream master .

(3) Clicking the links saved in step(1) and check whether the links point to the same articles as before.

References

1. Comparison of Hexo and Hugo: https://www.stackshare.io/stackups/hexo-vs-hugo
2. Switch from Hexo to Hugo: https://jdhao.github.io/2018/10/10/hexo_to_hugo/