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

Time:2021-9-23

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 (later)

<div class=”bordor-separation”></div>

Hexo is a fast, concise and efficient blog framework. Hexo uses markdown (or other rendering engine) to parse articles and generate static web pages with beautiful themes in a few seconds. Its official website is: https://hexo.io 。

Installing hexo

Installing hexo is fairly simple, but you need to install the following applications first:

Node.js >=12.0
Git

After installing node.js and git, the command to globally install hexo: NPM install hexo cli – G.

Initialize a project named hexo blog: hexo init hexo blog. The following hexo project directory will be generated:

.
├── _ Configuration information of config.yml # website
Package.json # application information
Public - public # public folder, which is used to store the generated site files
Scaffolds # Templates folder
Source - the source # resource folder used to store content
└ - themes # theme folder

Quick operation hexo

View version: hexo version or hexo V

Start the service: hexo server or hexo s

Create a new article, for example: hexo new “Hello hexo”

Generate static files: hexo generate or hexo G

Deployment website: hexo deploy or hexo D

Clear cache file (DB. JSON) and generated static file (public): hexo clean

After the service is started normally, open it in the browser http://localhost:4000/ , you will see a default theme website, as shown in the figure:

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

Popular hexo theme

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

Locate, install, and configure hexo themes

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

Playing through the blog sites, I sorted out hexo 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, you need to\_ Configure in config.yml:

theme: theme-demo

Then, use hexo clean to clear the cache and execute hexo s to see the effects of the following hexo style themes.

Hexo popular theme 1: Maupassant

Maupassant was originally a set of responsive templates designed and developed by CHO God for Typecho platform. The volume is only 20KB and performs well on devices of various sizes. Because its simple and atmospheric style is loved by many users, it has been transplanted to multiple platforms. GitHub address: https://github.com/tufu9441/m… 。

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

Hexo popular theme 2: Mary

A hexo blog theme using material design and responsive design. GitHub address: https://github.com/blinkfox/h… 。

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

Hexo popular theme 3: pure

It is characterized by supporting multiple languages; Third party comment box; Personal Douban book list can be displayed; Alipay and wechat rewards can be set. GitHub address: https://github.com/cofess/hex… 。

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

Hexo popular theme 4: ILS

The interface design is very simple and refreshing, but it has complete functions and elegance, recording life and displaying words. GitHub address: https://github.com/XPoet/hexo… 。

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

Hexo popular theme 5: Cafe

Cafe theme aims to pursue simplicity, simple operation and reading comfort. GitHub address: https://github.com/giscafer/h… 。

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

Hexo popular theme 6: Blue Lake

A simple and lightweight responsive hexo blog theme looks like Sina blog. GitHub address: https://github.com/chaooo/hex… 。

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

Hexo popular theme 7: Shana

Shana is a theme based on hexo 3.2. It was born to celebrate the coronation of Shana sauce as the king of sprouting in 2016. Due to more animations, low configuration mobile phones may get stuck when accessing the mobile terminal. GitHub address: https://github.com/ShanaMaid/… 。

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

In addition to the above, there are more good hexo style themes for you to choose from, such as even, next, yilia, hacker, etc. If you have good ideas and designs, you can also create and publish your own hexo theme. Please leave a message to my website Yuli at that time.

Reference link

① Hexo official documents

② Hexo theme tutorial