使用Hexo+NexT搭建个人博客完整教程

发表于 更新于 分类于 阅读次数：
本文详细介绍了如何从零开始使用Hexo和NexT主题搭建并配置一个功能完善的个人技术博客，涵盖环境搭建、主题配置、插件集成以及最终部署等全过程。

前言

Hexo 是一个基于 Node.js 的快速、简洁且高效的博客框架。它支持 Markdown 语法，并拥有丰富的主题和插件生态系统，非常适合开发者快速搭建个人技术博客。

本文将手把手带你完成 Hexo 博客的搭建，并配置深受喜爱的 NexT 主题，同时集成搜索、分类、标签等核心功能，最终生成一篇可以直接部署的博客文章。

环境准备

在开始之前，请确保你的电脑上已安装以下工具：

  1. Node.js: Hexo 的运行环境，请从 Node.js 官网 下载并安装 LTS 版本。
  2. Git: 用于版本控制以及后续部署到 GitHub Pages，请从 Git 官网 下载安装。
  3. 代码编辑器: 推荐使用 Visual Studio Code，它对 Markdown 和配置文件的编辑支持极佳。

验证安装

打开终端（Windows下为CMD或PowerShell，macOS/Linux下为Terminal），运行以下命令检查环境是否安装成功：

1
2
3
node -v  # 显示 Node.js 版本
npm -v   # 显示 npm 包管理器版本
git --version # 显示 Git 版本

搭建 Hexo 博客

环境就绪后，我们开始创建博客项目。

1. 安装 Hexo-cli

在终端中执行以下命令，全局安装 Hexo 的命令行工具：

1
npm install -g hexo-cli

2. 初始化博客项目

创建一个文件夹作为你的博客根目录，然后在终端中进入该目录并执行初始化命令。这里我们以 my_blog 为例：

1
2
hexo init my_blog
cd my_blog

初始化完成后，安装项目依赖：

1
npm install

此时，你的博客项目基本结构已经创建完毕。你可以执行 hexo s 启动本地服务器，在浏览器中访问 http://localhost:4000 查看默认效果。

部署 NexT 主题

默认的主题较为简陋，我们 NexT 主题来美化我们的博客。

1. 下载 NexT 主题

在博客根目录下，使用 Git 克隆 NexT 主题：

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

2. 启用 NexT 主题

打开博客根目录下的站点配置文件 _config.yml，找到 theme 字段并将其值修改为 next：

1
2
3
4
5
6
# _config.yml

# Extensions
## Plugins: https://hexo.io/docs/plugins.html
## Themes: https://hexo.io/docs/themes.html
theme: next

保存文件后，再次启动本地服务器（hexo clean && hexo s），刷新浏览器，你应该就能看到 NexT 主题的默认样式了。

主题优化与功能配置

接下来，我们对 NexT 主题进行一系列优化和功能开启。

1. 启用 Canvas Nest 动画效果

打开主题配置文件 themes/next/_config.yml，搜索 canvas_nest 并将 enable 选项设为 true：

1
2
3
4
5
# themes/next/_config.yml

canvas_nest:
  enable: true
  onmobile: true # 是否在移动设备上启用

2. 配置本地搜索

本地搜索能让用户快速在站内找到相关文章。

首先，安装搜索数据生成插件：
在博客根目录运行：

1
npm install hexo-generator-searchdb --save

然后，配置站点和主题：

  1. 在站点配置文件 _config.yml 中添加以下内容：
    1
    2
    3
    4
    5
    6
    # _config.yml
    search:
      path: search.xml
      field: post  # 搜索范围，post代表文章
      format: html # 文件格式
      limit: 10000 # 显示搜索结果的最大条数
  2. 在主题配置文件 themes/next/_config.yml 中启用 local_search：
    1
    2
    3
    # themes/next/_config.yml
    local_search:
      enable: true

3. 创建“分类”与“标签”页面

NexT 的菜单需要指向一个实际的页面。我们需要为“分类”和“标签”分别创建页面。

创建分类页面：

1
hexo new page categories

