搭建步骤

一、框架的选择

我选择hexo + butterfully进行搭建，使用Centos7.9操作系统

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。大家可以进入hexo官网(https://hexo.io/zh-cn/)进行详细查看

二、步骤概览

1.Hexo的搭建

（官方教程：https://hexo.io/zh-cn/docs/github-pages.html 可以参考一下，或者跟着下面的步骤一步步来）

Centos 7.9的获取
安装Git
安装Node.js
安装Hexo
初始化Hexo
GitHub创建个人仓库
生成SSH添加到GitHub
将hexo部署到GitHub
设置个人域名（可选，可跳过）

2.butterfly的安装和配置

1、安装butterfly主题
2、设置博客个人资料
3、导航菜单
4、代码块显示设置
5、本地搜索功能
6、创建文件夹
7、修改副标题
8、图片设置
9、图片懒加载
10、图片大图查看
11、版权样式
12、相关文章
13、打赏
14、侧边栏样式
15、公告栏设置
16、Toc目录
17、背景特效/美化
鼠标点击的效果
打字效果
背景特效
自定义背景主题色
渐变背景

18、字数统计
19、文章分享功能

三、开始搭建Hexo

1.Centos 7.9的获取

我使用的VMware虚拟机软件装linux系统，VMWare的安装不再赘述，哔哩哔哩上面一搜就有

打开阿里巴巴镜像站（https://developer.aliyun.com/mirror/），选择Centos

选择7.9.2009，进入一个有很多目录的界面，找到一个叫isos的文件夹，点开

点击x86_64 进去之后选择 CentOS-7-x86_64-DVD-2009.iso 下载，安装到虚拟机上，自行配置

2.安装Git

Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理你的hexo博客文章，上传文件到GitHub的工具。

最早的git就是在linux上编写的，所以只需要一行代码

sudo apt-get install git

安装好后，用git –version 来查看一下版本

注意：如果提示 -bash:apt:未找到命令

需要手动安装apt软件包管理器

1 2	sudo apt-get update sudo apt-get install apt

然后切换国内镜像源

1 2	sudo sed -i 's/archive.ubuntu.com/mirrors.163.com/g' /etc/apt/sources.list sudo apt-get update

以上命令将Ubuntu系统的软件源由默认的archive.ubuntu.com修改为mirrors.163.com，从而提高了下载速度

想用清华镜像的，第一个指令可以换成

1	sudo sed -i 's/archive.ubuntu.com/mirrors.tuna.tsinghua.edu.cn/g' /etc/apt/sources.list

如果你使用的是RedHat、CentOS或Fedora等系统，还可以使用yum命令替代apt命令

格式为 :

yum install git

3.安装nodejs

Hexo是基于nodeJS编写的，所以需要安装一下nodeJs和里面的npm工具。

linux：

sudo apt-get install nodejs
sudo apt-get install npm

注：如果报错说没有apt，可以考虑换用yum指令，格式如下：

yum install nodejs

安装完后，打开命令行

node -v
npm -v

检查一下有没有安装成功

4.安装hexo

前面git和nodejs安装好后，就可以安装hexo了，你可以先创建一个文件夹blog，然后cd到这个文件夹下（或者在这个文件夹下直接右键-在终端打开）。

输入命令

npm install -g hexo-cli

依旧用hexo -v查看一下版本

至此就全部安装完了。

注意：如果出现idealTree:lib: sill idealTree buildDeps报错

是因为node的默认安装环境是在国外

1、采用镜像安装，npm config set registry https://registry.npm.taobao.org

（这个镜像链接也可以换成其他厂家的，前提条件是你会找、会用，不会的话还是用这个吧）

2、查看镜像是否安装，npm config get registry

5.初始化hexo

hexo init myblog

这个myblog可以换成其他名字，然后

cd myblog

npm install

新建完成后，指定文件夹目录下有：

node_modules: 依赖包
public：存放生成的页面
scaffolds：生成文章的一些模板
source：用来存放你的文章
themes：主题
** _config.yml: 博客的配置文件**

hexo generate
hexo server

打开hexo的服务，在浏览器输入localhost:4000就可以看到你生成的博客了。

使用ctrl+c可以把服务关掉。

6.GitHub创建个人仓库

打开GitHub，如果加载缓慢的话可以加速一下，或者去下载一个名为fastgithub的小工具（去Gitee应该就有）

注册完登录后，在GitHub.com中看到一个New repository（新建仓库）

创建一个仓库，在Repository name那一栏输入仓库名字，名字叫你的用户名.github.io（自己把中文替换成你github的用户名，你的用户名是点右上角你的头像，弹出的窗口最上边那个黑色的名字）

下面的东西都不用调，Add.gitignore和Choose a license都用默认的None就行了

点击create repository。

7.生成SSH添加到GitHub

回到终端

git config –global user.name “yourname”
git config –global user.email “youremail”

这里的yourname换成你的GitHub用户名，youremail换成你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

可以用以下两条，检查一下你有没有输对

git config user.name
git config user.email

然后创建SSH,一路回车

ssh-keygen -t rsa -C “youremail”

这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。

ssh，简单来讲，就是一个秘钥，其中，id_rsa是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。

而后在GitHub的setting（设置）中，找到SSH keys的设置选项，点击New SSH key
把你的id_rsa.pub里面的信息复制进去。

在终端中，查看是否成功

ssh -T git@github.com

注意：如果出现以下报错ssh: connect to host github.com port 22: Connection refused

这个错误提示的是连接github.com的22端口被拒绝了。

解决方法一：（实测这个方法可以，不行的话看看我搜到的第二个解决方案，那个方案我没试，因为第一个方法就解决了）

原理：修改访问时要走的端口号

第一次遇到这个报错时，.ssh文件夹里可能是没有config文件的，可以直接在该文件夹下新建config.txt文件，将下面的命令直接粘贴进去,保存退出后，把此文件的.txt后缀删除（重命名）

Host github.com
Hostname ssh.github.com
Port 443修改完成后，在Git Bash 里输入：ssh -T git@github.com 来测试是否能连接上（切记一切配置改完先测试，避免无用浪费）

如果回车后出现以下回复：

它翻译过来意思是：

无法确定主机“[ssh.github.com]：443 （[20.205.243.160]：443）”的真实性。
ED25519 密钥指纹是 SHA256：巴拉巴拉巴拉阿巴阿巴啊巴
此密钥以任何其他名称未知
是否确实要继续连接（是/否/[指纹]）？

密钥没名字是我在生成密钥时没指定名字方便gitee和GitHub公用同一个公钥，如果有人已经指定了具体名字中间的提示应该不会出现。它提示你是否继续链接时填yes回车就行，之后就会出现这样的提示：

1	Hi xxx! You've successfully authenticated, but GitHub does not provide shell access.

出现这样的提示说明连接成功了，不放心可以再用ssh -T git@github.com测试一下，还会出现上面的successfully提示。

如果改了443端口号依然走不通（ssh: connect to host github.com port 443: Connection refused），那你可能需要下面的这个方法

解决方法二：

这个方案有效的前提是：执行命令ssh -T -p 443 git@ssh.github.com后不再提示connection refused，所以要尝试这个方案的小伙伴先执行这条命令测试下
使用https协议，不要使用ssh协议

在你的GitHub的本地repo目录，执行如下命令：

$ git config –local -e

然后把里面的url配置项从git格式

url = git@github.com:username/repo.git

修改为https格式

url = https://github.com/username/repo.git

这个其实修改的是repo根目录下的./git/config文件。

8.将hexo部署到GitHub

这一步，我们就可以将hexo和GitHub关联起来，也就是将hexo生成的文章部署到GitHub上

打开站点配置文件 _config.yml，翻到最后，修改为
YourgithubName就是你的GitHub账户

deploy:
type: git
repo: https://github.com/你的github用户名/你的github用户名.github.io.git
branch: master

这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。

npm install hexo-deployer-git –save

然后

hexo clean
hexo generate
hexo deploy

其中 hexo clean清除了你之前生成的东西，也可以不加。
hexo generate 顾名思义，生成静态文章，可以用 hexo g缩写
hexo deploy 部署文章，可以用hexo d缩写

注意deploy时可能要你输入username和password。

如果出现：Branch ‘master’ set up to track……

……（不是省略号，懒得敲了）

INFO Deploy done:git

说明部署成功了过一会儿就可以在http://你的github用户名.github.io 这个网站看到你的博客了！！

注意：如果出现以下报错：

The TLS connection was non-properly

fatal: unable to access ‘https://github.com/xxxx/xxxx.github.io/‘: gnutls_handshake() failed: The TLS connection was non-properly terminated. FATAL {

err:Error：spawn failed

（后面巴拉巴拉一长串at什么什么）

出现这个问题，很大可能是因为https和http的proxy的对应的分别是https和http开proxy server，而https的proxy server可能无法正常工作。一个work around是把https的proxy server换成http的proxy server:

解决方案：

修改_config.yml文件的deploy部分，将https 修改为http url 或者设置为git url, 配置为https oauth2 加token

设置为git url(推荐)

deploy:
    type: git
    repo: git@github.com:你的github用户名/你的github用户名.github.io.git
    branch: gh-pages
    （我个人感觉branch设置成main更好，这个东西我现在还不太懂，等学了会来修改，我现在用的main）

在repo https url上要添加授权方式和token（上面那个方案我实测可行，这个没试）

deploy:
        type: git
        repo: https://oauth2:your_github_token@github.com/your_github_id/your_github_id.github.io.git
        branch: gh-pages

解决方案参考https://www.zhihu.com/question/619765036/answer/3210221015，在此向知乎作者 eagle 表示感谢）

9.设置个人域名（可选）

这一步建议根据个人情况来使用，我没有用它

现在你的个人网站的地址是 yourname.github.io，如果觉得这个网址不好听，这就需要你设置个人域名了。但是需要花钱。

注册一个阿里云账户,在阿里云上买一个域名，我买的是 fangzh.top，各个后缀的价格不太一样，比如最广泛的.com就比较贵，看个人喜好咯。

你需要先去进行实名认证,然后在域名控制台中，看到你购买的域名。

点解析进去，添加解析。

其中，192.30.252.153 和 192.30.252.154 是GitHub的服务器地址。
注意，解析线路选择默认，不要像我一样选境外。这个境外是后面来做国内外分流用的,在后面的博客中会讲到。记得现在选择默认！！

登录GitHub，进入之前创建的仓库，点击settings，设置Custom domain，输入你的域名fangzh.top

然后在你的博客文件source中创建一个名为CNAME文件，不要后缀。写上你的域名。

最后，在终端中，输入

hexo clean
hexo g
hexo d

过不了多久，再打开你的浏览器，输入你自己的域名，就可以看到搭建的网站啦！

四、安装并配置butterfly

1、安装butterfly主题

在hexo项目根目录下下载主题。

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

安装pug 和 stylus 渲染器。

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

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

升级建议

为了減少升级主题带来的不便，我们可以把主题文件夹中的 _config.yml 重命名为 _config.butterfly.yml，复制到 Hexo 根目录下与_config.yml同级。

Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml ，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。所以像和博客网址相关联的固定资料可以设置在_config.yml中，比如博客的标题、作者信息和邮箱等等资料，而和主题样式相关的配置放在 _config.butterfly.yml 中，那么在将来你想换一个主题是很方便的。

从这步往下都是一些配置，建议直接去官方网站跟着一步一步弄（https://butterfly.js.org/）

我参考的https://blog.csdn.net/mjh1667002013/article/details/129290903，侧边栏那里我加了一些东西，以防follow me出来一个奇怪的链接下面的部分仅作为我个人网站配置的备份

2、设置博客个人资料

修改根目录下的站点配置文件_config.yml，可以修改网站各种资料，例如标题、副标题和语言等个人资料。

# Site
title: nya 	#标题
subtitle: ''	#副标题
description: 日月忽其不淹兮，春与秋其代序		#个性签名
keywords:
author: naseele1	#作者
language: zh-CN	#语言
timezone: Asia/Shanghai    #中国的时区

主题支持三种语言：

default(en)
zh-CN (简体中文)
zh-TW (繁体中文)

3、导航菜单

修改主题配置文件 _config.butterfly.yml

menu:
主页: / || fas fa-home
博文 || fa fa-graduation-cap:
分类: /categories/ || fa fa-archive
标签: /tags/ || fa fa-tags
归档: /archives/ || fa fa-folder-open
生活 || fas fa-list:
分享: /shuoshuo/ || fa fa-comments-o
相册: /photos/ || fa fa-camera-retro
音乐: /music/ || fa fa-music
影视: /movies/ || fas fa-video
友链: /links/ || fa fa-link

留言板: /messageboard/ || fa fa-paper-plane

关于笔者: /about/ || fas fa-heart

（这些对应网站主页最上方的那一栏，可以根据自身需要删减）

4、代码块显示设置

在_config.butterfly.yml配置文件中可以配置如下功能。

highlight_theme: mac  #  darker / pale night / light / ocean / mac / mac light / false 代码主题
highlight_copy: true # 复制按钮
highlight_lang: false # 是否显示代码语言
highlight_shrink: false # true: 代码块默认不展开 / false: 代码块默认展开 | none: 展开并隐藏折叠按钮
highlight_height_limit: false # unit: px
code_word_wrap: true #代码自动换行，关闭滚动条

同时将站点配置文件_config.yml的highlight设置为false。

highlight:
  enable: false
  line_number: false
  auto_detect: false

效果图：

image-20230227204851337

5、本地搜索功能

安装搜索插件

npm install hexo-generator-search –save

主题配置文件 _config.butterfly.yml：

# Local search
local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

6、创建文件夹

分类

hexo new page categories

会出现source/categories/index.md文件

标签

hexo new page tags

会出现source/tags/index.md文件：

7、修改副标题

修改主题配置文件 _config.butterfly.yml:

# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (开启打字效果)
  effect: true
  # loop (循环打字)
  loop: true
  # source調用第三方服務
  # source: false 关闭調用
  # source: 1  調用搏天api的隨機語錄（簡體）
  # source: 2  調用一言網的一句話（簡體）
  # source: 3  調用一句網（簡體）
  # source: 4  調用今日詩詞（簡體）
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗号' , ',请使用转义字元 &#44;
  # 如果有英文双引号' " ',请使用转义字元 &quot;
  # 开头不允許转义字元，如需要，请把整個句子用双引号包住
  # 如果关闭打字效果，subtitle只会现示sub的第一行文字
  sub:
    - 你在抱怨什么呢
    - 为明天到来的事，说人生像是没有意义
    - 没有选择会是唯一的路
    - 这不是你自己的问题，人终归要好好去生活

8、图片设置

图片可以用云链接或者本地路径：/themes/butterfly/source/img。修改主题配置文件_config.butterfly.yml：

网站图标

1 2	# Favicon（网站图） favicon: /img/favicon.png

头像

1
2
3

avatar:
  img: /img/avatar.jpg #图片路径
  effect: false #头像会一直转圈

主页封面图片

1 2	# The banner image of home page index_img: /img/background.jpg

文章详情页的顶部图片

当没有在front-matter设置top_img和cover的情况下会显示该图

1 2	# If the banner of page not setting, it will show the top_img default_top_img: /img/default_top_img.jpg

归档页顶部图片

1
2
3

#归档子标签页图片
# The banner image of archive page
archive_img: /img/archive.jpg

tag标签页顶部图

1 2	#tag页（标签页） tag_img: /img/tag_img.jpg

category页顶部图

1 2	#category页 category_img: /img/category_img.jpg

统一文章封面

cover:
  index_enable: true #  是否展示文章封面
  aside_enable: true
  archives_enable: true
  position: both # 封面展示的位置 left/right/both
  # 当没有设置cover时，默认展示的文章封面
  default_cover:
    # 当配置多张图片时，会随机选择一张作为 cover. 此时写法为
    - https:
    - http:
    - http:
    - http:
    - http:
    - http:

如果需要为每一篇文章设置不同的封面，可以在文章的.md文件中添加配置。

---
title: Hello World        # 标题
tags: [hello]             # 标签
categories:               # 分类
description: hello word~  # 描述
top_img: /img/hello-1.png # 顶部背景图
cover: /img/hello-1.png   # 文章封面
---

错误页面

配置了该属性后会替换无法展示的图片

Replace Broken Images (替換無法顯示的圖片)

error_img:
flink: /img/friend_404.gif
post_page: /img/404.jpg

9、图片懒加载

新增hexo-lazyload-image模块

1	npm install hexo-lazyload-image --save

在主目录配置文件_config.yml增加配置

1
2
3

lazyload:
  enable: true
  loadingImg: /img/loading.gif

这个就是图片没加载出来的时候，出现一个动图转转转的文章页样式

10、图片大图查看

修改主题配置文件_config.butterfly.yml

1 2	medium_zoom: false fancybox: true

11、版权样式

修改主题配置文件_config.butterfly.yml

复制的内容后面加上版权信息

# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
  enable: true # 是否开启网站复制权限
  copyright:  # 复制的内容后面加上版权信息
    enable: false  # 是否开启复制版权信息添加
    limit_count: 50 # 字数限制，当复制文字大于这个字数限制时

文章版权信息

post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

12、相关文章

在文章最下面出现推送

# Related Articles
related_post:
  enable: true
  limit: 6 # Number of posts displayed
  date_type: created # or created or updated 文章日期顯示創建日或者更新日

13、打赏

给文章结尾设置打赏按钮，可以放上收款二维码

# Sponsor/reward
reward:
  enable: true
  QR_code:
     - img: /img/wechat.jpg
       link:
       text: 微信
     - img: /img/alipay.jpg
       link:
       text: 支付宝
       #（可根据个人需要进行增删）

14、侧边栏样式

修改主题配置文件_config.butterfly.yml

调整侧边栏出现位置

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or 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/2228966540

个人信息

social:
   fab fa-github: https://github.com/ || Github
   fa fa-book-open: https://blog.csdn.net/mjh1667002013 || CSDN
   fab fa-qq:  tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=728831102&website=www.oicqzone.com || QQ
   fas fa-envelope-open-text: mailto:1976083684@qq.com || Email

15、公告栏设置

修改主题配置文件_config.butterfly.yml

1
2
3

card_announcement:
    enable: true
    content: This is my Blog #修改公告栏信息

16、Toc目录

修改主题配置文件_config.butterfly.yml

# toc (目錄)
toc:
  post: true
  page: false
  number: false
  expand: true # 是否展开
  style_simple: false # for post
  scroll_percent: true

17、背景特效/美化

修改主题配置文件 _config.butterfly.yml

1.鼠标点击的效果

有冒光特效、烟火特效、爱心特效、文字特效，选择其中一个将enable设置为true就可以。

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: false
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖动特效)
  mobile: false

