What an artifact! One click to generate a beautiful blog website, really fragrant!

Keywords: Java Programming Interview Programmer architecture

As a programmer, if you like to output technical articles, you must have had the idea of building a personal blog website. After comparing a lot of blog frameworks, I found that the blog website built with the theme of Hexo + Hexo theme matrix not only has a beautiful interface, but also has powerful functions. Today, I will take you to build a beautiful blog website with Hexo. I hope it will help you!

Introduction to Hexo

Hexo is a fast, concise and efficient blog framework. We can use Markdown to write articles, and then generate static websites through hexo. Hexo has a very rich theme, and many blogs you have seen are generated with it.

Hexo theme theme

When using Hexo, we usually use it with third-party themes. Here we recommend a theme Hexo theme material designed based on Material Design. The interface is simple and beautiful, and the content of the article is beautiful and easy to read. Responsive design, blog can be well displayed on desktop, tablet, mobile phone and other devices. Built in rich plug-ins, powerful.

Effect demonstration

Let's first look at the effect of the finished product. With this theme, Hexo still has a beautiful interface. Friends who want to build a blog can try it!


We will first use Hexo to build a basic blog site, and then switch to the Hexo theme matrix theme.

  • First, use the following command to install Hexo CLI. You can tell by name that it is a Hexo CLI tool;

npm install -g hexo-cli
  • After successful installation, initialize a blog directory, enter the directory, and then install the dependency;

#  Initialize blog directory
hexo init website-hexo
#  Enter blog directory
cd website-hexo
#  Install blog related dependencies
npm install
  • Such a basic blog website has been built. Do you want to build a blog website in seconds, and then use the following command to start the blog website;

hexo server
  • After successful startup, we can visit the home page. Friends who have used Hexo should know that Hexo should be used with the theme, otherwise it is really ugly. Visit the address: http://localhost:4000/

to configure

To build a blog website, some configurations need to be customized. Next, let's talk about the overall configuration of Hexo and the theme configuration of Hexo theme matrix.

Hexo overall configuration

There are many themes that support Hexo. Here I choose a Hexo theme matrix that I think is more beautiful.

  • First download the theme and unzip it to the themes directory of the project. The download address is: https://github.com/blinkfox/hexo-theme-matery

  • Modify the configuration file under the project root directory_ config.yml, which is the overall configuration of Hexo. Change the theme attribute to Hexo theme matrix;

theme: hexo-theme-matery
  • After the modification is successful, we restart the project and look at the home page. Sure enough, the page is much more beautiful. Visit the address: http://localhost:4000/

  • Of course_ The config.yml file can not only change the theme, but also many website configurations, such as website configuration, website configuration, home page configuration, etc.

#  Website configuration
title: macrozheng #  Website title
subtitle: 'macrozheng Personal blog' #  Website subtitle
description: 'Justice may be late, but will never be absent.' #  Website description
author: macrozheng #  Website author
language: zh-CN #  The language of the website can be set to Chinese
timezone: ''

#  URL configuration
url: http://localhost:4000  #  The URL will affect the original link address of the article page
permalink: :year/:month/:day/:title/ #  Permanent link format for articles

#  Home page configuration
  path: ''
  per_page: 12 #  Pagination settings. The theme settings 6, 12 and 18 are better
  order_by: -date #  In reverse chronological order

#  Paging configuration
per_page: 12
pagination_dir: page

Add fixed page

  • There are some navigation buttons at the top of the home page, such as label, classification, archiving, etc. if we do not create the corresponding page, we will not be able to access it;

  • Use the hexo new page "categories" command to create a new classification page. The classification page contains at least the following contents;

title: categories
date: 2021-09-06 10:19:56
type: "categories"
layout: "categories"
  • Use the hexo new page "tags" command to create a new tab, which contains at least the following contents;

