Hexo 安装配置

Node.Js 安装设置

安装完成后，要查看我们是否安装成功，可以打开命令提示符（Win + R），输入 cmd 打开控制台，输入如下命令，如果出现对应版本号，说明安装成功了；

1
2
node -v
npm -v

Hexo 安装

在你的硬盘上找个地儿，用来存放你的博客文件，比如我的就在 D:personalFiles/github/blog，这个文件夹你可以根据自己的喜好来设置。然后从命令台进入当前文件夹，接下来就是安装过程了；

首先安装 Hexo

1
npm i hexo-cli -g

新建一个文件夹用于存放你的博客，比如我的是 blog，然后进入该文件夹，并用如下命令进行初始化并安装必备组件；

1
2
hexo init .
npm install

然后输入如下命令，然后在浏览器中打开 http://localhost:4000；

1
2
3
4
5
6
# 新建博客
hexo new "博客名"
# 生成静态网页
hexo g
# 打开本地服务器
hexo s

博客部署

基于Hexo的matery主题搭建博客增强部署篇4 | 夜法之书 (17lai.site)

部署 Hexo 到 GitHub Pages

GitHub 主页右上角加号 -> New repository：

  • Repository name 中输入 用户名.github.io(最好均为小写字母)
  • 勾选 “Initialize this repository with a README”
  • Description 选填

填好后点击 Create repository 创建。创建后默认自动启用 HTTPS，博客地址为：https://用户名.github.io

本地博客测试成功后，就是上传到 GitHub 进行部署，使其能够在网络上访问。首先安装 hexo-deployer-git：

1
npm install hexo-deployer-git --save

然后修改 _config.yml 文件末尾的 Deployment 部分，修改成如下：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  branch: main

完成后运行 hexo d 将网站上传部署到 GitHub Pages。

完成！这时访问我们的 GitHub 域名 https://用户名.github.io 就可以看到 Hexo 网站了。

其他方式

Hexo+Obsidian 内部链接跳转

  • Obsidian 选择基于当前笔记的相对路径，关闭 WIKi 链接
  • Hexo 需要修改永久链接模式 永久链接（Permalinks）| Hexo，修改 _config.yml 中的
1
permalink: posts/:category/:post_title.html
  • 不同级目录下的跳转
1
[深度学习-图像视频文本标注工具](../../工具使用/深度学习-图像视频文本标注工具)

需要去掉. md 后缀，采用以下 python 脚本自动全部去除, 脚本放在根目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import os
import re

# 定义要查找的文件夹路径和要替换的链接格式
folder_path = r".\source\_posts/"
link_pattern = r"\[(.*?)\]\((.*?).md\)"

# 遍历文件夹中的所有Markdown文件
for root, dirs, files in os.walk(folder_path):
    for file in files:
        if file.endswith(".md"):
            file_path = os.path.join(root, file)
            with open(file_path, "r", encoding="utf-8") as f:
                content = f.read()
            # 使用正则表达式查找并替换链接
            new_content = re.sub(link_pattern, r"[\1](\2)", content)
            with open(file_path, "w", encoding="utf-8") as f:
                f.write(new_content)

借鉴 Hexo插件 中的钩子函数实现提交时自动更新

1
2
#!/bin/sh
hexo generate && python changemd.py && git add .

hexo 插件

Hexo -auto-category 自动生成 Categories

最常用的文件管理策略，就是利用文件系统目录结构 (树形结构 directory-tree)。
同样，为了便于管理大量的日志文件，采用目录结构是一种简便可行的方案。hexo-auto-category 根据日志文件 (Markdown) 所在文件目录自动分类，即自动生成 markdown 的 front-matter 中的 categories 变量。

示例

对于博客 source/_post/web/framework/hexo.md，该插件会自动生成以下 categories

1
2
3
categories:  
  - web  
  - framework

安装

1
npm install hexo-auto-category --save

配置

在站点根目录下的 _config.yml 添加：

1
2
3
auto_category:  
 enable: true  
 depth:

编译 & 部署

1
hexo clean && hexo g && hexo d

高级配置

如果只想生成第一级目录分类，可以设置 depth 属性，比如：

1
2
3
auto_category:  
 enable: true  
 depth: 1

利用 Git 钩子函数触发更新

这个插件只有执行 hexo generate 时才会去读取文件夹并更新所有文章的 Front-matter 分类信息，所以我们可以利用 Git的钩子函数，在 commit (提交) 的时候先执行下 hexo generate，这样就能实现自动更新了。

在 .git/hooks 目录下新建一个 pre-commit 文件

可以先在该文件中写入 echo hello world!，然后在 git 终端下执行 sh pre-commit 或者 ./pre-commit 测试钩子能不能正常执行，没问题后，将如下命令写到文件里：

1
2
#!/bin/sh
hexo generate && git add .

之所以后面追加 git add .，是因为 generate (生成) 后，所有文章的 Front-matter 信息会更新，所以要将所有修改重新添加进来

Hexo-neat 插件优化提升访问效率

Hexo-neat插件优化提升访问效率-腾讯云开发者社区-腾讯云 (tencent.com)

1、安装 Hexo-neat

在站点根目录下

1
npm install hexo-neat --save

2、添加相关配置

在站点配置文件 _config.yml 添加相关配置，直接添加到站点配置文件 _config.yml 的末尾就可以。可以安装自己的需求去自定义配置，不过有些注意事项

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
# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html（ejs，swig等也属于html格式片段）
neat_html:
  enable: true
  exclude:
# 压缩css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
    - '**/live2d-widget/waifu.css'
    - 'jquery.fancybox.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true #打印日志
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - 'jquery.fancybox.min.js'
    - '**/index.js'  
    - '**/live2d-widget/*.js' 
    - '**/live2d-widget/*.min.js'

3、hexo-neat 插件注意事项

在使用 hexo-neat 插件时，可以在命令窗口中看到各个文件的压缩率，于是可以通过跳过一些文件让效率更高。
1. 跳过压缩文件的正确配置方式
如果按照官方插件的文档说明来配置 exclude，会发现完全不起作用。这是因为配置的文件路径不对，压缩时找不到你配置的文件，自然也就无法跳过了。于是需要给这些文件指定正确的路径，万能的配置方式如下：

1
2
3
4
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
  • 已经压缩过的 css 和 js 不用压缩：剔除 exclude（*.min.css 和 * .min.js）
  • 特殊名字 xx. xx. min. js 的需要单独列出来（这里引用了 fancybox 图片弹窗效果，从压缩名单里单独剔除）
  • 深目录的，需要单独列出来：（这里我引用了 live 2 d 看板娘的动画） 单用 _*/_.min.js 深目录跳过已压缩文件不行，这部分只好全部跳过压缩了

2. 压缩 html 时不要跳过 .md 文件和 .swig 文件
.md 文件就是 markdown 文件，如果跳过压缩 .md 文件，而又刚好在文章中使用到了 tab 标签，那么当 hexo 在生成静态页面时就会发生解析错误。这会导致使用到了 tab 标签的页面生成失败而无法访问。

.swig 文件是模板引擎文件，也就是 hexo 可以通过这些文件来生成对应的页面。如果跳过这些文件，所有页面完全没有起到压缩的效果，页面源代码里依然存在着一大堆空白。
3. 注意 md 中不要带特殊标签<>的颜表情<(￣ˇ￣)/、<(ˉ^ˉ)>等，因为压缩转换为 html 后会变成
< (￣ˇ￣)/，转义失败！！！