Hexo 博客搭建

1 Hexo 介绍

Hexo 官网地址：https://hexo.io/zh-cn/

Hexo 官网主页

Hexo 是一个基于 Node.js 构建的静态博客生成框架。它允许用户使用 Markdown 或其他标记语言编写文章，并通过简单的命令将这些文章转换为静态网页，从而可以轻松地创建个人博客或网站。Hexo 的主要特点包括：

静态网页生成： Hexo 将文章和页面内容转换为静态 HTML 文件，这意味着访问者在浏览时不需要执行服务器端的代码，从而加快页面加载速度。
Markdown 支持：用户可以使用 Markdown 语法来编写文章，这是一种轻量级的标记语言，易于学习和使用。
主题和插件： Hexo 支持各种主题和插件，用户可以选择适合自己风格的主题，同时可以利用插件来增强博客的功能。
简单命令行操作： Hexo 提供了一系列简单的命令，如创建新文章、生成静态页面、部署到远程服务器等，使用户可以轻松管理和维护博客。
版本控制和备份：由于 Hexo 生成的是静态文件，您可以将博客内容存储在版本控制系统中，如 Git，以便轻松地管理内容版本和进行备份。

2 Hexo 安装

安装 Hexo 相当简单，只需要先安装下列应用程序即可（对应官网下载安装包即可）：

Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
Git

上述应用安装完成后，替换 npm 镜像源：

1	npm config set registry https://registry.npmmirror.com

替换完成后，即可使用 npm 安装 Hexo：

1	npm install hexo-cli -g

3 Hexo 建站

3.1 本地部署

3.1.1 Hexo 快速搭建

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件（在任意编辑器中打开 Git Bash 即可）：

# 由于未知的网络问题，可能会出现代码拉取不下来的情况这里你懂的
git config --global http.proxy "http://127.0.0.1:7897"
git config --global https.proxy "https://127.0.0.1:7897"

# 创建并初始化文件夹
hexo init hexo-blog

# 这里需要注意，如果使用 WebStorm 需要先初始化在打开

在 hexo-blog 目录中安装依赖：

1	npm install

3.1.2 Hexo 常用命令

命令	说明
hexo init [folder]	新建并初始化一个文件夹
hexo new [layout] <title>	新建一篇文章
hexo generate [-d]	生成静态文件
hexo server	启动服务器，在默认情况下访问网址为： http://localhost:4000/
hexo deploy	部署网站（上传）
hexo clean	清除缓存文件 (db.json) 和已生成的静态文件 (public)

快速启动查看效果：

1	hexo generate ; hexo server

Hexo 本地搭建默认页面

3.2 GitHub 部署

前提：注册一个 GitHub 账号。

3.2.1 新建仓库

Hexo 仓库名格式：GitHub_Name.github.io（固定死了），其他默认即可。

Hexo GitHub 部署仓库示例

3.2.2 配置 Git

配置 git 用户名，最好与 github 保持一致：

1	git config --global user.name "Y0n9zh"

配置 git 邮箱：

1	git config --global user.email "Y0n9zh@gmail.com"

3.2.3 配置 Hexo

打开 hexo-blog 目录下的 _config.yml 文件，配置如下内容：

deploy:
  type: 'git'
  repo: 'https://github.com/Y0n9zh/Y0n9zh.github.io.git' # GitHub 仓库地址
  branch: main # 主分支

3.2.4 推送 GitHub

安装 hexo 和 github 部署的插件：

1	npm install hexo-deployer-git --save

一条命令推送（如果没做免密，会要求输入 GitHub 账号密码）：

1	hexo clean ; hexo generate ; hexo deploy

Hexo GitHub 推送仓库示例

选择用于展示的分支：

GitHub 选择用于展示的分支

访问地址：https://y0n9zh.github.io/

Hexo GitHub Page 示例

4 Hexo 配置文件说明

4.1 核心配置与依赖相关

文件 / 文件夹	说明
_config.yml	Hexo 博客的全局配置文件，用于设置站点标题、描述、作者、部署方式、主题相关配置等核心内容，是整个博客项目的关键配置入口。
package.json	项目依赖的包
package-lock.json	锁定依赖包的具体版本
node_modules	存放项目依赖的 Node.js 包，执行 `npm install` 时下载的各类包（如 Hexo 本身、各种插件）都在这里，一般无需手动操作该文件夹，但项目运行依赖它。

4.2 博客内容与生成相关

文件 / 文件夹	说明
scaffolds	脚手架（模板）目录，里面是新建文章、页面等时的默认模板文件，可自定义模板格式，让每次新建内容都自带固定的前置内容。
source	存放博客的原始内容，比如 Markdown 格式的博客文章、页面文件，以及图片、音频等静态资源，Hexo 会读取这里的内容进行处理生成静态页面。
public	Hexo 执行 `hexo generate` 命令后，生成的静态网页文件会存放在这里，这些就是最终部署到服务器上的内容，一般无需手动修改，由 Hexo 自动生成。
themes	存放博客使用的主题，每个主题是一个独立文件夹，主题里包含布局文件、样式文件、脚本文件等，可更换、自定义主题来改变博客外观和功能。
_config.landscape.yml	如果使用 `landscape` 主题（Hexo 默认主题），这是该主题的专属配置文件，用于覆盖主题默认设置。

