Hexo博客搭建

Hexo博客搭建

安知鱼Hexo主题项目地址

安知鱼官方文档

Hexo官方文档

1. 安装前准备

  • 域名
  • Github
  • Cloudflare

2. 环境支持

  • Node.js
  • Git
  • VsCode

2.1 修改npm源

修改成国内华为源

1
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

2.2 配置Git

常用Git命令

1
2
3
git config -l  //查看所有配置
git config --system --list //查看系统配置
git config --global --list //查看用户（全局）配置

2.2.1 配置用户名和密码

1
2
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

通过git config -l验证配置是否生效

2.2.2 配置公钥并连接到Github

  • 生成公钥，可以一路Enter，不设置密钥
1
ssh-keygen -t rsa -C "你的邮箱"

  • 会在C盘用户文件夹中的.ssh文件夹中查看生成的公钥和密钥

    • id_rsa 私钥

    • id_rsa.pub 公钥

  • 将公钥配置到Github中

    • setting -> SSH and GPG keys -> 新建并将公钥粘贴保存

  • 测试连接

1
ssh -T [email protected]

初次连接输入yes即可

2.3 创建Github.io仓库

创建一个<用户名>.github.io的公共仓库

2.4 初始化Hexo博客

  • 创建一个工作文件夹保存博客源码
  • 在工作文件夹中使用git bash中安装Hexo
1
npm install -g hexo-cli && hexo -v

hexo -v验证是否安装成功

  • 初始化Hexo项目安装依赖
1
2
3
hexo init blog-demo
cd blog-demo
npm i
  • 输入hexo cl && hexo s启动项目

2.5 静态博客挂载到Github Pages

  • 安装hexo-deployer-git
1
npm install hexo-deployer-git --save
  • 修改_config.yml

整个Hexo框架的配置文件，参考官方的配置描述

1
2
3
4
deploy:
  type: git
  repository: [email protected]:<你的github用户名>/<你的github仓库名>.github.io.git
  branch: main
  • 修改配置后运行以下命令，将代码部署到Github
1
2
3
4
5
6
7
8
9
10
11
// Git BASH终端
hexo clean && hexo generate && hexo deploy  

// 或者

// VSCODE终端
hexo cl; hexo g; hexo d

// hexo clean: 删除之前生成的文章，可以用`hexo cl`缩写
// hexo generate: 生成静态文章，可以用`hexo g`缩写
// hexo depoly: 部署文章，可以用`hexo d`缩写；部署时可能会要求输入你的github的username和password

等待部署完毕后，浏览器访问：https://<你的github仓库名>.github.io即可访问博客内容

2.6 将博客挂载到Cloudflare Pages

  • 在计算-Workers 和 Pages中选择Pages的连接到Git
  • 选择部署的Hexo存储库
  • 保存并部署并等待部署完成
  • 修改Github仓库为私有仓库
  • 在已部署的hexo pages中，找到导航栏选择自定义域，设置自己的域名

3. Hexo的使用

3.1 新建博文

1
2
3
hexo new 你的博文

// 在source/_posts 中找到你的博文.md 使用`markdown`编写

编辑并保存后预览文章

1
2
3
4
5
6
7
// Git BASH终端
hexo cl && hexo s

// 或者

// VSCODE终端
hexo cl; hexo s

3.3 推送文章

1
2
3
4
5
6
7
// Git BASH终端
hexo cl && hexo g && hexo d

// 或者

// VSCODE终端
hexo cl; hexo g; hexo d

3.4 vscode首次执行终端报错

以管理员身份打开powershell，执行以下命令

1
Set-ExecutionPolicy RemoteSigned

4. 主题美化

4.1 安装主题

  • 在博客根目录使用Git安装安知鱼主题
1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

第一次使用还需要安装pug和stylus的渲染器

1
npm install hexo-renderer-pug hexo-renderer-stylus --save
  • 修改_config.yml文件，将主题改为anzhiyu
1
theme: anzhiyu
  • 在根目录下创建_config.anzhiyu.yml,将安装生成的主题文件中的/themes/anzhiyu/_config.yml中的内容复制到_config.anzhiyu.yml并保存
  • 生成标签页和分类页
1
2
3
hexo new page tags  // 生成标签页

hexo new page categories  // 生成分类页

找到source/tags/index.md和source/categories/index.md并修改添加type属性

1
2
3
4
5
6
7
---
title: 标签
date: 2025-05-17 00:00:00
type: "tags"
comments: false
top_img: false
---
1
2
3
4
5
6
7
---
title: 分类
date: 2025-05-17 00:00:00
aside: false
top_img: false
type: "categories"
---

4.2 配置文章模板

