First, let's talk about why we need to migrate#
Before this, I was using 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 looking at it for a while, I felt it was a bit flashy. And when I looked up things online and went to other people's blogs, I mostly saw hexo + next... I got a bit tired of it.
But it's also easy to understand. Hexo is easier to use 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 done 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, documentation, and optimization configurations. 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.
Generating 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 the blog, which generally includes:
- 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 generally 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, configure the config.toml according to the documentation provided by the theme. Generally, 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.
Generating blog posts#
Use the command hugo new posts/xxxx.md 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 into a page and will not be displayed in the blog. Delete or change it to false to render it.
The method of adding tags and categories is the same as in hexo.
Generating 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, delete the draft attribute and add a layout attribute to indicate what type of page it is. For the about page, use layout: about.
Browsing and deployment#
To browse, use the command hugo serve, and the address will be http://localhost:1313/.
It is slightly different from hexo.
Execute the command hugo to generate static pages. Then, a public folder will be added to 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.