打开生成的 source/categories/index.md 文件，添加 type 属性：

1
2
3
4
5
---
title: 分类
date: 2024-05-21 10:00:00
type: "categories"
---

创建标签页面：

1
hexo new page tags

打开生成的 source/tags/index.md 文件，同样添加 type 属性：

1
2
3
4
5
---
title: 标签
date: 2024-05-21 10:01:00
type: "tags"
---

4. 更新菜单配置

让“分类”和“标签”等链接显示在菜单上，需要修改主题配置文件 themes/next/_config.yml，找到 menu 部分，确保以下菜单项和链接是正确的：

1
2
3
4
5
6
7
8
9
10
11
# themes/next/_config.yml
menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
  search: /search/ || search # 确保 search 已开启

注意：前面的 / 或 /categories/ 是路径，后面的 || home 是图标，都可以按需修改。

5. 创建“关于”页面

一个完整的博客通常会有一个关于页面。

1
hexo new page about

编辑生成的 source/about/index.md 文件，填入你的个人信息和介绍即可。

1
2
3
4
5
6
7
8
---
title: 关于我
date: 2024-05-21 10:02:00
---

<h2>你好，世界！</h2>

<p>这里是我的个人博客，记录我学习和生活中的点点滴滴。</p>

6. 添加个性化和交互效果

为了让博客更具个性和趣味性，我们可以添加一些简单的交互效果，比如动态背景和点击特效。

1）添加 Canvas Nest 动态背景

NexT 主题自带了 Canvas Nest 动画（我们已在 1. 启用 Canvas Nest 动画效果 中开启），这里我们介绍另一种更灵活的实现方式，便于叠加其他脚本。

首先，创建一个自定义文件用于存放脚本代码。在博客根目录下创建 source/_data 文件夹（如果不存在），并在其中新建文件 footer.njk。

打开 source/_data/footer.njk 文件，添加以下代码：

1
2
3
4
5
6
7
8
<!-- 可以使用CDN资源，但建议下载到本地 -->
<!-- <script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script> -->

<!-- 推荐：下载到本地，以实现离线访问和更快的加载速度 -->
<!-- 1. 从 https://github.com/theme-next/theme-next-canvas-nest 下载 canvas-nest.js -->
<!-- 2. 将其放入 themes/next/source/js/ 目录下，并重命名为 canvas_nest.js -->
<!-- 3. 在 footer.njk 中引用本地脚本 -->
<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="/js/canvas_nest.js"></script>

说明：将 canvas-nest.js 下载到本地（放在 themes/next/source/js/ 目录）并重命名，然后在 footer.njk 中通过 /js/... 引用，比直接使用CDN更稳定，且符合静态博客的原则。

然后，修改主题配置文件 themes/next/_config.yml，启用这个自定义文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# themes/next/_config.yml

# Custom File Path
# Define the custom file path.
# Create your custom files in site `source` directory and setting here.
# Custom file path support saas in path which will be automatically replaced by `url` in `_config.yml`.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk  # 确保这一行被取消注释或添加
  #bodyEnd: source/_data/body-end.njk

2）添加点击爱心效果

接下来，我们同样使用刚才创建的 footer.njk 文件来添加点击时飞出爱心的效果。

首先，在 themes/next/source/js/ 目录下新建一个文件，命名为 click_love.js。

打开 click_love.js 文件，将下面的代码粘贴进去：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
!(function (e, t, a) {
    function n() {
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
    }

    function r() {
        for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, (d[e].scale += 0.004), (d[e].alpha -= 0.013), (d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999"));
        requestAnimationFrame(r)
    }

    function o() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function (e) {
            t && t(), i(e)
        }
    }

    function i(e) {
        var a = t.createElement("div");
        (a.className = "heart"),
            d.push({
                el: a,
                x: e.clientX - 5,
                y: e.clientY - 5,
                scale: 1,
                alpha: 1,
                color: s()
            }),
            t.body.appendChild(a)
    }

    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch (t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }

    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    (e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
        setTimeout(e, 1e3 / 60)
    }),
        n()
})(window, document);

