What an artifact! One key to generate beautiful blog site, really sweet!

As a programmer, if you enjoy Posting technical articles, you’ve probably thought about creating a personal blog site. After comparing many blog frameworks, I found that Hexo+ Hexo-theme-matery blog sites are not only beautiful, but also powerful. Today, I will use Hexo to build a beautiful blog website. I hope it will help you!

SpringBoot e-commerce project mall (50K + STAR) address: github.com/macrozheng/…

Hexo profile

Hexo is a fast, concise, and efficient blogging framework. We can use Markdown to write articles and then generate static websites from Hexo, which has a rich theme and is used to generate many of the blogs you’ve seen.

Hexo – theme – matery theme

Hexo is usually used with third-party themes. Here we recommend hexo-Theme-Matery, a theme based on Material Design, with a simple and beautiful interface and easy-to-read article content. With responsive design, blogging works well on desktop, tablet, mobile and other devices. Built-in rich plug-ins, powerful.

Results demonstrate

Let’s take a look at the finished product, Hexo with this theme, the interface is very beautiful, if you want to join the blog can try it!

Set up

We will build a basic blog site using Hexo and then switch to the Hexo-theme-matery theme.

• First, run the following command to installhexo-cli, Hexo’s CLI tool from its name;

npm install -g hexo-cli
Copy the code

• After a successful installation, initialize a blog directory and go to that directory, then install dependencies;

Initialize the blog directory
hexo init website-hexo
Enter the blog directory
cd website-hexo
Install blog dependencies
npm install
Copy the code

• Such a basic blog site is built, is not second to build a blog site, and then use the following command to start the blog site;

hexo server
Copy the code

• After successfully launching, we can visit the homepage. If you have used Hexo before, you should know that Hexo should be used with a theme, otherwise it is really ugly. Visit http://localhost:4000/

configuration

To build a blog site, some configurations need to be customized, so let’s talk about Hexo’s overall configuration and hexo-theme-matery’s theme configuration.

Hexo overall configuration

There are a number of themes that support Hexo, and I’ve chosen a hexo-theme-matery that I think is pretty.

• First download the theme and unzip it into the projectthemesDownload address:Github.com/blinkfox/he…

• Modify the configuration file in the root directory of the project_config.yml, the file for Hexo’s overall configuration willthemeAttribute tohexo-theme-matery;

theme: hexo-theme-matery
Copy the code

• After successful modification, we restarted the project and looked at the home page again. As expected, the page was much more beautiful. Visit the address: http://localhost:4000/

• Of course,_config.ymlFiles can not only change the theme, but also a lot of website configuration can be changed, such as website configuration, url configuration, home page configuration, etc.

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

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

# Home page configuration
index_generator:
  path: ' '
  per_page: 12 # pagination Settings, this topic Settings 6, 12, 18 is better
  order_by: -date # In reverse chronological order

# pagination configuration
per_page: 12
pagination_dir: page
Copy the code

Adding a fixed page

• There are some navigation buttons at the top of the home page, such as labels, categories, archives, etc., if we do not create a corresponding page, it will not be accessible;

• usehexo new page "categories"Command to create a category page. The category page must contain at least the following content.

---
title: categories
date: 2021-09-06 10:19:56
type: "categories"
layout: "categories"
---
Copy the code

• usehexo new page "tags"Command to create a TAB page. The TAB page must contain at least the following content.

---
title: tags
date: 2021-09-06 10:25:04
type: "tags"
layout: "tags"
---
Copy the code

• usehexo new page "about"Command to create an about page. The about page must contain at least the following information.

---
title: about
date: 2021-09-06 10:28:56
type: "about"
layout: "about"
---
Copy the code

• usehexo new page 404Command to create a 404 page. 404 contains at least the following information.