# Mouse click effects: fireworks (鼠标点击效果:萤火特效)
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999
  mobile: false

# Mouse click effects: Heart symbol (鼠标点击效果: 爱心)
click_heart:
  enable: false
  mobile: false

# Mouse click effects: words (鼠标点击效果: 文字)
ClickShowText:
  enable: true
  text:
     - 富强
     - 民主
     - 文明
     - 和谐
     - 平等
     - 公正
     - 法治
     - 爱国
     - 敬业
     - 诚信
     - 友善
  fontSize: 15px
  random: true
  mobile: true

2.打字效果

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖动特效)
  mobile: true
#(text是每次单击会顺序显示的文字，可以自由编辑)

3.背景特效

# Background effects (背景特效)
# canvas_ribbon (静止彩带)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false
# Fluttering Ribbon (动态彩带)
canvas_fluttering_ribbon:
  enable: false
  mobile: false
#星空特效
# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false

4.渐变背景

默认显示白色，可设置图片或者颜色
修改主题配置文件_config.butterfly.yml：

background:

渐变色，步骤：

1）在\Butterfly\source\css\目录下创建css文件 background.css：

#web_bg {
  background: -webkit-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -moz-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -o-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -ms-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
}

2）修改配置文件_config.butterfly.yml的引入方式

