Let's talk about why we need to migrate#
Before this, I used hexo + next theme, and then I added Netease Cloud's external link and Live 2D, tag cloud and other things on a whim. Some people said it looked good, but after seeing it too much, I felt a bit flashy. And when I look up things online and go to other people's blogs, what I see is mostly hexo + next... It's a bit aesthetically fatiguing.
But it's also easy to understand. Hexo is easier to get started with and more stable, with a fully functional and mature theme (Next). At this point, my attention turned to Hugo.
Hugo is developed using Go language and claims to be the fastest website building tool in the world. I don't know how fast it is, but when I generate static web pages with hexo, I still have to wait, but with Hugo, I never have to wait. It feels like it's ready the moment I hit enter after typing the command...
On the other hand, Hugo supports hot reloading, which means that the modified content is displayed in real-time on the webpage. Compared to hexo, which requires multiple refreshes, it is more convenient.
Although Hugo has the advantages mentioned above, it is not as well-known as hexo in terms of tutorials, resources, and optimization configurations. There is relatively less information available online compared to hexo, so I still have to explore some things on my own.
Setup#
Environment#
-
Since Hugo relies on Go language, you also need to install Go
-
Then install Hugo
After extracting Hugo, you just need to add it to the environment variables.
Generate a blog#
After installing Hugo, you can use the command line to run hugo new site 'blog name'. This way, Hugo will generate a folder to store your blog, which usually contains:
- archetypes/
- content/
- data/
- themes/
- layouts/
- static/
- config.toml
General configuration information is written in config.toml. Articles and some pages are stored in the content folder. The archetypes folder usually contains the header configuration information format when generating pages using hugo new. The themes folder contains the themes you need.
Theme installation#
Unlike hexo, Hugo does not come with built-in themes. So when you run hugo serve to browse, it will be blank. At this point, you need to go to the Hugo official theme library to find a theme you like.
At the same time, follow the documentation provided by the theme to configure it in config.toml. Usually, the downloaded theme folder contains an exampleSite folder, which is the author's configuration example. If you don't know what to configure, you can copy the author's example and modify it as needed.
Generate blog posts#
Use the hugo new posts/xxxx.md command to generate the markdown file you need in the content/posts folder. Edit it using markdown syntax.
One thing to note is that the newly generated file has a draft attribute at the top, which indicates whether it is a draft. If it is set to true, the file will not be rendered as a page and will not be displayed in the blog. Delete or change it to false to render it.
The method for adding tags and categories is the same as in hexo.
Generate pages#
Special pages (such as archives page) can be generated using hugo new page/xxx.md. For example, for the about page, use hugo new page/about.md. After generating it, delete the draft attribute and add a layout attribute to indicate what type of page it is. For the about page, use layout: about.
Browse and deploy#
To browse, use the hugo serve command, and the address will be http://localhost:1313/
It's slightly different from hexo.
Run the hugo command to generate static pages. A public folder will be created in the blog folder, which contains the final generated pages. Just push the files in the public folder to the repository.
Finally#
From a long-term perspective, the more blog posts you write, the more obvious the advantages of Hugo become.
But actually, I just wanted to play around with it.
Just for fun.