4.3 辅助与部署相关

文件 / 文件夹	说明
.deploy_git	当使用 `hexo-deployer-git` 部署插件，执行 `hexo deploy` 时，可能会生成的临时目录，用于存放待推送到远程仓库的文件，和部署流程相关，一般无需手动干预。
.github	用于存放 GitHub 相关的配置，若有自动化部署、CI / CD 需求，会在这里配置脚本。
.gitignore	Git 版本控制的忽略文件配置，指定哪些文件或文件夹不需要被 Git 跟踪，避免把冗余文件提交到 GitHub 仓库。
db.json	Hexo 用于缓存内容数据，记录文章、页面的元信息，辅助 Hexo 快速生成静态页面，一般不用手动修改，Hexo 会自动维护。

5 Butterfly 主题安装

Hexo 官方主题地址：https://hexo.io/themes/

Butterfly 主题地址：https://github.com/jerryc127/hexo-theme-butterfly

Butterfly 配置教程地址：https://butterfly.js.org/

安装命令如下（Git）：

1	git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

安装相关插件：

1	npm install hexo-renderer-pug hexo-renderer-stylus --save

修改 _config.yml 配置文件：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

查看结果：

Hexo Butterfly 初始页面

6 Butterfly 主题配置

6.1 快速编辑 Butterfly 配置

将 themes/butterfly/_config.yml 复制一份到 hexo-blog 目录下，并重命名为 _config.butterfly.yml，后续可以直接修改该文件内容：

# 复制 butterfly 配置文件
cp themes/butterfly/_config.yml _config.butterfly.yml

# 删除 landscape 默认的配置文件
rm -f _config.landscape.yml

6.2 Front-matter 参数配置

Front-matter 是 markdown 文件最上方以 --- 分隔的区域，用于定义文章的元数据。

Page Front-matter：用于页面配置
Post Front-matter：用于文章页配置

书写示例如下（Hexo 官方）：

---
title: Hello World
date: 2013/7/13 20:46:25
---

通常而言，一个 Page Front-matter 需要包含如下几部分内容：

参数	解释
title	页面标题
date	页面创建日期
type	标签、分类和友情链接三个页面需要配置

而 Post Front-matter 就比较多了：

参数	解释
title	页面标题
date	页面创建日期
updated	页面更新日期（太麻烦了我也没加）
categories	文章分类（建议不超过两个）
top_img	文章顶部图片

Post Front-matter 示例如下：

---
title: Hexo 博客搭建
date: 2025-08-20 20:23:04
categories: 
	- Hexo
top_img: ./img/post_img/page_img1.jpg
---

6.3 创建分类页

注意：这里之所以不创建标签页和友情链接页是因为我认为后期管理太麻烦了。

在 hexo-blog 目录下，执行如下命令：

1 2	# 创建分类页 hexo new page categories

将生成的 index.md 文件内容进行修改：

# source/categories/index.md
---
title: 文章分类
date: 2025-08-20 19:09:44
type: "categories"
---

6.4 配置 404 页面

Butterfly 主题内置了一个简单的 404 页面，可在设置中开启：

# A simple 404 page
error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: /img/error-page.jpg

这里有两点需要注意：

本地预览时，访问出错是不会跳转到 404 页面的。
如需本地访问，请访问：http://localhost:4000/404.html

Hexo 404 页面

6.5 修改默认配置文件

注意：仅供参考。

内容如下：

# --------------------------------------
# 导航设置
# --------------------------------------

nav:
  # 导航栏 Logo 图片
  logo:
  # 是否显示标题
  display_title: true
  # 是否在滚动时显示文章标题
  display_post_title: true
  # 是否固定导航栏
  fixed: true

menu:
  首页: / || fas fa-home
  # hide 表示这是一个可展开/折叠的菜单
  文章 || fas fa-archive || hide:
    分类: /categories/ || fas fa-folder-open
    归档: /archives/ || fas fa-archive
  ......

# --------------------------------------
# 代码块设置
# --------------------------------------

code_blocks:
  # 代码块主题: darker / pale night / light / ocean / false
  theme: light
  # 是否使用 Mac 风格
  macStyle: true
  # 代码块高度限制（单位: px）
  height_limit: false
  # 是否自动换行
  word_wrap: false
  
  # 工具栏
  # 是否显示复制按钮
  copy: true
  # 是否显示语言标签
  language: true
  # true: 收缩代码块 | false: 展开代码块 | none: 展开代码块并隐藏按钮
  shrink: false
  # 是否显示全屏显示代码块按钮
  fullpage: false

# 社交媒体链接
social:
  fas fa-envelope: mailto:y0n9zh@gmail.com || Email || '#000000'
  fa-solid fa-paperclip: https://www.yuque.com/yongz || Yueque || '#000000'
  
# --------------------------------------
# 图片设置
# --------------------------------------

# 网站的 favicon 图标，在 source 目录下创建一个 img 文件夹
favicon: ./img/favicon.ico

# 头像设置
avatar:
  # 头像图片链接
  img: ./img/avatar.jpg
  # 是否启用头像效果
  effect: false

# 禁用所有横幅图片
disable_top_img: false

# 如果页面未设置横幅，则显示默认的横幅图片（就是访问网站是最大的那张图）
default_top_img: ./img/default_top_img.jpg