title: tags
date: 2021-09-06 10:25:04
type: "tags"
layout: "tags"
  • Use the hexo new page "about" command to create a new about page. The about page contains at least the following contents;

title: about
date: 2021-09-06 10:28:56
type: "about"
layout: "about"
  • Use the hexo new page 404 command to create a new 404 page, which at least includes the following contents;

title: 404
date: 2021-09-06 10:32:48
type: "404"
layout: "404"
description: "Oops~,I collapsed! The page you want cannot be found :("
  • After the pages are created successfully, the project directory structure is as follows. Here, the directory is pasted for everyone to understand.

Theme configuration

We need to modify not only the configuration of Hexo, but also the configuration of Hexo theme theme, such as menu navigation at the top and about pages, which are configured in the theme. Note: the theme configuration needs to be modified. / themes / Hexo theme matrix/_ Config.yml file.

  • We can configure the navigation menu. For example, I added the item navigation menu;

#  Configure the name, path, and icon for menu navigation
    url: /
    icon: fas fa-home
    icon: fas fa-project-diagram"
      - name: mall
        url: https://github.com/macrozheng/mall
      - name: mall-admin-web
        url: https://github.com/macrozheng/mall-admin-web
      - name: mall-tiny
        url: https://github.com/macrozheng/mall-tiny
    url: /tags
    icon: fas fa-tags
  • After adding successfully, the navigation menu will have the item menu, and the secondary menu can be displayed;

  • We can configure the introduction on the home page and modify the configuration under dream;

#  Configure the statement of "dream" displayed on the home page
  enable: true
  showTitle: true
  title: About this site
  text: This site is macrozheng The original intention of personal blog website is to share and record the technology they usually learn. author Github Open source project mall(50K+Star),Welcome to my official account.「macrozheng」. 
  • After successful configuration, the home page is displayed as follows;

  • We can configure the personal information in the banner on the home page;

#  home page   banner   The second line of personal information configuration in. If it is left blank, it will not be enabled
  github: https://github.com/macrozheng # https://github.com/xxx
  email: macrozheng@126.com # xxx@xxx.com
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  qq: # 123456789
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  juejin: https://juejin.im/user/5cf7c1d7f265da1bc07e28b7
  jianshu: https://www.jianshu.com/u/9bdcaae6d6b7
  rss: false # true,false
  • Since we have customized two links, nuggets and Jianshu, we also need to modify / layout under the theme directory/_ Add the following contents to the partial / social-link.ejs file, otherwise it cannot be displayed;

<% if (theme.socialLink.juejin) { %>
    <a href="<%= theme.socialLink.juejin %>" class="tooltipped" target="_blank" data-tooltip="Follow my Nuggets: <%= theme.socialLink.juejin %>" data-position="top" data-delay="50">
        <i class="fab fa-zhihu1">Dig</i>
<% } %>

<% if (theme.socialLink.jianshu) { %>
    <a href="<%= theme.socialLink.jianshu %>" class="tooltipped" target="_blank" data-tooltip="Follow my Jane book: <%= theme.socialLink.jianshu %>" data-position="top" data-delay="50">
        <i class="fab fa-zhihu1">simple</i>
<% } %>
  • After successful configuration, the home page is displayed as follows;

  • We can configure the about page. Personal information and my project are configured below, and the technical display is closed;

#  Configure personal information in the about page, including avatar, occupation and personal introduction
  avatar: /medias/avatar.png
  career: Java Development Engineer
  introduction: absorbed Java Technology sharing, covering SpringBoot,SpringCloud,Docker,Middleware and other practical technologies, Github Open source project mall(50K+Star). 

