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 。
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。
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… 。
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… 。
Hugo popular theme 3: even
A very concise theme, transplanted from hexo theme even. GitHub address: https://github.com/olOwOlo/hu… 。
Hugo popular theme 4: octopress
Classic theme transplanted from octopress blog. GitHub address: https://github.com/parsiya/Hu… 。
Hugo popular theme 5: Tokiwa
A minimalist blog theme, optimized the display of Chinese characters. GitHub address: https://github.com/heyeshuang… 。
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.
① Hugo official documents
② Hugo Themes