---
title: 404
date: 2021-09-06 10:32:48
type: "404"
layout: "404"
Description: Oops, I'm devastated! Can't find the page you want :(" --
Copy the code

• After the page is created successfully, the project directory structure is as follows, and the directory is posted here for your convenience.

The topic configuration

We need to modify not only the Hexo configuration, but also the hexo-theme-matery theme configuration, such as the menu navigation at the top, and the About page, which is configured in the theme. Note: The theme configuration needs to modify the /themes/hexo-theme-matery/_config.yml file.

• We can configure the navigation menu, like I addedprojectThis navigation menu;

# configure the name, path and icon icon of the menu navigation.
menu:
  Index:
    url: /
    icon: fas fa-home
  Project:
    icon: fas fa-project-diagram"
    children:
      - 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
  Tags:
    url: /tags
    icon: fas fa-tags
Copy the code

• Once added successfully, it will be available in the navigation menuprojectThis menu, and can display the secondary menu;

• We can configure and modify the home pagedreamUnder the configuration can be;

# configure the home page to display "dream" statement.
dream:
  enable: true
  showTitle: true
  title: On this site
  text: This site is macrozheng's personal blog site, originally intended to share and record the techniques that he has learned at ordinary times. Github open source project Mall (50K+Star), welcome to follow my official account "Macrozheng".
Copy the code

• After the configuration is successful, the following information is displayed on the home page.

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

# Home page banner in the second line of personal information configuration, left blank means not enabled
socialLink:
  github: https://github.com/macrozheng # https://github.com/xxx
  email: [email protected] # [email protected]
  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 and false
Copy the code

• Since we’ve customized two links,The Denver nuggetsandJane's bookYou also need to modify the/layout/_partial/social-link.ejsFile, add the following content, otherwise cannot display;

<% if (theme.socialLink.juejin) { %> <a href="<%= theme.socialLink.juejin %>" class="tooltipped" target="_blank" Data-tooltip =" Focus on my nuggets: < % = theme. SocialLink. Juejin % > "data - position =" top "data - delay =" 50 "> < I class =" fab fa - zhihu1 "> dug < / I > < / a > < %} % > < % if (theme.socialLink.jianshu) { %> <a href="<%= theme.socialLink.jianshu %>" class="tooltipped" target="_blank" Data-tooltip =" Follow my tooltip: < % = theme. SocialLink. Jianshu % > "data - position =" top "data - delay =" 50 "> < I class =" fab fa - zhihu1 "> short < / I > < / a > < %} % >Copy the code

• After the configuration is successful, the following information is displayed on the home page.

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

# Configure personal information on the "About" page, including profile picture, career and personal introduction.
profile:
  avatar: /medias/avatar.png
  career: Java Development engineer
  introduction: Focus on Java technology sharing, covering SpringBoot, SpringCloud, Docker, middleware and other practical technologies, Github open source project Mall (50K+Star).

# Configure the "My Project" information on the "About" page. If you don't need the information, you can deactivate it or delete it.
myProjects:
  enable: true
  data:
    mall:
      icon: fab fa-java
      iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'
      url: https://github.com/macrozheng/mall
      desc: Mall project is a set of e-commerce system, including the front mall system and background management system, based on SpringBoot+MyBatis.
    mall-admin-web:
        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 is a front-end project of e-commerce background management system, based on Vue+Element implementation.
    mall-tiny:
      icon: fab fa-java
      iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'
      url: https://github.com/macrozheng/mall-tiny
      desc: Single application project skeleton based on SpringBoot+MyBatis.

# Configure the "My Skills" information on the "About" page. If you don't need the information, you can disable it or delete it.
mySkills:
  enable: false
  data:
    Java:
      background: 'linear-gradient(to right, #FF0066 0%, #FF00CC 100%)'
      percent: 85%
Copy the code

• If the configuration is successful, the personal page is displayed as follows.

• There are other useful configurations, such as the Github link configuration, the Reprint configuration, the share configuration, the typewriter subtitle configuration, and the record number configuration.

# configure whether to fork me on github in header. Default is true. You can change this to your repository address.
githubLink:
  enable: true
  url: https://github.com/macrozheng
  title: Fork Me

# reprint statement
reprint:
  enable: true
  default: cc_by_nc_nd
  
# shareJS Article sharing module.
# Support order, optional items are Twitter, Facebook, Google, QQ, Qzone, Wechat, Weibo, Douban, linkedin.
sharejs:
  enable: true
  sites: qq,wechat,weibo,douban
  
# Typing effects subtitle.
# If there is a sign ', please add \ before '
subtitle:
  enable: true
  loop: true # whether to loop
  showCursor: true Whether to display the cursor
  startDelay: 300 # start delay
  typeSpeed: 100 # Typing speed
  backSpeed: 50 # Delete speed
  sub:
    - Justice may be late, but will never be absent.

# ICP record information tail display
icp:
  enable: false
  url: # File link
  text: # Record Information
Copy the code

Write the article

To write articles, we can use Markdown and put front-matter in the header. The posts will be in the source/_posts directory.

• Here we are already at_postsAdd articles in the directory, restart the blog site can see;

• We must add to each articleFront-matter.Front-matterCan be used to configure the title, category, tag and other information, a simple configuration as follows;

Date: 2021-08-21 16:30:11 Permalink: /pages/ C68875 / Categories:  -Mall Learning Tutorial  -Architecture tags as the following:  - SpringBoot
  - MyBatis
---
Copy the code

• Front-matterThe configuration of many, here will not expand the description, direct reference to the following table can be;

• If you want certain articles to be featured on the front page, add themtop: trueConfiguration;

• If you copy the picture directly, you will find that the picture is not displayed, we need to change the relative path of the article picture to the absolute path can be displayed;

! [Relative picture path] (../images/springcloud_arch.png)
![Absolute picture path] (/images/springcloud_arch.png)
Copy the code

• If you have code in your article, the default display will be a problem and you will need to modify the configuration of Hexo_config.ymlTo disablehighlight, enablingprismjsCan be displayed normally;

highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ' '
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ' '
Copy the code

• If it doesn’t work here, you can use ithexo cleanCommand to clear the cache again, with a code block style comparison diagram;

• By default, the search plug-in does not take effect. You need to install the search plug-in by using the following command.

npm install hexo-generator-search --save
Copy the code

• Then modify the configuration file for Hexo in the root directory_config.ymlAdded the following configurations.

search:
  path: search.xml
  field: post
Copy the code

• After the search takes effect, the following information is displayed.

The deployment of

Hexo web site generation is quick and easy, with a single command to generate static files and place them in Nginx’s HTML directory.

• Used at the command linehexo generateCommand to package the project into a static file with the output file directory aspublic;

• Next, put thepublicCopy all files in the directory to NginxhtmlAfter the deployment, the following information is displayed:

conclusion

Hexo with Hexo-Theme-Matery to build blog sites, not only beautiful interface, but also powerful. If you want to build your own blog site, this is a great choice!

The resources

• Hexo-theme – Matery Theme website: github.com/blinkfox/he…
• Hexo 官网 : hexo. IO /zh-cn/

The project address

Github.com/blinkfox/he…

In this paper, making github.com/macrozheng/… Already included, welcome everyone Star!