#  Configure my project information on the about page. If you don't need this information, you can set it inactive or delete it
  enable: true
      icon: fab fa-java
      iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'
      url: https://github.com/macrozheng/mall
      desc: mall The project is a set of e-commerce system, including foreground mall system and background management system SpringBoot+MyBatis realization.
        icon: fab fa-vuejs
        iconBackground: 'linear-gradient(to bottom right, #F06292 0%, #EF5350 100%)'
        url: https://github.com/macrozheng/mall-admin-web
        desc: mall-admin-web It is a front-end project of e-commerce background management system based on Vue+Element realization.
      icon: fab fa-java
      iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'
      url: https://github.com/macrozheng/mall-tiny
      desc: be based on SpringBoot+MyBatis Single application project skeleton.

#  Configure the "my skills" information on the "about" page. If you don't need this information, you can set it as inactive or delete it
  enable: false
      background: 'linear-gradient(to right, #FF0066 0%, #FF00CC 100%)'
      percent: 85%
  • After the configuration is successful, the personal page is displayed as follows;

  • There are other useful configurations, such as Github link configuration, reprint configuration, sharing configuration, typewriter subtitle configuration and filing number configuration.

#  Is the configuration on   header   Display in   fork   me   on   github   The default is true. You can modify it to your warehouse address
  enable: true
  url: https://github.com/macrozheng
  title: Fork Me

#  Reprint statement
  enable: true
  default: cc_by_nc_nd
#  sharejs article sharing module
#  Support sequence. The optional items are twitter,   facebook,   google,   qq,   qzone,   wechat,   weibo,   douban,   linkedin.
  enable: true
  sites: qq,wechat,weibo,douban
#  Typing effect subtitle
#  If there is a symbol  ‘ , Please in  ’  Add before  \
  enable: true
  loop: true #  Cycle
  showCursor: true #  Show cursor
  startDelay: 300 #  Start delay
  typeSpeed: 100 #  Typing speed
  backSpeed: 50 #  Delete speed
    - Justice may be late, but will never be absent.

#  ICP filing information is displayed at the end
  enable: false
  url: #  Filing link
  text: #  Filing information

Writing articles

When writing articles, we can directly use Markdown to write, and then add front matter configuration in the header. All articles are placed in source/_ In the posts directory.

  • Here we are_ After adding articles to the posts directory, you can see them by restarting the blog website;

  • We must add front matter to each article. Front matter can be used to configure the title, classification, label and other information of the article. A simple configuration is as follows:;

title: mall integration SpringBoot+MyBatis Build basic skeleton
date: 2021-08-21 16:30:11
permalink: /pages/c68875/
  - mall Learning tutorial
  - Architecture
  - SpringBoot
  - MyBatis
  • There are many front matter configurations, which will not be described here. Please refer to the following table directly;

  • If you want some articles to be recommended on the home page, you can add the top: true configuration;

  • If you copy the picture directly, you will find that the picture cannot be displayed. We need to change the relative path of the article picture to the absolute path to display it;

![Relative picture path](../images/springcloud_arch.png)
![Absolute picture path](/images/springcloud_arch.png)
  • If you have code in your article, there will be problems with the display by default. You need to modify the configuration of Hexo_ config.yml, disable highlight and enable prismjs to display normally;

  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''
  • If it doesn't work here, you can use the hexo clean command to empty the cache and try again, with a code block style comparison diagram attached;

  • Also, the search plug-in does not take effect by default. We need to use the following command to install the search plug-in first;

npm install hexo-generator-search --save
  • Then modify the configuration file of Hexo in the root directory_ config.yml, add the following configuration;

  path: search.xml
  field: post
  • After the search takes effect, the display effect is as follows.


Hexo generates a website quickly and easily. A command generates a static file and then places it in the html directory of Nginx.

  • Use the hexo generate command on the command line to package the project into a static file, and the output file directory is public;

  • Next, copy all the files in the public directory to the html directory of Nginx to complete the deployment. The displayed content after deployment is as follows.


Using Hexo with Hexo theme matrix to build a blog website not only has a beautiful interface, but also has powerful functions. If you want to build your own blog website, this is a good choice!

Posted by rammac13 on Fri, 17 Sep 2021 22:56:56 -0700