Hexo

前言

参考方向 原帖地址
Jerry - Butterfly 主题配置 https://butterfly.js.org/posts/4aa8abbe/

Github

Github是一个面向开源及私有软件项目托管平台，因为之支持Git作为唯一的版本库格式进行托管，故名Github。

Github Pages

Github Pages 是在 github 上的静态网页托管平台，使用 Github Pages 可以为你提供一个免费的服务器，免去了自己搭建服务器和写数据库的麻烦。

Hexo

Hexo 是一个快速、简洁且高效的博客框架，Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用指定的主题生成静态网页。

node.js

安装node.js

Node.js 官网

选择对应的版本下载

1

一直下一步就好了

Git

安装Git

Git 官网

下载好自己对应的版本后一直下一步就好了

安装成功后右键菜单会出现选项

2

检验软件是否安装成功

同时按下 Win 和 R打开运行，输入 cmd，然后输入以下命令，有相应版本信息显示则安装成功，若不正确可以卸载软件重新安装。

1
2
3
git --version
node -v
npm -v

3

npm 源

1
2
3
4
5
#淘宝镜像源 
npm config set registry https://registry.npm.taobao.org

#默认源
npm config set registry https://registry.npmjs.org/

Hexo 安装

安装 Hexo 脚手架

新建一个文件夹，起一个好记的名字（以下简称[Blogroot]），在文件夹下右键菜单点击Git shell Here，输入以下命令安装 hexo 的脚手架（第一次可能会比较久）

1
npm install hexo-cli -g

4

初始化 Hexo

1
2
hexo init
npm install hexo-deployer-git --save

如果出错了就再试一次

Hexo 安装完成后，将会在指定文件夹中新建所需要的文件，Hexo 文件夹下的目录如下：

6

本地查看

1
2
3
4
hexo generate
hexo server

//按下ctrl + C来关闭进程

执行完即可打开 http://localhost:4000/ 查看效果

image-20221128151017830

将博客部署到 Github Pages

到目前为止，我们的本地博客就成功搭建了，但是现在我们只能通过本地连接查看（当然也可以通过公网访问）。我们要做的是让其他人也能够访问我们的博客，这就需要我们将博客部署到 Github Pages 上。

前置步骤

一、注册 Github 账户：访问 Github 官网，点击 Sign Up 注册账户

二、创建项目代码库：点击 New repository 开始创建

7

8

三、配置 SSH 密钥：只有配置好 SSH 密钥后，我们才可以通过 git 操作实现本地代码库与 Github 代码库同步。在[Blogroot]内打开终端(Git shell Here)，输入以下命令：

1
2
ssh-keygen -t rsa -C "你的邮箱"
//引号里面填写你的邮箱地址，比如12345678@qq.com

基本上一路回车就好了

接下来屏幕会显示：

1
2
3
4
5
6
Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
这里是各种字母数字组成的字符串，结尾是你的邮箱
The key's randomart image is:
这里也是各种字母数字符号组成的字符串

运行以下命令，将公钥的内容复制到系统粘贴板上

1
clip < ~/.ssh/id_rsa.pub

四、在 GitHub 账户中添加你的公钥

1.登陆 GitHub，进入 Settings：

9

2.点击 SSH and GPG Keys，选择New SSH key

10

3.粘贴密钥：

11

五、配置 Git 个人信息

Git 会根据用户的名字和邮箱来记录提交，GitHub 也是用这些信息来做权限的处理，输入以下命令进行个人信息的设置，把名称和邮箱替换成你自己的，名字可以不是 GitHub 的昵称，但为了方便记忆，建议与 GitHub 一致

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

到此为止 SSH Key 配置成功，本机已成功连接到 Github

将本地的Hexo文件更新到Github的库中

一、登录 Github 打开自己的项目（你的用户名.github.io）

12

二、复制 SSH

13

三、右键用记事本（或者其他编辑器）打开 [Blogroot]/_config.yml

14

四、滑到最下面,按下图修改 _config.yml 文件并保存

15

五、执行以下命令，把博客部署到 Github 上

1
2
3
4
5
6
7
8
hexo cl //清除缓存
hexo g  //生成静态文件
hexo d  //部署到服务端

//或者直接执行:
hexo cl && hexo g && hexo d

//此外 "hexo s" 是本地运行

执行完之后会让你输入你的 Github 的账号和密码，如果此时报错(ERROR Deployer not found: git)，说明你的 deployer 没有安装成功

需要执行以下命令再安装一次：

1
npm install hexo-deployer-git --save

再执行

1
hexo cl && hexo g && hexo d

你的博客就会部署到 Github 上了

访问：https://你的用户名.github.io 比如（https://daiyu-233.github.io/）
以后每个人都可以通过此链接访问你的博客了

切换Butterfly主题

安装Butterfly主题

在[Blogroot]运行以下命令

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

新建配置文件

新建[Blogroot]/_config.butterfly.yml，复制[Blogroot]/themes/butterfly/_config.yml的内容，粘贴到[Blogroot]/_config.butterfly.yml，这样两个文件的内容就一样了。
（如果同时存在[Blogroot]/themes/butterfly/_config.yml和[Blogroot]/_config.butterfly.yml，Hexo会优先使用[Blogroot]/_config.butterfly.yml）