# 主页的横幅图片
index_img:

# 归档页的横幅图片
archive_img:

# 注意: 是标签页（单个标签），不是标签页面（所有标签）
tag_img:

# 标签页的横幅图片，可以为每个标签设置横幅图片
# 格式:
#  - 标签名: 图片链接
tag_per_img:

# 注意: 是分类页（单个分类），不是分类页面（所有分类）
category_img:

# 分类页的横幅图片，可以为每个分类设置横幅图片
# 格式:
#  - 分类名: 图片链接
category_per_img:

# 页脚的背景图片
footer_img: false

# 网站背景
# 可以设置为颜色或图片
# 图片格式: url(http://xxxxxx.com/xxx.jpg)
background:

# 封面设置
cover:
  # 是否禁用封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 主页封面的位置
  # 选择: left/right/both
  position: both
  # 当未设置封面时，显示默认封面
  default_cover:
    - ./img/default_cover.jpg
    
# 替换损坏的图片
error_img:
  # 友链页面的错误图片
  flink: ./img/404.jpg
  # 文章页面的错误图片
  post_page: ./img/404.jpg

# 简单的 404 页面
error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: ./img/404.jpg
  
# 文章元数据设置
post_meta:
  # 主页页面
  page:
    # 日期类型: created / updated / both
    date_type: created
    # 日期格式: date / relative
    date_format: date
    # 是否显示分类
    categories: true
    # 是否显示标签
    tags: false
    # 是否显示文字标签
    label: false
  # 文章页面
  post:
    # 元数据位置: left / center
    position: center
    # 日期类型: created / updated / both
    date_type: created
    # 日期格式: date / relative
    date_format: date
    # 是否显示分类
    categories: true
    # 是否显示标签
    tags: false
    # 是否显示文字标签
    label: false

# --------------------------------------
# 首页设置
# --------------------------------------

# 首页头图的设置
# 默认: 头图全屏，站点信息在中间
# 站点信息的位置，例如: 300px/300em/300rem/10%
index_site_info_top:
# 头图的高度，例如: 300px/300em/300rem
index_top_img_height:

# 首页的副标题设置
subtitle:
  # 是否启用副标题
  enable: true
  # 是否启用打字机效果
  effect: true
  # 自定义 typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # 来源 - 调用第三方服务 API（仅限中文）
  # 它将首先显示来源，然后显示副标题内容
  # 选择: false/1/2/3
  # false - 禁用此功能
  # 1 - hitokoto.cn
  # 2 - yijuzhan.com
  # 3 - jinrishici.com
  source: 3
  # 如果关闭打字机效果，副标题将仅显示 sub 的第一行内容
  sub:

# 首页文章佈局
# 1: 行佈局
# 2: 列布局
index_layout: 1

# 在首页显示文章简介
# 1: 描述
# 2: 两者（如果存在描述，将显示描述，否则显示自动摘要）
# 3: 自动摘要（默认）
# false: 不显示文章简介
index_post_content:
  method: 3
  # 如果设置 method 为 2 或 3，需要配置长度
  length: 500

# --------------------------------------
# 文章设置
# --------------------------------------

toc:
  # 是否在文章中显示目录
  post: true
  # 是否在页面中显示目录
  page: false
  # 是否显示目录编号
  number: true
  # 是否默认展开目录
  expand: true
  # 是否使用简洁风格（仅适用于文章）
  style_simple: false
  # 是否显示滚动百分比
  scroll_percent: true

post_copyright:
  # 是否启用版权声明
  enable: false
  # 是否进行文章 URL 解码
  decode: false
  # 作者链接
  author_href: Yongz丶
  # 许可证类型
  license: CC BY-NC-SA 4.0
  # 许可证链接
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

# 贊助/打赏
reward:
  # 是否启用打赏
  enable: false
  # 打赏案例文本
  text:
  QR_code:
    # - img: /img/wechat.jpg
    #   link:
    #   text: 微信
    # - img: /img/alipay.jpg
    #   link:
    #   text: 支付宝

# 文章编辑
# 轻鬆在线浏览和编辑博客源代码
post_edit:
  # 是否启用在线编辑
  enable: false
  # url: https://github.com/用户名/仓库名/edit/分支名/子目录名/
  # 例如: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

# 相关文章
related_post:
  # 是否显示相关文章
  enable: true
  # 显示的文章数量
  limit: 6
  # 选择: created / updated
  date_type: created
  
# 选择: 1 / 2 / false
# 1: “下一篇文章”将链接到旧文章
# 2: “下一篇文章”将链接到新文章
# false: 禁用分页
post_pagination: 1

# 显示文章过期通知
noticeOutdate:
  # 是否启用过期通知
  enable: false
  # 样式: simple / flat
  style: flat
  # 多少天后显示通知
  limit_day: 365
  # 位置: top / bottom
  position: top
  message_prev: 已经过了
  message_next: 天自上次更新，文章内容可能已过时。

# --------------------------------------
# 页脚设置
# --------------------------------------
footer:
  # 页脚导航栏配置
  nav:
  owner:
    # 是否启用所有者显示
    enable: true
    # 网站创建年份
    since: 2023
  # 自定义文本
  custom_text:
  # 主题和框架的版权声明
    <a href="https://beian.miit.gov.cn/#/Integrated/index"  style="color:white" target="_blank">闽ICP备2024058441号-1</a> | 免责声明：请勿利用文章内的相关技术从事非法测试，如因此产生的一切不良后果与本人无关
  copyright:
    enable: true
    # 显示版本号
    version: true

