Hexo + Next主题博客搭建教程

发表于 更新于 分类于

Hexo + Next主题博客搭建完全指南

环境准备

搭建Hexo博客前，需要安装以下软件：

1
2
# 安装Node.js和npm (建议使用nvm管理Node.js版本)
# 安装Git

安装Hexo

1
2
3
4
5
6
7
8
9
# 全局安装Hexo命令行工具
npm install -g hexo-cli

# 创建博客文件夹
hexo init myblog
cd myblog

# 安装依赖
npm install

安装Next主题

Next主题是Hexo最受欢迎的主题之一，支持多种配置和功能。

方法一：使用npm安装（推荐）

1
2
# 安装 Next 主题
npm install hexo-theme-next --save

方法二：通过GitHub下载

1
2
# 克隆Next主题到themes目录
git clone https://github.com/next-theme/hexo-theme-next themes/next

配置Next主题

1. 修改站点配置文件

编辑博客根目录下的_config.yml：

1
2
3
4
5
6
7
8
9
10
11
# 网站基本信息
title: 您的博客名称
subtitle: 博客副标题
description: 博客描述
keywords: 关键词1,关键词2
author: 您的名字
language: zh-CN  # 中文
timezone: Asia/Shanghai

# 使用Next主题
theme: next  # 或者 hexo-theme-next，取决于安装方式

2. 配置Next主题

Next主题提供四种风格：

  • Muse - 默认方案，黑白主调
  • Mist - Muse的紧凑版本
  • Pisces - 双栏设计，侧边栏
  • Gemini - Pisces的升级版

在Next主题配置文件themes/next/_config.yml中：

1
2
3
4
5
6
7
8
9
10
# 选择主题风格
scheme: Gemini  # 可选: Muse | Mist | Pisces | Gemini

# 开启菜单项
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

创建页面

1
2
3
4
5
6
7
8
# 创建关于页面
hexo new page about

# 创建分类页面
hexo new page categories

# 创建标签页面
hexo new page tags

修改页面的Front-matter，例如source/about/index.md：

1
2
3
4
5
6
7
---
title: 关于我
date: 2024-03-29 10:00:00
type: "about"
layout: "about"
comments: false
---

创建文章

1
2
# 创建新文章
hexo new "文章标题"

文章Front-matter示例：

1
2
3
4
5
6
7
8
9
---
title: 文章标题
date: 2024-03-29 10:00:00
categories:
  - 分类名称
tags:
  - 标签1
  - 标签2
---

图片引用

开启文章资源文件夹

在站点配置文件_config.yml中：

1
post_asset_folder: true

图片引用方法

1
2
3
4
5
6
7
8
<!-- 方法一：使用标签插件 -->
{% asset_img image.jpg 图片描述 %}

<!-- 方法二：相对路径 -->
![图片描述](image.jpg)

<!-- 方法三：绝对路径 -->
![图片描述](/images/image.jpg)

本地预览

1
2
3
4
5
# 清理并生成
hexo clean && hexo generate

# 启动本地服务器
hexo server

部署到GitHub Pages

  1. 安装部署插件：
1
npm install hexo-deployer-git --save
  1. 修改站点配置文件：
1
2
3
4
deploy:
  type: git
  repo: https://github.com/用户名/用户名.github.io.git
  branch: main
  1. 执行部署：
1
hexo clean && hexo deploy

Next主题进阶配置

自定义样式

创建source/_data/styles.styl文件，添加自定义CSS。然后在Next主题配置文件中启用：

1
2
custom_file_path:
  style: source/_data/styles.styl

添加社交链接

1
2
3
4
social:
  GitHub: https://github.com/yourname || fab fa-github
  E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  Weibo: https://weibo.com/yourname || fab fa-weibo

开启阅读统计

1
2
3
4
5
6
# LeanCloud 访问统计
leancloud_visitors:
  enable: true
  app_id: #<app_id>
  app_key: #<app_key>
  server_url: #<server_url>

常见问题解决

更新Hexo和主题

1
2
3
4
5
# 更新Hexo
npm update

# 更新主题(npm安装方式)
npm update hexo-theme-next --save

新环境重建

1
2
3
4
5
6
7
8
# 克隆仓库
git clone <repository_url>

# 安装依赖
npm install

# 生成和部署
hexo clean && hexo generate && hexo deploy

技巧与优化

  1. 编写高质量Markdown：使用标题层级、列表、代码块等元素
  2. 合理使用标签和分类：便于内容管理和读者查找
  3. 定期备份：将源文件提交到单独的Git仓库分支
  4. SEO优化：设置合适的关键词和描述