25

应用主题

修改 [Blogroot]/_config.yml，把主题改为butterfly（大概在第100行）

1
theme: butterfly

Github Action 自动部署

Github Action 简介

Github Action 是 GitHub 于 2018 年 10 月推出的一个 CI\CD 服务。

每次部署 Hexo 都需要运行指令三件套，随着文章越来越多，编译的时间也随之越来越长，通过 Github Action，我们只需要在每次完成博客的编写或修改以后，将改动直接 push 到远程仓库，之后的编译部署的工作统统交给 CI 来完成即可。

Github Action 使用教程

Github->头像（右上角）->Settings->Developer Settings->Personal access tokens->tokens (classic)->generate new token，然后输入你的账号密码。

16

创建的 Token 名称随意，但必须勾选 repo 项 和 workflows 项。

18

token 只会显示这一次，之后将无法查看，所以务必保证你已经记录下了 Token。之后如果忘记了就只能重新生成重新配置。

创建源码私有仓库

19

这里之所以是私有仓库，是因为在接下来的配置中会用到 Token，如果 Token 被盗用，别人可以肆意操作你的 github 仓库内容，为了避免这一风险，才选择的博客源码闭源。

创建完成后，需要把博客的源码 push 到这里。首先获取远程仓库地址，此处 SSH 和 HTTPS 都可以。前面我们绑定了ssh key，SSH 在绑定过 ssh key 的设备上无需再输入密码，HTTPS 则需要输入密码，但是 SSH 偶尔会遇到端口占用的情况，请自主选择。

20

  1. 新建[Blogroot(博客根目录)]/.github/workflows/autodeploy.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
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
name: 自动部署
on:
  push:
    branches:
      - main
  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v2
        with:
          ref: main

      - name: 安装 Node
        uses: actions/setup-node@v1
        with:
          node-version: "16.x"

      - name: 安装 Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g

     - name: 缓存 Hexo
        id: cache-npm
        uses: actions/cache@v3
        env:
          cache-name: cache-node-modules
        with:
          path: node_modules
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      - name: 安装依赖
        if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
        run: |
          npm install gulp-cli -g #全局安装gulp
          npm install --save

      - name: 生成静态文件
        run: |
          hexo clean
          hexo generate
          gulp

      - name: 部署到Github
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          token: #token(刚刚复制到的token)
          repository-name: #仓库名称(用来部署Github Pages的仓库的路径，如：'DaiYu-233/DaiYu-233.github.io')
          branch: main
          folder: public
          commit-message: "${{ github.event.head_commit.message }} Updated By Github Actions"

把以上的token和repository-name改为你的token和仓库名称

可以直接在仓库中复制：

22