# --------------------------------------
# 侧边栏设置
# --------------------------------------

aside:
  # 是否启用侧边栏
  enable: true
  # 是否默认隐藏侧边栏
  hide: false
  # 是否在右下角显示隐藏侧边栏的按钮
  button: true
  # 移动设备上是否启用侧边栏
  mobile: true
  # 侧边栏位置：left / right
  position: right
  display:
    # 归档页面是否显示侧边栏
    archive: true
    # 标签页面是否显示侧边栏
    tag: true
    # 分类页面是否显示侧边栏
    category: true
  card_author:
    # 是否显示作者信息卡片
    enable: true
    # 作者描述
    description:
    button:
      # 是否显示按钮
      enable: true
      # 按钮图标
      icon: fab fa-github
      # 按钮文本
      text: Follow Me
      # 按钮链接
      link: https://github.com/Y0n9zh?tab=repositories
  card_announcement:
    # 是否显示公告卡片
    enable: true
    # 公告内容
    content: 不定时分享一些内容...
  card_recent_post:
    # 是否显示最近文章卡片
    enable: true
    # 显示文章数量，0 表示显示所有
    limit: 5
    # 排序方式：date / updated
    sort: date
    sort_order:
  card_newest_comments:
    # 是否显示最新评论卡片
    enable: false
    sort_order:
    # 显示评论数量
    limit: 6
    # 单位：分钟，保存数据到 localStorage
    storage: 10
    # 是否显示头像
    avatar: true
  card_categories:
    # 是否显示分类卡片
    enable: true
    # 显示分类数量，0 表示显示所有
    limit: 8
    # 选择：none / true / false
    expand: none
    sort_order:
  card_tags:
    # 是否显示标签卡片
    enable: false
    # 显示标签数量，0 表示显示所有
    limit: 40
    # 是否启用颜色
    color: false
    # 标签排序方式：random/name/length
    orderby: random
    # 排序顺序：1 表示升序，-1 表示降序
    order: 1
    sort_order:
  card_archives:
    # 是否显示归档卡片
    enable: true
    # 归档类型：monthly / yearly
    type: monthly
    # 日期格式，例如：YYYY年MM月
    format: MMMM YYYY
    # 排序顺序：1 表示升序，-1 表示降序
    order: -1
    # 显示归档数量，0 表示显示所有
    limit: 8
    sort_order:
  card_post_series:
    # 是否显示系列文章卡片
    enable: true
    # 标题显示系列名称
    series_title: false
    # 排序方式：title 或 date
    orderBy: 'date'
    # 排序顺序：1 表示升序，-1 表示降序
    order: -1
  card_webinfo:
    # 是否显示网站信息卡片
    enable: true
    # 是否显示文章数量
    post_count: true
    # 是否显示最后推送日期
    last_push_date: true
    sort_order:
    # 发佈日期与当前日期的时间差
    # 格式：Month/Day/Year Time 或 Year/Month/Day Time
    # 如果不启用此功能，请留空
    runtime_date: 8/29/2023 00:00:00

# --------------------------------------
# 右下角按钮设置
# --------------------------------------

# 右下角按钮与底部的距离（默认单位：px）
rightside_bottom:

# 简繁转换设置
translate:
  # 是否启用简繁转换
  enable: false
  # 按钮文本
  default: 繁
  # 网站语言（1 - 繁体中文 / 2 - 简体中文）
  defaultEncoding: 2
  # 转换延迟
  translateDelay: 0
  # 按钮在简体中文时的文本
  msgToTraditionalChinese: '繁'
  # 按钮在繁体中文时的文本
  msgToSimplifiedChinese: '简'

# 閲读模式
readmode: true

# 暗黑模式设置
darkmode:
  # 是否启用暗黑模式
  enable: true
  # 切换暗黑/明亮模式的按钮
  button: true
  # 是否自动切换暗黑/明亮模式
  # autoChangeMode: 1  跟随系统设置，如果系统不支持暗黑模式，则在晚上 6 点到早上 6 点之间切换暗黑模式
  # autoChangeMode: 2  在晚上 6 点到早上 6 点之间切换暗黑模式
  # autoChangeMode: false  不自动切换
  autoChangeMode: false
  # 设置明亮模式时间，值在 0 到 24 之间。如果未设置，默认值为 6 和 18
  start:
  end:

# 在返回顶部按钮中显示滚动百分比
rightside_scroll_percent: false

# 不要修改以下设置，除非你知道它们的工作原理
# 选择：readmode,translate,darkmode,hideAside,toc,chat,comment
# 不要重复相同的值
rightside_item_order:
  # 是否启用右侧项目顺序
  enable: false
  # 隐藏的默认项目：readmode,translate,darkmode,hideAside
  hide:
  # 显示的默认项目：toc,chat,comment
  show:

# 右下角配置按钮动画效果
rightside_config_animation: true

# --------------------------------------
# 全局设置
# --------------------------------------

# 锚点设置
anchor:
  # 滚动时，URL 将根据标题 ID 更新
  auto_update: false
  # 点击标题滚动并更新锚点
  click_to_scroll: false
  
