How to Build a Stunning Hexo Blog with the Matery Theme – Step‑by‑Step Guide

As a programmer who likes writing technical articles, you may want to set up a personal blog. After comparing many blog frameworks, I found that using Hexo with the hexo-theme-matery theme creates a beautiful and powerful blog site. This guide shows how to build one with Hexo.

Hexo Overview

Hexo is a fast, simple, and efficient blog framework. You write posts in Markdown, and Hexo generates a static website. Many blogs you have seen are generated with Hexo.

hexo-theme-matery Theme

The theme is based on Material Design, offers a clean and attractive interface, responsive design for desktop, tablet, and mobile, and includes many built‑in plugins.

Demo

Here is the final effect of Hexo combined with the theme.

Setup

We will first create a basic Hexo blog and then switch to the hexo-theme-matery theme.

Install Hexo CLI:

<code>npm install -g hexo-cli</code>

Initialize a blog directory and install dependencies:

<code># Initialize blog directory
hexo init website-hexo
# Enter blog directory
cd website-hexo
# Install dependencies
npm install</code>

Start the blog server:

<code>hexo server</code>

After starting, visit

http://localhost:4000/

to see the default site.

Configuration

Some custom configuration is needed for Hexo and the theme.

Hexo Global Configuration

Download the theme and unzip it into the

themes

directory (https://github.com/blinkfox/hexo-theme-matery).

Edit

_config.yml

to set the theme:

<code>theme: hexo-theme-matery</code>

Other site settings such as title, subtitle, description, language, URL, pagination, etc., can be configured in the same file.

<code># Site configuration
title: macrozheng
subtitle: 'macrozheng的个人博客'
description: 'Justice may be late, but will never be absent.'
language: zh-CN
url: http://localhost:4000
permalink: :year/:month/:day/:title/
# Pagination
index_generator:
  path: ''
  per_page: 12
  order_by: -date
pagination_dir: page</code>

Add Fixed Pages

Create pages for categories, tags, about, and 404 using Hexo commands, e.g.

hexo new page "categories"

with front‑matter:

<code>---
title: categories
date: 2021-09-06 10:19:56
type: "categories"
layout: "categories"
---</code>

Similarly create

tags

,

about

, and

404

pages with appropriate front‑matter.

Theme Configuration

Modify /themes/hexo-theme-matery/_config.yml to set navigation menus, homepage banner, social links, and other options.

Example menu configuration adds a “Projects” menu with sub‑items.

<code>menu:
  Index:
    url: /
    icon: fas fa-home
  Projects:
    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
</code>

Configure the homepage “dream” section, social links (GitHub, Juejin, Jianshu, etc.), GitHub link, reprint policy, search plugin, typing effect, and ICP record as needed.

Writing Posts

Write posts in Markdown under source/_posts and add Front‑matter to specify title, categories, tags, etc.

<code>---
title: mall整合SpringBoot+MyBatis搭建基本骨架
date: 2021-08-21 16:30:11
permalink: /pages/c68875/
categories:
  - mall学习教程
  - 架构篇
tags:
  - SpringBoot
  - MyBatis
---</code>

Enable code highlighting by disabling

highlight

and enabling

prismjs

in

_config.yml

:

<code>highlight:
  enable: false
  line_number: true
prismjs:
  enable: true
  preprocess: true
  line_number: true
</code>

Install a search plugin with:

<code>npm install hexo-generator-search --save</code>

and add the following to

_config.yml

:

<code>search:
  path: search.xml
  field: post
</code>

Deployment

Generate static files with hexo generate , which are placed in the public directory, then copy them to the Nginx html directory.

Conclusion

Using Hexo with the hexo-theme-matery theme creates a visually appealing and feature‑rich blog site, making it an excellent choice for anyone who wants to build their own personal blog.