这里跪求大家点个starヾ(•ω•`)o

设置远程仓库和分支

1.先把[Blogroot]/themes/butterfly/.git（这是一个隐藏文件夹）删除或者移动到非博客文件夹目录下,原因是主题文件夹下的.git文件夹的存在会导致其被识别成子项目，从而无法被上传到源码仓库。

2.在[Blogroot]运行指令

1
2
3
4
git init #初始化
git remote add origin [刚刚新建的“hexo”仓库的ssh] #如：我的ssh是“git@github.com:DaiYu-1/DaiYu-1.github.io.git”，那么完整代码就是“git remote add origin git@github.com:DaiYu-1/DaiYu-1.github.io.git”
git checkout -b main ## 切换到main分支

3.添加屏蔽项

打开[Blogroot]/.gitignore，替换以下内容：

1
2
3
4
5
6
7
8
9
10
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/butterfly/.git

4.再运行 git 提交指令，将博客源码提交到 github 上。

1
2
3
git add .
git commit -m "github action update"
git push origin main

查看部署情况

此时，打开 GIthub 存放源码的私有仓库，找到 action。

23

等待转圈变成绿色对勾表示部署成功
红色叉叉则表示报错了

此时你就可以体验到 vs code 源代码管理的快感了

24

Butterfly

网站资料

修改[Blogroot]/_config.yml

26

导航菜单

修改[Blogroot]/_config.butterfly.yml

1
2
3
4
5
6
7
8
9
Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

||前面是跳转链接,后面是图标，如果不希望显示图标，图标名可不写。
在移动端等界面默认子目录是展开的，如果你想要隐藏，在子目录里添加 hide ，如：

1
2
3
List||fas fa-list||hide:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video

注意： 导航的文字、链接、图标都可自行更改，如：

1
2
3
4
5
6
7
8
9
10
11
menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  清单||fa fa-heartbeat:
    音乐: /music/ || fas fa-music
    照片: /Gallery/ || fas fa-images
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

27

文章链接转义字母数字

参考: https://github.com/rozbo/hexo-abbrlink

安装插件：

1
npm install hexo-abbrlink --save

修改_config.yml 

1
2
3
4
5
6
    ## URL
    ### Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
    url: http://example.com
-   permalink: :year/:month/:day/:title/
+   permalink: posts/:abbrlink.html
    permalink_defaults:

在_config.yml插入：

1
2
3
4
## abbrlink config
abbrlink:
  alg: crc32      #support crc16(default) and crc32
  rep: hex        #support dec(default) and hex

本地搜索依赖

参考：https://github.com/wzpan/hexo-generator-search

1
npm install hexo-generator-search --save

在_config.yml插入：

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

修改_config.butterfly.yml

1
2
3
4
5
6
## Local search
local_search:
-  enable: false
+  enable: true
   preload: false  //预加载需要的改成true
  CDN:

28

社交图标

修改_config.butterfly.yml

1
2
3
social:
  fab fa-github: https://github.com/xxxxx || Github
  fas fa-envelope: mailto:xxxxxx@gmail.com || Email

格式： 图标名：url || 描述性文字

2930

代码框

修改_config.butterfly.yml

代码高亮主题

utterfly 支持6种代码高亮样式：

1
highlight_theme: light

代码复制

1
highlight_copy: true

31

代码框展开/关闭

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击>可展开代码

  • true 全部代码框不展开，需点击>打开
  • false 代码框展开，有>点击按钮
  • none 不显示>按钮
1
highlight_shrink: true #代码框不展开，需点击 '>' 打开

代码换行

在默认情况下，Hexo 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。

1
code_word_wrap: true

右下角按钮

修改_config.butterfly.yml

简繁转换

简体繁体互换

1
2
3
4
5
6
7
8
9
10
11
12
translate:
  enable: true
  ## 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  default: 简
  #网站默认语言，1: 繁体中文, 2: 简体中文
  defaultEncoding: 1
  #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  #当文字是简体时，按钮显示的文字
  msgToTraditionalChinese: "繁"
  #当文字是繁体时，按钮显示的文字
  msgToSimplifiedChinese: "简"

简体：https://fastly.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-simp.png

繁体：https://fastly.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-tranditional.png

夜间模式

1
2
3
4
5
6
## dark mode
darkmode:
  enable: true
  ## dark mode和 light mode切换按钮
  button: true
  autoChangeMode: false

阅读模式

阅读模式下会去掉除文章外的内容，避免干扰阅读。

1
readmode: true

社交图标

书写格式 图标名：url || 描述性文字

1
2
3
social:
  fab fa-github: https://github.com/xxxxx || Github
  fas fa-envelope: mailto:xxxxxx@gmail.com || Email

PC：https://pic.daiyu.fun/pic/2022/12%E7%A4%BE%E4%BA%A4%E5%9B%BE%E6%A0%87-PC.png

移动：https://pic.daiyu.fun/pic/2022/12%E7%A4%BE%E4%BA%A4%E5%9B%BE%E6%A0%87-%E7%A7%BB%E5%8A%A8.png

文章相关

文章相关

新建文章

执行以下命令：

1
hexo n "文章标题"

或者在[Blogroot]/source/_posts新建.md文件，但是以这种方式新建的文章不会自带文章信息：

1
2
3
4
---
title: Hexo+Butterfly 搭建个人博客 #标题
date: 2022-11-28 12:43:31 #日期
---

md 全称 Markdown，纯文本格式的语法，非常的简单实用。(markdown语法)
.md 文件可以使用支持 Markdown 语法的编辑器编辑 （当然用Windows自带的记事本也没人管你）

主页文章描述

在文章头部信息添加：

1
description: #描述

顶部图

在文章头部信息添加：

1
top_img: #true/false

当设置 top_img 为 false 时：https://pic.daiyu.fun/pic/2022/12202212181721556.png

文章置顶

在文章头部信息添加：

1
sticky: 1 #数值越大，置顶的优先级越大。

文章封面

在文章头部信息添加：

1
cover:

当配置多张图片时,会随机选择一张作为cover.此时写法应为:

1
2
3
4
default_cover:
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

文章meta显示

修改_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
  page:
    date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 主页是否显示分类
    tags: true # true or false 主页是否显示标签
    label: true # true or false 显示描述性文字
  post:
    date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 文章页是否显示分类
    tags: true # true or false 文章页是否显示标签
    label: true # true or false 显示描述性文字

美化/特效

美化/特效

主题色

修改_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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"

颜色值必须被双引号包裹，就像"#000"而不是#000。

背景

修改_config.butterfly.yml

1
2
3
4
# 图片格式 url(http://xxxxxx.com/xxx.jpg)
# 颜色（HEX值/RGB值/顔色单词/渐变色)
# 留空 不显示背景
background:
1
2
# footer是否显示图片背景(与top_img一致)
footer_bg: true

鼠标点击效果

修改_config.butterfly.yml

1
2
3
4
fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false
1
2
3
4
# 点击出现爱心
click_heart:
  enable: true
  mobile: false
1
2
3
4
5
6
7
8
9
10
# 点击出现文字，文字可自行修改
ClickShowText:
  enable: false
  text:
    - I
    - LOVE
    - YOU
  fontSize: 15px
  random: false # 文字随机显示
  mobile: false