最后，回到 source/_data/footer.njk 文件，在 Canvas Nest 脚本的下方添加对 click_love.js 的引用：

1
2
3
<!-- source/_data/footer.njk -->
<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="/js/canvas_nest.js"></script>
<script type="text/javascript" src="/js/click_love.js"></script>

保存文件后，重新生成并启动博客（hexo clean && hexo g && hexo s），现在你的博客就有了动态背景和点击爱心的效果！

如何创建一篇文章

现在，你的博客框架已经搭建完成。让我们来创建第一篇真正的文章。

创建文章文件

在博客根目录运行命令，article-title 替换成你的文章标题：

1
hexo new post "我的第一篇博客文章"

这会在 source/_posts 目录下创建 我的第一篇博客文章.md 文件。

编辑文章内容

用 VS Code 打开这个 Markdown 文件，你会发现基本的 Front Matter 已经创建好了：

1
2
3
4
5
6
---
title: 我的第一篇博客文章
date: 2024-05-21 11:00:00
tags:
categories:
---

设置文章摘要

为了在首页只显示文章摘要而非全文，有两种推荐方法：

  1. 使用 <!-- more --> 标签（推荐）：在 Markdown 内容的任意位置插入此标签，首页只会显示标签之前的内容。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    ## 欢迎来到我的博客！

    这是文章的开头部分...

    <!-- more -->

    ## 这是文章的后续部分

    这部分内容只有在点击"阅读全文"后才能看到...

  2. 手动添加 description：在 Front Matter 中手动编写摘要。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ---
    title: 我的第一篇博客文章
    date: 2024-05-21 11:00:00
    description: 这篇文章主要介绍了如何在Hexo博客中撰写和格式化一篇新的文章。
    tags:
      - Hexo
      - 教程
    categories:
      - 入门指南
    ---

添加文章封面（可选）

在文章的 Front Matter 中添加 cover 字段来设置文章的封面图片。图片应存放在 source/images/ 目录下。

1
2
3
4
5
6
7
8
9
---
title: 我的第一篇博客文章
date: 2024-05-21 11:00:00
cover: /images/default-cover.jpg
tags:
  - Hexo
categories:
  - 入门指南
---

本地预览与部署

本地预览

每次修改了配置或文章后，都需要重新生成站点。执行以下命令来清除缓存、重新生成并启动本地服务器：

1
2
3
hexo clean   # 清除缓存文件 (db.json) 和生成的公共文件 (public)
hexo generate # 生成静态文件到 public 目录，可简写为 hexo g
hexo server   # 启动本地服务器，可简写为 hexo s

然后在浏览器中访问 http://localhost:4000 即可查看更新后的效果。

部署到 GitHub Pages（可选）

如果你想将博客托管在 GitHub Pages 上，方便他人访问，可以按以下步骤操作：

  1. 创建 GitHub 仓库：在你的 GitHub 账号下创建一个新仓库，命名为 你的用户名.github.io。
  2. 安装部署插件：在博客根目录安装部署工具：
    1
    npm install hexo-deployer-git --save
  3. 配置站点：打开站点配置文件 _config.yml，在文件末尾添加 deploy 配置：
    1
    2
    3
    4
    5
    6
    7
    8
    # _config.yml

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: https://github.com/你的用户名/你的用户名.github.io.git
      branch: main # 注意：如果你的仓库默认分支是 master，请改成 master
    请将 你的用户名 替换为你的 GitHub 用户名。
  4. 执行部署：在终端执行一键部署命令：
    1
    2
    hexo clean
    hexo deploy

稍等片刻，你的博客就会自动发布到 https://你的用户名.github.io。

总结

通过以上步骤，你已经成功搭建了一个功能完善、样式精美且充满个性的个人博客。从创建文章到配置功能、添加交互效果，再到最终的线上部署，整个流程已经清晰呈现。

博客的生命力在于持续更新。开始在这里记录你的技术思考、学习笔记和生活感悟吧！期待看到一个充满活力的技术社区。

搭建过程中参考了以下资源：