# 图片标题
photofigcaption: false

# 复制设置
copy:
  # 是否启用复制功能
  enable: true
  # 在复制的内容后添加版权信息
  copyright:
    enable: false
    # 当复制字符数超过 limit_count 时添加版权信息
    limit_count: 150
    
# 需要安装 hexo-wordcount 插件
wordcount:
  # 是否启用字数统计
  enable: true
  # 在文章元信息中显示字数统计
  post_wordcount: true
  # 在文章元信息中显示閲读时间
  min2read: true
  # 在侧边栏网站信息中显示总字数
  total_wordcount: true

# 不蒜子 PV / UV 统计
busuanzi:
  # 网站 UV 统计
  site_uv: true
  # 网站 PV 统计
  site_pv: true
  # 页面 PV 统计
  page_pv: true
  
# --------------------------------------
# 数学公式设置
# --------------------------------------

# 关于 per_page
# 如果设置为 true，将在每个页面加载 mathjax/katex 脚本
# 如果设置为 false，将根据你的设置加载 mathjax/katex 脚本（在页面的 front-matter 中添加 'mathjax: true' 或者 'katex: true'）
math:
  # 选择：mathjax, katex
  # 如果不需要数学公式，保持为空
  use:
  per_page: true
  hide_scrollbar: false

  mathjax:
    # 启用上下文菜单
    enableMenu: true
    # 选择：all / ams / none，这控制是否对公式编号以及如何编号
    tags: none

  katex:
    # 启用复制 KaTeX 公式
    copy_tex: false

# --------------------------------------
# 搜索设置
# --------------------------------------

search:
  # 选择：algolia_search / local_search / docsearch
  # 如果不需要搜索功能，保持为空
  use: local_search
  # placeholder:

  # Algolia 搜索
  algolia_search:
    # 每页搜索结果数量
    hitsPerPage: 6

  # 本地搜索
  local_search:
    # 页面加载时预加载搜索数据
    preload: true
    # 每篇文章显示的顶部 n 个搜索结果，设置为 -1 显示所有结果
    top_n_per_article: 1
    # 将 HTML 字符串反转义为可读内容
    unescape: false
    CDN:

  # Docsearch
  # https://docsearch.algolia.com/
  docsearch:
    appId:
    apiKey:
    indexName:
    option:

# --------------------------------------
# 分享系统
# --------------------------------------

share:
  # 选择：sharejs / addtoany
  # 如果不需要分享功能，保持为空
  use: sharejs

  # Share.js
  # https://github.com/overtrue/share.js
  sharejs:
    sites: facebook,twitter,wechat,weibo,qq

  # AddToAny
  # https://www.addtoany.com/
  addtoany:
    item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

# --------------------------------------
# 评论系统
# --------------------------------------

comments:
  # 最多两个评论系统，第一个将作为默认显示
  # 如果不需要评论功能，保持为空
  # 选择：Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  # 两个评论系统的格式：Disqus,Waline
  use:
  # 按钮旁边显示评论系统名称
  text: true
  # 懒加载：评论系统将在评论元素进入浏览器视口时加载
  # 如果设置为 true，评论计数将无效
  lazyload: true
  # 在文章顶部图片中显示评论计数
  count: false
  # 在主页显示评论计数
  card_post_count: false

# Disqus 评论插件配置
# 官方文档：https://disqus.com/
disqus:
  # Disqus 的 shortname
  shortname:
  # 最新评论小部件的 API 密钥
  apikey:

# 使用 Disqus API 渲染评论的替代方案
# 官方文档：https://github.com/SukkaW/DisqusJS
disqusjs:
  # Disqus 的 shortname
  shortname:
  # API 密钥
  apikey:
  # 其他可选配置
  option:

# Livere 评论插件配置
# 官方文档：https://www.livere.com/
livere:
  # Livere 的用户 ID
  uid:

# Gitalk 评论插件配置
# 官方文档：https://github.com/gitalk/gitalk
gitalk:
  # GitHub 应用的客户端 ID
  client_id:
  # GitHub 应用的客户端密钥
  client_secret:
  # 存储评论的仓库名称
  repo:
  # 仓库拥有者的用户名
  owner:
  # 管理员用户名列表
  admin:
  # 其他可选配置
  option:

# Valine 评论插件配置
# 官方文档：https://valine.js.org
valine:
  # LeanCloud 应用的 appId
  appId:
  # LeanCloud 应用的 appKey
  appKey:
  # 评论者头像样式
  avatar: monsterid
  # 该配置适用于国内自定义域名用户，海外版本将自动检测（无需手动填写）
  serverURLs:
  # 评论框背景图片
  bg:
  # 使用 Valine 的访客计数作为页面的访客量
  visitor: false
  # 其他可选配置
  option:

# Waline 评论插件配置，一个简单的评论系统，基于 Valine 开发，支持后端
# 官方文档：https://waline.js.org/
waline:
  # 服务器 URL
  serverURL:
  # 评论框背景图片
  bg:
  # 使用 Waline 的访客计数作为页面的访客量
  pageview: false
  # 其他可选配置
  option:

