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

检验软件是否安装成功

同时按下 WinR打开运行,输入 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"

把以上的tokenrepository-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: "简"

夜间模式

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

文章相关

文章相关

新建文章

执行以下命令:

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-233.top/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