# Inject
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
     - <link rel="stylesheet" href="/css/background.css">
  bottom:
    # - <script src="xxxx"></script>

3）如果背景色不生效，设置_config.butterfly.yml

# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: '#efefef'

footer 的背景，当设置 false 时，将与主题色一致。修改主题配置文件_config.butterfly.yml

1 2	# footer是否显示图片背景(与top_img一致) footer_bg: true

18、字数统计

安装统计组件

npm install hexo-wordcount –save or yarn add hexo-wordcount

修改主题配置文件_config.butterfly.yml

# wordcount (字數統計)
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

19、文章分享功能

addThis、sharejs、addtoany三个选一个开启

addThis官网：https://www.addthis.com/

# Share System (分享功能)
# --------------------------------------

# AddThis
# https://www.addthis.com/
addThis:
  enable: false
  pubid:  #访问 AddThis 官网, 找到你的 pub-id

# Share.js
# https://github.com/overtrue/share.js
sharejs:
  enable: true  
  sites: facebook,twitter,wechat,weibo,qq  #想要显示的内容

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

五、写文章

接下来你就可以正式开始写文章了。

hexo new 你的文章标题（汉字替换成你想要的文章标题）

然后在source/_post 中打开markdown文件，就可以开始编辑了。当你写完的时候，在有 _config.yml文件的那个位置打开终端，然后逐步执行下面这三行指令