# Utterances 评论插件配置
# 官方文档：https://utteranc.es/
utterances:
  # 存储评论的 GitHub 仓库
  repo:
  # 问题映射方式，可选值：pathname/url/title/og:title
  issue_term: pathname
  # 浅色主题，可选值：github-light
  light_theme: github-light
  # 深色主题，可选值：photon-dark
  dark_theme: photon-dark

# Facebook 评论插件配置
# 官方文档：https://developers.facebook.com/docs/plugins/comments/
facebook_comments:
  # 应用 ID
  app_id:
  # 用户 ID，可选
  user_id:
  # 每页显示评论数
  pageSize: 10
  # 评论排序方式，可选值：social / time / reverse_time
  order_by: social
  # 语言设置
  lang: zh_TW

# Twikoo 评论插件配置
# 官方文档：https://github.com/imaegoo/twikoo
twikoo:
  # 环境 ID
  envId:
  # 区域
  region:
  # 使用 Twikoo 的访客计数作为页面的访客量
  visitor: false
  # 其他可选配置
  option:

# Giscus 评论插件配置
# 官方文档：https://giscus.app/
giscus:
  # 仓库地址
  repo:
  # 仓库 ID
  repo_id:
  # 分类 ID
  category_id:
  # 主题配置，light 为浅色主题，dark 为深色主题
  theme:
    light: light
    dark: dark
  # 其他可选配置
  option:

# Remark42 评论插件配置
# 官方文档：https://remark42.com/docs/configuration/frontend/
remark42:
  # 服务器地址
  host:
  # 站点 ID
  siteId:
  # 其他可选配置
  option:

# Artalk 评论插件配置
# 官方文档：https://artalk.js.org/guide/frontend/config.html
artalk:
  # 服务器地址
  server:
  # 站点名
  site:
  # 使用 Artalk 的访客计数作为页面的访客量
  visitor: false
  # 其他可选配置
  option:

# --------------------------------------
# 聊天服务配置
# --------------------------------------

chat:
  # 聊天服务类型，可选值：chatra/tidio/crisp，如果不需要聊天功能则留空
  use:
  # 推荐使用聊天按钮，会在网站右下角创建一个按钮，并隐藏原始按钮
  rightside_button: false
  # 原始聊天按钮在向上滚动时显示，向下滚动时隐藏
  button_hide_show: false

# Chatra 聊天服务配置
# 官方网站：https://chatra.io/
chatra:
  # Chatra 服务 ID
  id:

# Tidio 聊天服务配置
# 官方网站：https://www.tidio.com/
tidio:
  # Tidio 公钥
  public_key:

# Crisp 聊天服务配置
# 官方网站：https://crisp.chat/en/
crisp:
  # Crisp 网站 ID
  website_id:

# --------------------------------------
# 分析服务配置
# --------------------------------------

# 百度统计配置
# 官方网站：https://tongji.baidu.com/web/welcome/login
baidu_analytics:

# 谷歌分析配置
# 官方网站：https://analytics.google.com/analytics/web/
google_analytics:

# Cloudflare 分析配置
# 官方网站：https://www.cloudflare.com/zh-tw/web-analytics/
cloudflare_analytics:

# Microsoft Clarity 分析配置
# 官方网站：https://clarity.microsoft.com/
microsoft_clarity:

# https://umami.is/
umami_analytics:
  enable: false
  # 给自託管的 Umami 实例配置主机名
  serverURL:
  website_id:
  option:
  UV_PV:
    site_uv: false
    site_pv: false
    page_pv: false
    # Umami Cloud (API key) / self-hosted Umami (token)
    token:

# https://www.googletagmanager.com/
google_tag_manager:
  tag_id:
  # 可选配置
  domain:

# --------------------------------------
# 广告配置
# --------------------------------------

# Google Adsense 广告配置
google_adsense:
  # 是否启用
  enable: false
  # 是否自动投放广告
  auto_ads: true
  # 广告脚本 URL
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  # 客户 ID
  client:
  # 是否启用页面级广告
  enable_page_level_ads: true

# 手动插入广告配置，如果不需要广告则留空
ad:
  # 在首页每三个帖子后插入广告
  index:
  # 在侧边栏插入广告
  aside:
  # 在文章分页前插入广告
  post:

# --------------------------------------
# 站点验证配置
# --------------------------------------

site_verification:
  # 示例：
  # - name: google-site-verification
  #   content: xxxxxx
  # - name: baidu-site-verification
  #   content: xxxxxxx

# --------------------------------------
# 美化 / 效果
# --------------------------------------

# 主题颜色自定义
# 注意：颜色值必须用双引号，如 "#000"，否则可能会导致错误！

# 主题颜色配置
# theme_color:
#   是否启用主题颜色
#   enable: true
#   主颜色
#   main: "#49B1F5"
#   分页器颜色
#   paginator: "#00c4b6"
#   按钮悬停颜色
#   button_hover: "#FF7242"
#   文本选择颜色
#   text_selection: "#00c4b6"
#   链接颜色
#   link_color: "#99a9bf"
#   元数据颜色
#   meta_color: "#858585"
#   水平线颜色
#   hr_color: "#A4D8FA"
#   代码前景色
#   code_foreground: "#F47466"
#   代码背景色
#   code_background: "rgba(27, 31, 35, .05)"
#   目录颜色
#   toc_color: "#00c4b6"
#   引用块填充颜色
#   blockquote_padding_color: "#49b1f5"
#   引用块背景颜色
#   blockquote_background_color: "#49b1f5"
#   滚动条颜色
#   scrollbar_color: "#49b1f5"
#   浅色模式下的主题颜色
#   meta_theme_color_light: "ffffff"
#   深色模式下的主题颜色
#   meta_theme_color_dark: "#0d0d0d"

