全网最全 AnZhiYu 主题 Hexo 博客搭建教程

🌊 全网最全 AnZhiYu 主题 Hexo 博客搭建教程

AnZhiYu 是一款基于 Hexo 的高颜值博客主题,拥有动态效果、丰富组件、音乐播放器、首页卡片、分类标签、相册、朋友圈等功能,非常适合个人博客与技术网站。


🧰 一、环境准备

📦 1. 安装 Node.js

下载地址:

1
https://nodejs.org/en/download

安装完成后打开终端输入:

1
2
node -v
npm -v

如果显示版本号说明安装成功。


📦 2. 安装 Git

下载地址:

1
https://git-scm.com/downloads

安装完成后测试:

1
git --version

🚀 二、安装 Hexo 博客

📥 1. 安装 Hexo CLI

打开终端输入:

1
npm install -g hexo-cli

📁 2. 创建博客

1
2
3
hexo init blog
cd blog
npm install

▶️ 3. 启动博客

1
2
3
hexo clean
hexo g
hexo s

浏览器打开:

1
http://localhost:4000

即可看到博客。


🐟 三、安装 AnZhiYu 主题

📦 1. 下载主题

进入博客目录:

1
cd blog

执行:

1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

⚙️ 2. 修改主题配置

打开:

1
_config.yml

找到:

1
theme:

改成:

1
theme: anzhiyu

📦 四、安装依赖

执行:

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

🚀 五、运行主题

1
2
3
hexo clean
hexo g
hexo s

打开:

1
http://localhost:4000

即可看到 AnZhiYu 主题。


📁 六、主题配置文件

复制主题配置:

1
cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml

Windows 用户直接复制文件即可。


🎨 七、配置网站信息

打开:

1
_config.yml

修改:

1
2
3
4
5
title: Tim Blog
subtitle: 热爱编程的14岁少年
description: 一个分享技术与生活的博客
author: Tim
language: zh-CN

👤 八、设置头像

把头像放入:

1
source/img/

例如:

1
source/img/avatar.jpg

然后打开:

1
_config.anzhiyu.yml

修改:

1
2
avatar:
img: /img/avatar.jpg

🌈 九、首页顶部 Banner

📌 修改首页文字

1
2
3
4
5
6
subtitle:
enable: true
sub:
- 热爱编程
- 分享技术
- 热爱互联网

🖼 修改顶部背景图

1
index_img: /img/banner.jpg

把图片放入:

1
source/img/banner.jpg

🍔 十、菜单配置

1
2
3
4
5
6
menu:
首页: / || anzhiyu-icon-house
归档: /archives/ || anzhiyu-icon-box-archive
分类: /categories/ || anzhiyu-icon-shapes
标签: /tags/ || anzhiyu-icon-tags
关于: /about/ || anzhiyu-icon-paper-plane

📱 十一、社交链接

1
2
3
4
social:
Github: https://github.com/你的用户名 || anzhiyu-icon-github
Bilibili: https://space.bilibili.com/你的ID || anzhiyu-icon-bilibili
Email: mailto:你的邮箱 || anzhiyu-icon-envelope

📝 十二、创建文章

✍️ 新建文章

1
hexo new post 我的第一篇文章

文章位置:

1
source/_posts/

📌 Markdown 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: 我的第一篇文章
date: 2026-05-17
cover: /img/banner.jpg
tags:
- 编程
categories:
- 技术
---

# Hello World

这是我的第一篇博客文章!

🖼 十三、文章封面

推荐图床:

1
https://sm.ms

文章顶部:

1
cover: 图片链接

例如:

1
cover: https://i.imgs.ovh/xxx.jpg

🎵 十四、音乐播放器

开启:

1
2
aplayer:
enable: true

文章插入:

1
2
3
4
5
<meting-js
server="netease"
type="song"
id="123456">
</meting-js>

💬 十五、评论系统

推荐 Waline。

官网:

1
https://waline.js.org

开启:

1
2
comments:
use: Waline

🌙 十六、深色模式

1
2
darkmode:
enable: true

🔍 十七、本地搜索

1
2
local_search:
enable: true

安装:

1
npm install hexo-generator-search --save

📊 十八、网站统计

📈 百度统计

1
baidu_analytics: 你的统计ID

📈 Google Analytics

1
google_analytics: G-XXXXXXXX

🚀 十九、部署 GitHub Pages

📦 安装部署插件

1
npm install hexo-deployer-git --save

⚙️ 配置部署

打开:

1
_config.yml

修改:

1
2
3
4
deploy:
type: git
repo: https://github.com/你的用户名/仓库名.git
branch: gh-pages

🚀 上传博客

1
2
3
hexo clean
hexo g
hexo d

🌍 二十、自定义域名

GitHub 仓库:

1
2
3
Settings
→ Pages
→ Custom domain

输入:

1
blog.xxx.com

即可。


🖼 二十一、推荐封面图库

📸 Unsplash

1
https://unsplash.com

📸 Pexels

1
https://pexels.com

📸 Pixabay

1
https://pixabay.com

🔥 二十二、推荐插件

📦 Hexo AI 摘要

1
npm install hexo-ai-excerpt

📦 代码复制按钮

1
highlight_copy: true

📦 字数统计

1
npm install hexo-wordcount --save

⚡ 二十三、常用命令

本地运行

1
hexo s

清理缓存

1
hexo clean

生成静态文件

1
hexo g

部署博客

1
hexo d

🎉 二十四、总结

现在你已经拥有:

✅ Hexo 博客
✅ AnZhiYu 高颜值主题
✅ 评论系统
✅ 音乐播放器
✅ 搜索功能
✅ GitHub 部署
✅ 自定义域名
✅ Markdown 写作能力

你的博客已经接近专业级别了 🚀