hexo-redefine 部署指南 (持续更新)

hexo-redefine 部署指南 (持续更新)

Lucas
  2023-08-14 23:12:51 2023-08-14 23:12:51 创建   2026-09-24 22:26 2026-09-24 22:26 更新    2.6k 字  11 分钟  

所有的标题对应的功能都可以点击跳转到对应的 redefine 官方文档

npm 包相关安装设置

搜索文章

安装:

1
npm install hexo-generator-searchdb

_config.redefine.yml 相关设置

1
2
3
search:
  enable: true // 开关 默认 false
  preload: true // 预加载 默认 true

文章推荐

nodejieba 通过对文章内容进行中文分词并计算文章之间的关键词相似度, 根据相似度排序, 在 Hexo 页面底部自动推荐与当前文章主题最接近的历史文章.

安装:

1
npm install nodejieba@latest

_config.redefine.yml 相关设置

1
2
3
4
5
6
7
recommendation:
  enable: true
  title: 其他文章
  limit: 3
  mobile_limit: 2
  placeholder: /images/wallhaven-wqery6-light.webp
  skip_dirs: []

字数统计

1
npm install hexo-wordcount

_config.redefine.yml 相关设置

1
2
3
4
word_count:
  enable: true # Whether to enable
  count: true # Whether to display word count
  min2read: true # Whether to display reading time

katex 来写 math (官方文档没有)

个人感觉会比 mathjax 更快更稳定

安装:

1
2
npm uninstall hexo-renderer-marked
npm install hexo-renderer-markdown-it @iktakahiro/markdown-it-katex

_config.yml 相关配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# render-Markdown-it
# Markdown-it config
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '""'''
  plugins:
    - name: "@iktakahiro/markdown-it-katex"
      options:
        strict: false

新建 source/css/katex.css 文件, 粘贴 (后面的自定义样式补丁可以不粘贴, 只粘贴 @import 那一行就行):

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/* ==============================
   引入外部样式 (Katex)
   ============================== */
@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css');

/* ==============================
   自定义样式补丁
   ============================== */
.light-mode {
    --katex-background-color: #f1f1f1;
}

.dark-mode {
    --katex-background-color: #313131;
}

/* 公式边框 美化要不太丑了 */
.katex-block {
    overflow-x: auto !important;
    border-radius: 6px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: fit-content !important;
    max-width: 100% !important;
    border: 0.5px solid #535353 !important;
    background-color: var(--katex-background-color) !important;
}

.katex {
    font-size: 1em !important;
}

:not(.katex-display) > .katex {
    display: inline-block !important;
    border-radius: 4px !important;
    padding: 4px !important;
    margin: 2px 0 !important;
    border: 0.5px solid #535353 !important;
    background-color: var(--katex-background-color) !important;
}

/* 小写 a-z:使用 KaTeX 数学斜体字形; 其他字符:使用 KaTeX 正体字形 */
/* 小写 a-z:使用 KaTeX 数学斜体字形 */
@font-face {
    font-family: "KaTeX-Lowercase-Italic";
    src: url("https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/KaTeX_Math-Italic.woff2") format("woff2");
    font-style: normal;
    font-weight: normal;
    unicode-range: U+0061-007A;
}