# 分类和标签页面的用户界面设置
# 选择：index - 与主页 UI 相同 / default - 与归档 UI 相同
# 留空或设置为 index
category_ui:
tag_ui:

# 拉伸行使每行宽度相等
text_align_justify: false

# 为页眉和页脚添加遮罩
mask:
  header: true
  footer: true
  
# 加载动画
preloader:
  # 是否启用加载动画
  enable: false
  # 资源
  # 1. 全屏加载
  # 2. 进度条
  source: 1
  # pace 主题 (参见 https://codebyzach.github.io/pace/)
  pace_css_url:

# 页面过渡效果
enter_transitions: true

# 默认显示模式 - light (默认) / dark
display_mode: light

# 美化文章内容的配置
beautify:
  # 是否启用美化
  enable: false
  # 指定美化的范围 (site 或 post)
  field: post
  # 指定标题前缀图标，如 '\f0c1'
  title-prefix-icon:
  # 指定标题前缀图标的颜色，如 '#F47466'
  title-prefix-icon-color:

# 全局字体设置
# 除非您知道它们的工作原理，否则不要修改以下设置
font:
  global-font-size:
  code-font-size:
  font-family:
  code-font-family:

# 网站标题和副标题的字体设置
blog_title_font:
  font_link:
  font-family:

# 分隔符图标的设置
hr_icon:
  # 是否启用分隔符图标
  enable: true
  # Font Awesome 图标的 unicode 值，如 '\3423'
  icon:
  icon-top:

# 打字机效果
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  # 是否启用打字机效果
  enable: false
  # 是否启用彩色效果
  colorful: true
  # 是否启用震动效果
  shake: true
  # 是否在移动设备上启用
  mobile: false

# 打字机效果
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  # 是否启用打字机效果
  enable: false
  # 是否启用彩色效果
  colorful: true
  # 是否启用震动效果
  shake: true
  # 是否在移动设备上启用
  mobile: false

# 背景效果
# --------------------------------------

# canvas_ribbon
# 参见: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  # 是否启用 canvas_ribbon
  enable: false
  # ribbon 的大小
  size: 150
  # ribbon 的不透明度 (0 ~ 1)
  alpha: 0.6
  zIndex: -1
  # 是否点击更改颜色
  click_to_change: false
  # 是否在移动设备上启用
  mobile: false

# Fluttering Ribbon
canvas_fluttering_ribbon:
  # 是否启用 Fluttering Ribbon
  enable: false
  # 是否在移动设备上启用
  mobile: false

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  # 是否启用 canvas_nest
  enable: false
  # 线条颜色，默认: '0,0,0'; RGB 值: (R,G,B).(注意: 使用 ',' 分隔.)
  color: '0,0,255'
  # 线条的不透明度 (0~1)
  opacity: 0.7
  # 背景的 z-index 属性
  zIndex: -1
  # 线条数量
  count: 99
  # 是否在移动设备上启用
  mobile: false

# 鼠标点击效果: 烟花
fireworks:
  # 是否启用烟花效果
  enable: false
  zIndex: 9999
  # 是否在移动设备上启用
  mobile: false

# 鼠标点击效果: 心形符号
click_heart:
  # 是否启用心形符号效果
  enable: false
  # 是否在移动设备上启用
  mobile: false

# 鼠标点击效果: 文字
clickShowText:
  # 是否启用文字效果
  enable: false
  text:
    # - I
    # - LOVE
    # - YOU
  fontSize: 15px
  # 是否随机显示文字
  random: false
  # 是否在移动设备上启用
  mobile: false

# --------------------------------------
# 灯箱设置
# --------------------------------------

# 选择: fancybox / medium_zoom
# https://github.com/francoischalifour/medium-zoom
# https://fancyapps.com/fancybox/
# 如果不需要灯箱效果，请留空
lightbox:

# --------------------------------------
# 标签外挂设置
# --------------------------------------

# 系列
series:
  # 是否启用系列
  enable: false
  # 按标题或日期排序
  orderBy: 'title'
  # 排序方式。1, asc 为升序; -1, desc 为降序
  order: 1
  # 是否显示编号
  number: true

# ABCJS - ABC 音乐符号插件
# https://github.com/paulrosen/abcjs
abcjs:
  # 是否启用 ABCJS
  enable: false
  # 是否每页启用
  per_page: true

# Mermaid
# https://github.com/mermaid-js/mermaid
mermaid:
  # 是否启用 Mermaid
  enable: false
  # 使用代码块编写 Mermaid 图表
  code_write: false
  # 内置主题: default / forest / dark / neutral
  theme:
    light: default
    dark: dark

# chartjs
# 参见 https://www.chartjs.org/docs/latest/
chartjs:
  enable: false
  # 除非你瞭解它们的工作原理，否则不要修改。
  # 默认设置仅在未指定 MD 语法时使用。
  # 图表的字体颜色
  fontColor:
    light: "rgba(0, 0, 0, 0.8)"
    dark: "rgba(255, 255, 255, 0.8)"
  # 图表的边框颜色
  borderColor:
    light: "rgba(0, 0, 0, 0.1)"
    dark: "rgba(255, 255, 255, 0.2)"
  # 雷达图和极区图的刻度标签背景颜色
  scale_ticks_backdropColor:
    light: "transparent"
    dark: "transparent"