hexo clean
hexo generate
hexo deploy

稍等片刻，打开博客，就能看见新增的文章了（看不见的话多等会）

搭建步骤

一、框架的选择

二、步骤概览

1.Hexo的搭建

2.butterfly的安装和配置

三、开始搭建Hexo

1.Centos 7.9的获取

2.安装Git

3.安装nodejs

4.安装hexo

5.初始化hexo

6.GitHub创建个人仓库

7.生成SSH添加到GitHub

回到终端

注意：如果出现以下报错ssh: connect to host github.com port 22: Connection refused

8.将hexo部署到GitHub

9.设置个人域名（可选）

四、安装并配置butterfly

1、安装butterfly主题

2、设置博客个人资料

3、导航菜单

4、代码块显示设置

5、本地搜索功能

6、创建文件夹

7、修改副标题

8、图片设置

网站图标

头像

主页封面图片

文章详情页的顶部图片

归档页顶部图片

tag标签页顶部图

category页顶部图

统一文章封面

错误页面

9、图片懒加载

10、图片大图查看

11、版权样式

12、相关文章

13、打赏

14、侧边栏样式

15、公告栏设置

16、Toc目录

17、背景特效/美化

1.鼠标点击的效果

2.打字效果

3.背景特效

4.渐变背景

6.footer 背景

18、字数统计

19、文章分享功能

五、写文章