Playing through the blog sites, I sorted out Hugo and its popular style themes

Time:2021-8-16

Building a blog website is one of the most common ways for individuals to enter the Internet world. With the development of website technology, how to build a blog website has become very easy. Of course, you can choose large websites such as Sina blog, CSDN and blog Garden to quickly create personal blogs that rely on large platforms. However, the disadvantage of this method is that there are too many speech restrictions and you can’t touch the underlying technology of the website. Therefore, if you want to give full play to your creativity and expect to have more initiative in the website, you’d better choose to build a website yourself.


This topic will focus on the construction process of blog website, different blog construction technologies and their popular styles. The whole series is composed of the following three articles:

  • Current popular blog technology stack
  • Hexo and its popular style theme
  • Hugo and its popular style theme

Hugo is a fast and modern static site generator written in go, which is designed to make website creation interesting. It is characterized by simplicity, ease of use, high efficiency, good scalability and rapid deployment. Its official website is: https://gohugo.io 。

Install Hugo

Installing Hugo is quite simple, but you need to install the go running environment first. Take the Mac operating system as an example, the command to install Hugo is brew install Hugo.

Initialize a project named Hugo blog: Hugo new site Hugo blog, and the following Hugo project directory will be generated:

.
Configuration information of config.toml # website
Archetypes # is a template for storing. MD files
Content - content # stores. MD files
Data - data # store Hugo data
Layouts # store layout files
Public - public # public folder, which is used to store the generated site files
Static - static # stores static files, such as pictures, CSS, and JS
└ - themes # storage theme

Quick operation Hugo

View version: Hugo version

Create a new article: Hugo new post / my-first-blog.md

Generate static file: Hugo – t even

Start server: Hugo server

After the service is started normally, open it in the browser http://localhost:1313/ See our website.

Popular Hugo theme

When using Hugo blog, what we want most is to find a theme suitable for ourselves. The following will introduce some popular Hugo themes with pictures and pictures. In addition, for the writing method and Hugo topic modification, you can refer to the official Hugo documents in this reference, which will not be repeated here.

Locate, install, and configure Hugo themes

The best way to search is in https://github.com/ In, search for keywords:hugo theme。 Or use a search engine to search for:hugo theme site:github.com

Playing through the blog sites, I sorted out Hugo and its popular style themes

Then go to the project directory, download and install the topics we need (the theme demo is only an example resource, please note that it is replaced by the actual resource):

git clone https://github.com/theme-demo.git themes/theme-demo
cp -r themes/theme-demo/_source/* source

If you want to use the downloaded theme, add the configuration in themes / theme demo / examplesite / config.toml. You also need to configure the theme in config.toml:

theme = "theme-demo"

In addition, there will be demo or example directories in some theme demo folders. The file structure is almost the same as that of the newly created Hugo project. This setting is so that the user’s configuration can override the theme configuration.

Hugo popular theme 1: meme

Meme is a powerful and highly customizable gohugo blog theme designed for personal blogs. Meme themes focus on elegance, simplicity, modernity, and code correctness. GitHub address: https://github.com/reuixiy/hu… 。

Playing through the blog sites, I sorted out Hugo and its popular style themes

Hugo popular theme 2: clarity

The open source clarity design system based on VMware has the characteristics of rich code support, dark / light mode and mobile support, and has designed a technology conscious theme for Hugo. GitHub address: https://github.com/chipzoller… 。

Playing through the blog sites, I sorted out Hugo and its popular style themes

Hugo popular theme 3: even

A very concise theme, transplanted from hexo theme even. GitHub address: https://github.com/olOwOlo/hu… 。

Playing through the blog sites, I sorted out Hugo and its popular style themes

Hugo popular theme 4: octopress

Classic theme transplanted from octopress blog. GitHub address: https://github.com/parsiya/Hu… 。

Playing through the blog sites, I sorted out Hugo and its popular style themes

Hugo popular theme 5: Tokiwa

A minimalist blog theme, optimized the display of Chinese characters. GitHub address: https://github.com/heyeshuang… 。

Playing through the blog sites, I sorted out Hugo and its popular style themes

In addition to the above, there are more good Hugo style themes for you to choose from. You can go to the Hugo theme website to find them. If you have good ideas and designs, you can also create and publish your own Hugo theme. Please leave a message to my website Yuli at that time.

Reference link

① Hugo official documents

② Hugo Themes