概述

结合使用Hexo和git可以使得：

  1. 在本地使用Markdown格式编辑博客内容
  2. 使用Hexo自动根据主题等配置将博客文件渲染生成网页文件
  3. 使用git发布到网站服务器

其中，可以修改Hexo的配置，使得生成不同主题的网页，并且可以指定渲染参数（如：是否渲染公式等）

博客格式

Hexo的博客源文件都存放在博客根目录的 .\source\_posts 文件夹下，使用Markdown格式编写，不过需要在头部加入 YAML Front Matter 以标明博客信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
---
# 文章网页标题
title: 常微分方程  
# 是否渲染数学公式（需要事先安装hexo-math）
mathjax: true
# 分类标签，依次为一级分类、二级分类
categories: 
- Notebook
tags:
- 高等数学 
# 文章创建日期
date: 2023-5-23
---

发布命令

编辑好博客文件后，在博客的根文件夹中，使用鼠标右键，并在右键菜单中点击Git Base Here，出现Git命令行窗口后，使用以下命令：

1
2
3
4
Hexo clean  # 清除当前的网页文件（上次生成的）
Hexo generate  # 根据 "博客源文件" 生成 "博客网页文件"
Hexo serve  # 在本地计算机启动网页服务器（启动后可在浏览器中输入 http://localhost:4000/ 预览效果）
Hexo deploy  # 将"博客网页文件"部署到服务器

安装

  1. 安装Node.js

    Hexo是一个用 JavaScript 编写的静态网站生成器，基于 Node.js 平台，所以我们要先从官网下载 Node.js。

    npm 是 Node.js 平台的默认包管理工具，全称为 Node Package Manager，而安装Node.js其会自动安装npm。安装后使用node --version 和npm --version检查是否安装成功。

  2. 安装Hexo

    hexo-cli 是 Hexo 的命令行工具，可以在命令行中直接使用 hexo 命令来执行这些操作，而不必手动运行 Hexo 中的 JavaScript 文件。hexo-cli 通常作为一个独立的 npm 包安装到全局环境中，以便在命令行中全局调用。

    所以我们首先创建一个空文件夹，可以命名为Blog，在其中打开cmd使用npm install hexo-cli将Hexo 的命令行工具安装到全局。安装后将文件夹中的\node_modules\.bin添加到环境变量，并使用hexo -V 检查是否安装成功。

  3. 初始化博客

    在文件夹中打开cmd，使用hexo init初始化之后便可以按照开头的方式编写博客了

常见问题

公式渲染

hexo默认的渲染器是marked，但并不支持mathjax，需要我们手动安装 (在Blog文件夹下)

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

然后在博客项目下的_config.yml文件中加入：

1
2
3
math:
  enable: true
  per_page: true

同时为了支持行内公式渲染，需要在博客目录\node_modules\kramed\lib\rules\inline.js中做如下变动：

1
2
// em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

以下是复杂公式渲染的测试：

参考文献

图片路径

在Blog/_config.yaml中有一项配置：

1
post_asset_folder: true

当这个选项设置为true后，生成网页时会自动调用Blog\node_modules\hexo-asset-image\index.js来重定位图片路径。

我遇到的问题是，当生成网页后，所有图片都无法显示，并且鼠标悬停图片链接后发现路径中间多了一部分：正常网页生成后，图片都会存放在public/images中，但是我的图片路径是public/文章路径/images，因此需要更改图片路径的生成格式。

在node_modules\hexo-asset-image\index.js修改以下部分即可解决：

1
2
3
4
5
6
// src = srcArray.join('/');
// $(this).attr('src',  link + src);
// console.info&&console.info("update link as:-->"+ link + src);
src = srcArray.join('/');
$(this).attr('src', config.root + src);
console.info&&console.info("update link as:-->"+config.root + src);