# Note - Bootstrap 提示框
note:
  # Note 标签样式值:
  #  - simple    bs-callout 旧警告样式。默认。
  #  - modern    bs-callout 新 (v2-v3) 警告样式。
  #  - flat      扁平提示框样式，带背景，如 Mozilla 或 StackOverflow。
  #  - disabled  禁用所有 Note 标签的 CSS 样式。
  style: flat
  # 是否显示图标
  icons: true
  # 边框半径
  border_radius: 3
  # 背景颜色偏移百分比 (modern: -12 | 12; flat: -18 | 6)。
  # 也应用于标签变量。此选项可与禁用的 Note 标签一起使用。
  light_bg_offset: 0

# --------------------------------------
# 其他设置
# --------------------------------------

# https://github.com/MoOx/pjax
pjax:
  # 是否启用 pjax
  enable: false
  # 排除指定页面不使用 pjax，如 '/music/'
  exclude:
    # - /xxxxxx/

# 注入 CSS 和脚本 (aplayer/meting)
aplayerInject:
  # 是否启用注入
  enable: false
  # 是否每页启用
  per_page: true

# Snackbar - Toast 通知
# https://github.com/polonel/SnackBar
# 位置: top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  # 是否启用 Snackbar
  enable: false
  # 通知位置
  position: bottom-left
  # 浅色模式和深色模式下的通知背景颜色
  bg_light: '#49b1f5'
  bg_dark: '#1f1f1f'

# Instant.page
# https://instant.page/
instantpage: false

# Lazyload
# https://github.com/verlok/vanilla-lazyload
lazyload:
  # 是否启用 Lazyload
  enable: false
  # 使用浏览器的原生 lazyload 而不是 vanilla-lazyload
  native: false
  # 指定使用 Lazyload 的范围 (site 或 post)
  field: site
  placeholder:
  blur: false

# PWA
# 参见 https://github.com/JLHwung/hexo-offline
# ---------------
pwa:
  # 是否启用 PWA
  enable: false
  # PWA manifest 文件路径
  manifest:
  # Apple Touch 图标路径
  apple_touch_icon:
  # 32x32 像素的 favicon 图标路径
  favicon_32_32:
  # 16x16 像素的 favicon 图标路径
  favicon_16_16:
  # mask 图标路径
  mask_icon:

# Open graph meta tags
# 参见 https://hexo.io/docs/helpers#open-graph
Open_Graph_meta:
  # 是否启用 Open Graph meta 标签
  enable: true
  option:
    # twitter_card:
    # twitter_image:
    # twitter_id:
    # twitter_site:
    # google_plus:
    # fb_admins:
    # fb_app_id:

# 结构化数据
# https://developers.google.com/search/docs/guides/intro-structured-data
structured_data: true

# 添加供应商前缀以确保兼容性
# 是否启用 CSS 前缀
css_prefix: true

# Inject
# 插入代码到 head（在 '</head>' 标签之前）和底部（在 '</body>' 标签之前）
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>

# CDN 设置
# 除非你知道它们的工作原理，否则不要修改以下设置
CDN:
  # 内部和第三方脚本的 CDN 提供商
  # 两者的选项：local/jsdelivr/unpkg/cdnjs/custom
  # 注意： Dev 版本只能使用 'local' 作为内部脚本
  # 注意：将第三方脚本设置为 'local' 时，需要安装 hexo-butterfly-extjs
  internal_provider: local
  third_party_provider: jsdelivr

  # 是否在 URL 中添加版本号，true 或 false
  version: false

  # 自定义格式
  # 例如：https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
  custom_format:

  option:
    ......

安装所需插件：

1 2	npm install hexo-wordcount --save npm install hexo-generator-search --save

在 _config.yml 末尾添加：

search:
  path: search.json
  field: post
  format: html
  content: true

6.6 语言

修改 Hexo 的配置文件 _config.yml：

1	language: zh-CN

6.7 网站资料

Hexo 文章链接默认的生成规则是：:year/:month/:day/:title，是按照年、月、日、标题来生成的。生成的链接非常长，如果标题中含中文的话，复制 URL 链接会转一大串编码字符。

安装 abbrlink 插件：

1	npm install hexo-abbrlink --save

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改 Hexo 的 _config.yml：

# Site
title: 'Yongz丶'
subtitle: ''
description: '欲买桂花同载酒，终不似，少年游。'
keywords: Blog
author: 'Yongz丶'
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://yongz.fun/
permalink: posts/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

这里将页面都添加了 .html 的后缀，用来伪装成静态页面（虽说 Hexo 的页面本身就是静态页面），这样可以直接从路径就知道这是个静态页面，方便 SEO。

7 插件推荐

上述过程中已经安装的插件：

hexo-deployer-git
hexo-wordcount
hexo-generator-search
hexo-abbrlink

还可以安装一下插件：

1	npm install hexo-pangu

在 _config.yml 添加在末尾：

1
2
3

pangu:
  enable: true
  field: site # site/post