Building a blog site 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 quickly create a personal blog that relies on a large platform by choosing a large site such as Sina Blog, CSDN, blog Park, etc., but the disadvantage of this approach is that the speech is too limited and the underlying technology of the site is not accessible. So, if you want to be creative and have more control over your website, it’s best to build a website yourself.

Yu Li said. This paper links: www.yulisay.com/d/nkpvy.htm… Support wechat browser to open.

More wonderful articles, please move to fish stand said personal website. Welcome to enjoy and make fun of the shortcomings.

This topic will focus on the process of building a blog website, different blog building techniques and popular style themes. The whole series consists of the following three parts:

  • The current popular blog technology stack
  • Hexo and its popular stylistic themes
  • Hugo and his popular stylistic themes

Hugo is a fast and modern static site generator written using Go that aims to make web site creation fun. Features are simple, easy to use, efficient, good scalability, rapid deployment. Its official website is gohugo.io.

Install Hugo

Installing Hugo is fairly simple, but you need to install the Go runtime first. In the Mac operating system, brew install Hugo is used to install Hugo.

Initialize a project named HUgo-blog: Hugo new site hugo-blog, then generate the following Hugo project directory:

.├ ─ config.toml # website Setup Info ├─ Archetypes # Download.md ├─ Content # Download.md ├─ Data ├─ layouts # Store layout file ├ ─ ─ public # public folder, file used to store the generated site ├ ─ ─ the static # deposit static files, such as images, CSS, JS └ ─ ─ themes # deposit themeCopy the code

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 starting the service normally, open http://localhost:1313/ in your browser to see our website.

Popular Hugo theme

When we use Hugo blog, the most we want is to find a theme that suits us. Here are some popular Hugo themes. In addition, regarding the writing method and Hugo theme modification, you can refer to the official Hugo document in the reference of this article, which will not be described here.

Locate, install, and configure the Hugo theme

The best way to do this is to go to github.com/ and search for the keyword: Hugo Theme. Or use a search engine and search: Hugo theme site:github.com.

Then go to the project directory and download and install the theme we need (theme-demo is just a sample resource, please note that it is a real resource instead) :

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

Want to use the download a theme, add – demo/themes/theme exampleSite/config toml the configuration, you also need to in the config. Toml configured in the subject:

theme = "theme-demo"
Copy the code

In addition, some theme-demo folders have demo or Example directories. The file structure is almost the same as that of the new Hugo project, so that the user’s configuration can override the theme configuration.

Hugo’s 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 correctness of code. Github address: github.com/reuixiy/hug… .

Hugo’s popular theme # 2: Clarity

The open source Clarity design system based on VMware, featuring rich code support, dark/light mode, mobile support and more, has been designed with a tech-conscious theme for Hugo. Github address: github.com/chipzoller/… .

Hugo’s popular theme: Even

A very neat theme, ported from hexo-theme-even. Github address: github.com/olOwOlo/hug… .

Hugo’s Popular Theme 4: Octopress

A classic transplant from Octopress’s blog. Github address: github.com/parsiya/Hug… .

Hugo’s popular theme # 5: Tokiwa

A minimalist blog theme that optimizes the display of Chinese characters. Github address: github.com/heyeshuang/… .

In addition to the above, there are many more good Hugo-style themes for you to choose from, which can be found at hugothemed website. If you have good ideas and designs, you can also create and publish your own Hugo theme, and you are welcome to leave a comment on my website.

Refer to the link

① Official document of Hugo

(2) Hugo Themes