在/scaffolds中修改post.md和page.md模板文件

  • post.md 新建博文模板 仅供参考
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
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
updated: #【可选】页面更新日期
tags: #【可选】文章标签
categories: #【可选】文章分类
keywords: #【可选】文章关键字
description: #【可选】文章描述
top: # 1 置顶
top_img: #【可选】文章顶部图片
comments: #【可选】显示文章评论模块(默认 true)
cover: https://img.090227.xyz/file/ae62475a131f3734a201c.png #【可选】文章缩略图(如果没有设置 top_img,文章页顶部将显示缩略图，可设为 false/图片地址/留空)
toc: #【可选】显示文章 TOC(默认为设置中 toc 的 enable 配置)
toc_number: #【可选】显示 toc_number(默认为设置中 toc 的 number 配置)
toc_style_simple: #【可选】显示 toc 简洁模式
copyright: #【可选】显示文章版权模块(默认为设置中 post_copyright 的 enable 配置)
copyright_author: #【可选】文章版权模块的文章作者
copyright_author_href: #【可选】文章版权模块的文章作者链接
copyright_url: #【可选】文章版权模块的文章作者链接
copyright_info: #【可选】文章版权模块的版权声明文字
mathjax: #【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex: #【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
aside: #【可选】显示侧边栏 (默认 true)
swiper_index: 10 #【可选】首页轮播图配置 index 索引，数字越小越靠前
top_group_index: 10 #【可选】首页右侧卡片组配置, 数字越小越靠前
ai: #【可选】文章ai摘要
background: "#fff" #【可选】文章主色，必须是16进制颜色且有6位，不可缩减，例如#ffffff 不可写成#fff
---

<div class="video-container">
[up主专用，视频内嵌代码贴在这]
</div>

<style>
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio (height/width = 9/16 * 100%) */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
  • page.md 新建标签页模板 仅供参考
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
type: #【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置
updated: #【可选】页面更新日期
comments: #【可选】显示页面评论模块(默认 true)
description: #【可选】页面描述
keywords: #【可选】页面关键字
top_img: https://img.090227.xyz/file/ae62475a131f3734a201c.png #【可选】页面顶部图片
mathjax: #【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex: #【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aside: #【可选】显示侧边栏 (默认 true)
aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
top_single_background: #【可选】部分页面的顶部模块背景图片
---

4.3 更多功能

4.3.1 新建文章

1
hexo new 这是一篇新的博文

4.3.2 新建标签页

1
hexo new page 新建的标签页

4.3.3 文章置顶

安装插件

1
hexo new page 新建的标签页

给需要的文章添加top参数，并设置优先级，值越大越靠前

1
2
3
4
5
6
7
8
9
---
title: 每天一个linux命令
date: 2025-05-17 00:00:00
top: 1
categories:
- 运维
tags:
- linux命令
---

4.3.4 开启本地搜索

安装插件

1
npm install hexo-generator-search --save

开启主题配置的中的local_search

1
2
3
4
local_search:
  enable: true
  preload: false
  CDN:
参数 解释
enable 是否开启本地搜索
preload 预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件
CDN 搜索文件的 CDN 地址（默认使用的本地链接）

4.3.5 添加任意文件

只需要在/source文件夹下添加文件，如ads.txt

4.3.6 短标签

短标签是 Hexo 独有的功能，并不是标准的 Markdown 格式。安知鱼主题短标签

4.3.7 文章加密

执行命令进行插件安装，详细配置查看官方文档

1
npm install --save hexo-blog-encrypt

5. 安知鱼主题标签

5.1 mermaid图

修改config.anzhiyu.yml配置文件以下配置

1
2
3
4
5
6
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark
1
2
3
4
5

{% mermaid %}
内容
{% endmermaid %}

1
2
3
4
5
6
7
8
9

{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

5.2 分栏tab

1
2
3
4
5
6
7
8
9
{% tabs Unique name, [index] %}

<!-- tab [Tab caption] [@icon] -->

Any content (support inline tags too).

<!-- endtab -->

{% endtabs %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- Unique name :
  选项卡块标签的唯一名称，不带逗号。
  将在#id 中用作每个标签及其索引号的前缀。
  如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
  仅当前帖子/页面的 URL 必须是唯一的！
- [index]:
  活动选项卡的索引号。
  如果未指定，将选择第一个标签（1）。
  如果 index 为-1，则不会选择任何选项卡。
  可选参数。
- [Tab caption]:
  当前选项卡的标题。
  如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
  如果未指定标题，但指定了图标，则标题将为空。
  可选参数。
- [@icon]: - FontAwesome 图标名称（全名，看起来像“ fas fa-font”） - 可以指定带空格或不带空格； - 例如’Tab caption @icon’ 和 ‘Tab caption@icon’. - 可选参数。