/* 其他字符:使用 KaTeX 正体字形 */
@font-face {
    font-family: "KaTeX-Lowercase-Italic";
    src: url("https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/KaTeX_Main-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: normal;
    unicode-range: U+0000-0060, U+007B-10FFFF;
}

.katex .mathnormal {
    font-family: "KaTeX-Lowercase-Italic", "KaTeX_Main", serif !important;
    font-style: normal !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

_config.redefine.yml 相关设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# INJECT >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> start
# Docs: https://redefine-docs.ohevan.com/inject
inject:
  # Whether to enable inject
  enable: true
  # Inject custom head html code
  head:
    - "<style> @import url('/css/katex.css') </style>"

  # Inject custom footer html code
  footer:
    -
    -
# INJECT <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< end

图片引入

hexo 官方给了 3 种引入图片的方式, 在我看来, 其实都大差不差

1.全局资源文件夹

最简单的方法就是将它们放在 source/images 文件夹中. 然后通过类似于 ![](/images/image.jpg) 的方法访问它们.

2.文章资源文件夹

通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开.

1
post_asset_folder: true

如果没有, 那就在自己添加一下, 但我强烈建议你使用 hexo-renderer-markdown-it

相对路径引用的标签插件

1
{% asset_img image.jpg This is an example image %}

启用后, 资源图片将会被自动解析为其对应文章的路径. 例如: image.jpg 位置为 /2020/01/02/foo/image.jpg , 这表示它是 /2020/01/02/foo/ 文章的一张资源图片, ![](image.jpg) 将会被解析为 <img src="/2020/01/02/foo/image.jpg"> .

使用 Markdown 嵌入图片

hexo-renderer-marked 3.1.0 引入了一个新的选项, 其允许你无需使用 asset_img 标签插件就可以在 markdown 中嵌入图片

如需启用:

1
2
3
4
5
// _config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

启用后, 资源图片将会被自动解析为其对应文章的路径. 例如: image.jpg 位置为 /2020/01/02/foo/image.jpg , 这表示它是 /2020/01/02/foo/ 文章的一张资源图片, ![](image.jpg) 将会被解析为 <img src="/2020/01/02/foo/image.jpg"> .

这几种方法弊端都是本地无法预览, 你在本地编辑博客的时候无法预览图片, 而且 hexo g 的时候文件太大, 博客一旦多了就会等待几十秒甚至达到分钟级别

3. 配置图床

配置图床可以将文件上传, 然后所有图片全用链接来引入, 因为图片并不是一直在调整的, 经常是导入一张图片, 后面就再也不管了. 现在的图床对于去重和排序重命名做得很好. 也足够便宜, 还是很值得尝试的.

选择一:Cloudflare R2 (目前口碑最好, 推荐首选)

  • 免费额度:10GB 存储、每月 100 万次上传 (A 类操作)、1000 万次读取 (B 类操作), 关键是出口流量完全免费.
  • 个人博客几百张图一般占用不到 2GB, 够用好几年.
  • 优点:大厂背书不易跑路、兼容 S3 API 可随时迁移、不需要备案, 配合 PicGo 上传体验很流畅.
  • 缺点:开通需要绑定信用卡/PayPal 验证身份 (不会自动扣费), 国内直连速度一般, 建议自己套一层 Cloudflare 自定义域名+缓存规则来加速和省流量. 这也是为什么后台把 GitHub+jsDelivr、SM.MS 等方案都比下去的原因——jsDelivr 在国内已被封锁 DNS 污染, 图片经常裂图; 免费公共图床则有随时删图/跑路的风险.

搭建流程大致是:注册 Cloudflare → 开 R2 → 建 Bucket → 配置公开访问 (测试可用 r2.dev 子域, 正式建议绑自定义域名)→ 建 API 令牌 → PicGo 装 S3 插件填入 AccessKey/Secret/Bucket/Endpoint → 测试上传

自己买个域名大概一年会耗费 10 刀左右, 也就是 66 块钱, 还是很值的. 用过你就知道写博客时候的顺畅感太重要了
另外, hexo 并不能完美在你修改之后进行 html 的实时渲染, 尤其是你修改了配置文件.
在渲染出错的时候, 可以直接进入本地的 public/ 里查看实际生成的内容.

可以查看我的 Cloudflare R2 图床配置

选择二:国内云服务商免费额度 (七牛云等)

七牛云等也有约 10GB 免费额度, 速度稳定.
但绑自己域名基本都要求备案, 流程繁琐, 个人博客图省事的话不太友好.
还有 get 次数有限制目前是每月 100 万次, 其实也够用.

类标签适配

有时候在跳转到某个标签下的文章的时候, 会出现忽略特殊字符的情况, 比如 C++ 识别为 C 导致 C++ 标签的文章和 C 标签的文章被错误地归为一类, 所以可以在 _config.yml 里添加或者修改 tag_map 字段:

_config.yml 相关设置

1
2
3
4
5
default_category: uncategorized
category_map:
tag_map:
  'C++': cpp
  'C#': c-sharp

这样, 路径就会这样显示 http://127.0.0.1:4000/tags/cpp/ http://127.0.0.1:4000/tags/c-sharp/

文章跳转

当前文章跳转到指定标题

[文章跳转](#文章跳转)

文章跳转

这种写法缺点:

  1. 修改标题后链接失效
  2. 文章标题五花八门会进行 slug 处理
    “文章 跳转” 会被改成 “文章-跳转”, 因为不允许有空格, 所以最好你点过去试一下, 看看浏览器地址栏, 再选择怎么写

文章跳转不涉及标题

{% post_link linux-command Linux 命令详解 %}

其中 linux-command 是文章名 Linux 命令详解 是显示的可点击的链接文字

跳转到指定标题

{% post_link linux-command#总结 Linux 命令详解 总结 %}

在文章名后直接加 #标题 就好了, 但是依旧需要 slug 处理字符

有很多文章推荐使用 HTML, 我感觉违背了写博客的初衷, 而且过于复杂的页面也不好维护, 简单就是最好的.

但是, Markdown 不允许使用相同的标题, 这会使得跳转的时候出错, 但无所谓了, 这个功能本身就很粗糙. 凑合着用吧.

个人使用习惯

开始使用 codespaces

我总感觉配置博客是一个很麻烦的事情, 如果能配置一次以后不需要大调整就最好了, 所以我就把博客系统托管了, 考虑买个 VPS 的, 但又感觉有点贵, 最后选择了 github 的 codespaces , 弊端是限制时间, 优点是写博客不需要耗太多时间, 只需要将博客在本地写好, 然后再在 codespaces 调整一下格式然后提交就行.

这也是我最关心的, 写博客只关注博客本身就好了, 频繁修改格式会打扰思路, 这样将写内容和调整格式, 反而可以更顺畅的来写博客

codespaces 部署的方便快捷

使用 GitHub 登录 或者 配置 GH_TOKEN

codespaces 天然有 github 的权限

我是在一个 blog 仓库里向 DarkFlameMasterDev.github.io 部署博客

所以就需要跨仓库的权限, 只需要执行以下命令即可

1
2
3
4
5
6
gh auth logout
unset GITHUB_TOKEN
gh auth login
> GitHub.com
> HTTPS
> Login with a web browser

授予它权限即可.

最后将 _config.yml 进行修改

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/DarkFlameMasterDev/DarkFlameMasterDev.github.io.git
  branch: main

或者你使用 github 的访问 TOKEN 也可以然后在 pages 设置里设置一个 变量 GH_TOKEN 但是还需要 unset 一下

SSH

还得是万能的 SSH ！！！

这个直接看 github SSH Doc 就行

记得部署 填写 ssh 的 git 链接, 不是 https

  • 标题: hexo-redefine 部署指南 (持续更新)
  • 作者: Lucas
  • 创建于 : 2023-08-14 23:12:51
  • 更新于 : 2026-09-24 22:00:26
  • 链接: https://darkflamemasterdev.github.io/2023/08/14/hexo-redefine-部署指南（持续更新）/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
其他文章
Cloudflare R2 图床配置 Cloudflare R2 图床配置 开发工具设置 开发工具设置 数据库-函数依赖 数据库-函数依赖
其他文章
Cloudflare R2 图床配置 Cloudflare R2 图床配置 开发工具设置 开发工具设置
评论
目录
hexo-redefine 部署指南 (持续更新)
  1. npm 包相关安装设置
    1. 搜索文章
    2. 文章推荐
    3. 字数统计
    4. katex 来写 math (官方文档没有)
  2. 图片引入
    1. 1.全局资源文件夹
    2. 2.文章资源文件夹
      1. 相对路径引用的标签插件
      2. 使用 Markdown 嵌入图片
    3. 3. 配置图床
      1. 选择一:Cloudflare R2 (目前口碑最好, 推荐首选)
      2. 选择二:国内云服务商免费额度 (七牛云等)
    4. 类标签适配
  3. 文章跳转
    1. 当前文章跳转到指定标题
    2. 文章跳转不涉及标题
    3. 跳转到指定标题
  4. 个人使用习惯
    1. 开始使用 codespaces
    2. codespaces 部署的方便快捷
      1. 使用 GitHub 登录 或者 配置 GH_TOKEN
      2. SSH