Hexo 博客搭建指南

从零搭建一个基于 Hexo + Matery 主题的个人博客，包含友情链接、留言板、搜索、日夜切换等完整功能。

为什么选择 Hexo？

Hexo 是一个快速、简洁且高效的静态博客框架，基于 Node.js。优点：

• 速度快 — 纯静态文件，秒开
• Markdown 写作 — 专注于内容，无需关心样式
• 丰富主题 — 数百款社区主题可选
• 免费部署 — 可部署到 GitHub Pages、Vercel、自己的服务器等

一、安装 Hexo

前置条件

需要 Node.js 和 npm，建议使用 LTS 版本：

node -v   # v18+
npm -v    # v9+

全局安装 Hexo CLI

npm install -g hexo-cli

初始化站点

hexo init myblog
cd myblog
npm install

启动本地预览

hexo server

浏览器访问 http://localhost:4000，即可看到默认主题的博客。

二、安装 Matery 主题

Matery 是一款 Material Design 风格的 Hexo 主题，功能丰富，自带标签、分类、归档、友情链接、留言板等模块。

cd myblog
git clone https://github.com/blinkfox/hexo-theme-matery themes/matery

在站点 _config.yml 中启用主题：

theme: matery

主题配置

Matery 的配置在 themes/matery/_config.yml 中。常用的配置项：

menu:
  Index:
    url: /
    icon: fas fa-home
  Dashboard:
    url: /login
    icon: fas fa-tachometer-alt
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle

可以将自定义配置放在站点根目录的 _config.matery.yml，主题会自动合并覆盖。

三、配置博客

站点基本信息

编辑 _config.yml：

title: 我的博客
subtitle: 记录生活与技术
author: YourName
language: zh-CN
url: https://yourdomain.com

创建分类页面

hexo new page categories

编辑 source/categories/index.md：

---
title: 分类
date: 2026-01-01 00:00:00
type: "categories"
layout: "categories"
---

类似地创建标签页、关于页、友情链接页、留言板页。

四、友情链接

在 source/_data/ 下创建 friends.json：

[{
  "avatar": "https://example.com/avatar.png",
  "name": "好友名称",
  "introduction": "简介",
  "url": "https://friend.com"
}]

友情链接页面 source/friends/index.md：

---
title: 友情链接
date: 2026-01-01 00:00:00
type: "friends"
layout: "friends"
---

五、留言板

Matery 自带留言板页面，创建 source/contact/index.md：

---
title: 留言板
date: 2026-01-01 00:00:00
type: "contact"
layout: "contact"
---

如果需要自建后端，可以用 Flask + SQLite 实现简单的留言 API，前端通过 AJAX 提交和加载。

六、搜索功能

安装搜索插件：

npm install hexo-generator-search --save

在 _config.yml 中配置：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

Matery 主题会自动识别并使用本地搜索。

七、日夜切换

Matery 不自带日夜切换，可以手动实现。原理：

1. 用 CSS 变量定义颜色
2. JavaScript 切换 data-theme 属性
3. 用 localStorage 保存用户偏好

核心 CSS 变量：

:root {
  --bg-primary: #fff;
  --text-primary: #333;
}

[data-theme="dark"] {
  --bg-primary: #0d1117;
  --text-primary: #c9d1d9;
}

八、部署到服务器

生成静态文件

hexo generate

文件输出到 public/ 目录，可直接用 Nginx / Caddy 托管。

Caddy 配置示例

example.com {
  root * /path/to/blog/public
  file_server
}

如果需要同时托管 Dashboard 等应用，可以添加反向代理：

example.com {
  # 博客：静态文件
  handle {
    root * /path/to/blog/public
    file_server
  }
  
  # Dashboard：反向代理
  handle /dashboard/* {
    reverse_proxy localhost:8510
  }
}

九、常用命令

命令	说明
hexo new "文章标题"	创建新文章
hexo generate	生成静态文件
hexo server	本地预览
hexo clean	清除缓存
hexo deploy	部署

十、总结

Hexo + Matery 的组合非常适合个人博客：

• 写作体验好 — Markdown 原生支持
• 功能完整 — 标签、分类、搜索、友链一应俱全
• 部署灵活 — 静态文件，任何 Web 服务器都能托管
• 可扩展 — 支持插件和自定义开发

整套搭建下来，一个功能完善的个人博客就诞生了。祝你写作愉快！