前言

• 这篇教程接上篇教程，在上篇教程的基础上在进行

• 全文根目录值安装 hexo 框架的根目录，主题目录至 安装 butterfly 主题的目录

• 配置文件指 _config 配置文件，主题配置文件指 _config.butterfly 主题配置文件

• 点击这里跳转上篇教程
  

博客关键页面生成

博客有一些关键页面需要手动生成，你需要什么页面，就用此方法生成即可

标签页

进入 Hexo 博客的根目录，执行：

hexo new page tags

打开 source/tags/index.md 文件，修改如下：

---title: 标签date: 2022-08-03 12:53:45type: "tags"---

分类页

进入 Hexo 博客的根目录，执行：

hexo new page categories

打开 source/categories/index.md 文件，修改如下：

---title: 分类date: 2022-03-11 12:56:06type: "categories"---

友情链接

创建友情链接页面

进入 Hexo 博客的根目录，执行：

hexo new page link

打开 source/link/index.md 文件，修改如下：

---title: 友情链接date: 2022-03-11 12:57:48type: "link"---

友情链接添加

在 Hexo 博客目录中的 source/friends/创建一个文件lndex.md`，一个简单的友情链接就有了

---title: friendsdate: 2022-08-03 08:18:23type: "friends"layout: "friends"---
# 友链交换想要交换友链的小伙伴，欢迎在留言板留言，留言格式：* **名称：**你的博客名称* **地址：**你的博客地址* **简介：**一句话简介* **头像：**你的头像地址
例如我的博客友链，大家可以加到自己博客里哦：* **名称：**余白* **地址：**https://heiyushaoye.github.io* **简介：**无处不在* **头像：**头像地址

• 预览效果如下，就表示成功了，然后直接跳到帮助文档的 404 页面

• 
  
  

关于我

进入 Hexo 博客的根目录，执行：

hexo new page about

打开 source/about-me/index.md 文件，修改如下：

---title: 关于作者date: 2022-03-11 13:01:21type: "about"---

• 说明：

重点：所有的文件都在 source，这个文件夹下，按照官方文档提示，修改文件即可！

• 修改完成后，通过路由本地预览一下好了没，要养成习惯，完成一步，预览一步，这一出现错误好纠正

• 路由格式：http://localhost:4000/ tags

tags 其实就是对应的你要实现功能的名称，需要预览什么 功能，就修改成对应的功能名称

404 页面添加

• 找到：node_modules——————>hexo-theme-butterfly——————>_config.yml

• 【前面操作过的可以直接打开内容即可】 将文件里面的内容全部复制，执行图下面的操作，然后将所有代码粘贴到新建的文件里，这个文件就是我们主题配置的文件

  
  
  

• 找到 error 404 ，将帮助内容置换即可

• 
  
  

主页背景更改

两种方式选择一个即可【 第一个使用了，没有成功的话在使用第二个，要想背景好看建议掌握第二种方式自己写，或者引入别人的 css 样式 】

方式一：

更改其图标、主页背景等部分内容，在主题的配置文件下

• 更改背景的话建议使用占位图（就是将本地图片上传到图床）

• 
  
  

• 更改主页 主题背景的时候，如果要使用本地图片记得创建文件夹 img ，将图片放进此文文件，方便管理，复制其路径，粘贴到对应位置，然后在注意一下本地图片的格式即可， .表示当前路径

• 留意: 如果你的网站根目录不是/,使用本地图片时，需加上你的根目录。例如：网站是https://yoursite.com/blog,引用一张img/xx.png图片，则设置background为 url(/blog/img/xx.png)
  

方式二（通过数据文件的方式）：

在 source/_data/style.styl 文件中添加：（如果没有这个路径的话添加即可）

// 背景body {  background-image:url(../images/bg.webp);  height:100%;  width:100%;  background-repeat:repeat-x;  background-attachment:fixed;  background-size:cover;}
//设置透明度//侧边框的透明度设置.sidebar-inner {  background: rgba(255,255,255,0.8);}
//菜单栏的透明度设置.header-inner {  background: rgba(255,255,255,0.8);}
//搜索框（local-search）的透明度设置.popup {  opacity: 0.8;}

background-image 就是你的背景图啦。

主题配置（一）

前面章节带大家看了一下文档，当然官方文档还有很多，这里就不罗列了，希望大家掌握方法，仔细阅读文档，重要的我会在这强调

这里只强调几点：

• 官方文档，可能格式没有设置，需要自己调整一下缩进

• 每新增一个功能最好本地预览下，成功了在执行后面的

• 为了以后大家配置方便，最好配置一下 package.json，就可以通过编辑器运行这行代码，就不用傻傻的一个一个敲了！

• 都开始主题配置了，大多数修改的文件都是 _ config.butterfly.yml 这个主题配置文件

导航栏的说明：

• 注意：

• 圆圈是你要在 source 文件夹下建立的文件夹，名称相同，然后在新建的文件夹下，新建 index.md 文件

• 方框的内容是自己随意更改的

• 注意一下文档的缩进

• 详解：

• 分类 是指标签栏的名称

• / 内容 / 是指路径，source 文件夹下——->categories 文件夹下——->i ndex.md 文件【自动去匹配】

• fas fa-home 是图标

• 
  
  

• 导航栏的修改（注意二级的格式）

字数统计

BASHcnpm install hexo-wordcount --save

修改主题配置文件：

YMLwordcount:  enable: true  post_wordcount: true  min2read: true  total_wordcount: true

如需调整右侧卡片网站信息内项目的数据，在文件/butterfly/layout/includes/widgets/card_webinfo.pug中操作。

目录折叠

由于我个人的目录比较大，完全展开三级目录的话，右边栏就完全被目录铺满了。butterfly主题提供了目录可折叠的选项，只需要在主题配置文件/butterfly/config.yml设置：

card_categories:   enable: true  limit: 0 # if set 0 will show all  expand: true # none/true/false  sort_order: # Don't modify the setting unless you know how it works

主题配置（二）

重点看下我提的内容，其余想加的可以自己看下文档，然后添加上即可

• 评论系统 （我目前使用来必力，但是我觉得没必要，为了给你们演示下，后期应该会关掉，毕竟也没多少人看我的文章）

如有需要看后面章节自行添加即可

• 搜索系统

• 直接点 本地搜素 ———> hexo-algoliasearch 然后看帮助文档，按照文档步骤一步一步操作即可

• 打开终端 使用命令：npm install hexo-algoliasearch --save，安装需要的插件

• 项目的根目录 _config.yml 配置文件下，将如下我修改过的代码复制到文件末尾（官方给的那个有 坑 ）。

• 看下 _config.butterfly.yml 文件的 local_search 有没有打开，打开了就预览一下效果,有搜索框了就欧克了！！

• 页面美化

• 根据官方文档和我修改的 beautifly，在结合你的喜好，修改一下就好了

• 网站的副标题，根据自己的喜好调试即可，附上我的样式

• 
  
  

• 设置主页面高度，根据自己的喜好设置即可

• 
  
  

• 字数统计

• 根据文档自己设置一下

• prefetch (預加載)、pangu、pjax，将这些服务开启。（false 改为 true 即可）

进阶文档

PS:

• 这部分根据自己喜好，看官方文档配置即可

• 魔改官方主题的尽头其实就是默认就好哈哈

gulp 压缩

根据下方推荐视频配置即可

• gulp
  

随着网站的发展，你的文件会越来越多，安装这个插件，可以压缩代码，从而实现代码部分的优化,根据我的步骤一步一步操作即可

安装gulp的cli：    npm install --global gulp-cli    安装gulp本身工具：    npm install gulp -g
npm install gulp-htmlclean --save-dev
npm install --save gulp-html-minifier-terser
npm install gulp-clean-css --save-dev
npm install --save-dev gulp-uglify
npm install --save-dev gulp-babel @babel/core @babel/preset-env
npm install --save-dev gulp-imagemin

• 在根目录下，创建文件 gulpfile.js 文件

添加来必力评论系统

• 我选择这个系统，是因为这个系统能过滤一些不友好的评论，评论能及时提醒、免费等，但是用了几天后发现，太简洁了于是换了 Twikoo 评论系统，就不做过多的介绍了。

• 来比力可以看我的教程，并附上一篇大佬的教程：Vercel + MongoDB 方案搭建 Twikoo 评论系统 包含全部评论系统的搭建

当然也可以选择其它的，自己根据帮助文档配置下 喜欢折腾，美观的就不建议这个评论系统了，建议 Twikoo

来比力评论系统

• 在主题配置文件找到 comments

• 
  
  

• 注册来必力，然后登录，然后右上角管理页面，输入必要的信息，最后出现以下的界面，将对应的 uid 输入配置文件即可

• 
  
  

粘贴的时候注意格式，只粘贴引号里面的内容，还有冒号后面有一个空格

• 在来必力系统进行一些必要的设置，比如：评论邮件提醒，选择登录方式等等

• 最后本地运行，随便找一篇文章，看效果即可

• 
  
  

插入代码自定义样式的说明

• 自定义代码的拆入方法

• 先找到 主题配置文件的 inject

• 一般样式文件会放到 head 里面 ，js 文件放在 bottom 里面

• 新建文件夹，按照箭头位置创建即可，名称随意

• 
  
  

• 将新建的文件夹，引入到 inject 里面即可，然后运行项目即可

• 
  
  

• 底部的样式修改（掌握方法后，直接去网上找一些别人改好的样式，复制粘贴即可）

• 方法：直接 F12 然后找到你要修改的标签 id，然后返回刚才那个建好的 css 文件，在里面添加 css 代码，修改对应的样式即可

• 比如修改底部样式为透明

• 
  
  

• 底部添加多个内容信息，并且点击跳转的说明：（有需要的自行了解一下）

• 
  
  

具体效果如下：

博客添加文章说明

• 首先在博客根目录下右键打开 git bash，安装一个扩展npm i hexo-deployer-git。

• 然后输入 hexo new post “article title” ，新建一篇文章。article title 是你的文件名称，自行更改

• 然后打开D:blog\source\_posts的目录，可以发现下面多了一个.md文件，在内容部分就可以添加你想加入的内容即可（ps：图片最好上传到图床）

• 编写完 markdown 文件后，根目录下输入hexo g生成静态网页，然后输入hexo s可以本地预览效果，最后输入hexo d上传到 github 上。这时打开你的 github.io 主页就能看到发布的文章啦。

• 博客文件的说明：

• .md 文件的下面这部分是你的文章信息的配置，根据官方文档或者安装相应的插件，调整为对应的属性即可，这些属性什么含义，参考官方帮助文档即可

• 
  
  

• 在这个部分下面就是你文章的主题内容了，根据 markdown 的语法自行编辑即可

• 安装了什么插件就加入对应的标签信息配置即可

博客的部署

通过前面的步骤，你的网址已经出具成果了，想必大家已经迫不及待的想看看成果了把，这个章节就和大家唠唠部署这件事，

首先需要明确：通过部署可以提高你博客的访问速度，请大家务必看完此章节内容

域名

推荐： .top 结尾的域名，首年新用户只需要 1 元，来年只需要 25 一年

购买方式：什么平台都可以

域名的备案授权

• 用新用户的身份买一个轻量的服务器

• 腾讯云、阿里云等，尽量域名在哪买的就在那买服务器

• 某宝去买授权嘛，备案域名

• 服务器到期后，可以不续费服务器，然后备案，具体的方式就不说了，下去自行了解

双线部署及全站 CDN 加速

以前 coding 部署是国内用的人最多的方式，乃何被某腾收购，需要域名并且备案

当然我这里提供两套方案：收费的和不收费的自行选择即可，（ps：会详细注明那套收费那套不收费）

准备

下面两个方案这个部分都需要先操作这个单元，当然这是有域名的情况下，没有域名的就可以直接看 vercel 免费部署

• 部署到 GitHub

• 这里就不 bb 了，看上面内容就行

• 购买域名

• 这里不再赘述，要会基本的解析操作。

• 添加解析记录（ps：这个小节看下，后面 vercel 部署还会在讲）

• 
  
  

• 绑定域名

• 首先要获取博客当前默认域名的 ip ,打开 cmd 输入

• 
  
  

• 获取到的ip地址填入域名解析

• 
  
  

• 进入解析页面后需要添加两条记录。

• 
  
  

• 两条记录的说明：

• 实质起作用的其实是第一条A记录，而第二条CNAME记录指向的其实是www的二级域名。

• Github 的 Pages 功能 自定义上你的域名

• 步骤：打开 Github 你的博客项目——> Settings 选项卡 ——> GiPages 选项：在 Custom domain 添加你的自定义域名

• 刷新页面 如果能勾选 Enforce HTTPS 即完成。

• 
  
  

问题汇总

• 如果你将你的域名配置到 github 上了，以后修改了，重新部署的话，GitHub 显示已经上传成功了，但是用你的域名访问，没有变话，这就需要你重新去 解析一下域名

部署到 coding

此方案为收费方案

• 跟着下方视频一步一步操作即可

• 双线部署与cdn加速
  

部署到 vercel

此方案为免费方案，但是还是部署在国外的懂的都懂

• 注册账号

• 进入Vercel官网，先去注册一个账号，使用 GIthub 账号来登录 Vercel。

• 部署网站

• 进入 Dashboard，点击 New project 创建项目

• 
  
  

• 这里可以从已有的 git repository 中导入，也可以选择一个模板。将你的博客项目导入即可

• 
  
  

• 接下来 点击 Deploy，然后静等网站安装依赖以及部署

• 等项目部署完成，到你的项目出现以下页面，将箭头所指网页，到浏览器就可以访问了

• 
  
  

自定义域名

如果有自己的域名，还可以在 vercel 中进行设置。首先进入 blog 的控制台，在 Settings -> Domains 添加域名。‘

• 接着域名需要 DNS 解析到 vercel 提供的记录值

• 
  
  

• 登录所在的域名服务商，根据 Vercel 提供的记录值，添加两条记录

• 
  
  

• 此时回到 Vercel，可以看到记录值成功生效。

• 
  
  

• 此时访问自己的域名，同样也能访问到页面

说明

• 当主分支有代码被推送，Vercel 将会重新拉取代码，并重新构建部署（构建速度可观）

• 同时 vercel 还支持 serverless，也就是说，不仅能部署静态站点，还能部署后端服务，不过肯定有一定的限制。

• 默认状态下，Vercel 将会颁发并自动更新 SSL 证书。

• 也可以用 vercel 的部署+又拍云 cdn 对访问速度进行优化，感兴趣的可以操作下

自动部署

• 推荐阅读博文

• 使用 GitHub Actions 实现自动化部署和部署到服务器
  

魔改记录

• 到这个板块，希望你看完了官方文档里面的内容后，将已经添加的必要功能添加后，在看此章节后面的内容

• 到这里了也希望大家记录一下自己的魔改记录，方便以后！！！

• 这个板块的内容其实就是，就是在你网址美化的基础上进行魔改，当网页该有的轮子都造出来后，就是怎么让你的网页变的炫酷起来，那就是添加 css、js 等特效，具体的记录请参考这篇文章：butterfly美化记录
  

问题汇总

常见问题

1. 安装 Hexo 时遇见的报错

2. 
   
   

解决办法：

重新配置了下 npm 安装的全局模块所在的路径，以及缓存 cache 的路径，又检查了一下环境变量是否正确

设置全局模块命令：

npm config set prefix "D:\node\node_global"

设置 cache 模块命令

npm config set cache "D:\node\node_cache"

1. 上传到 GitHub 碰到 “ Deployer not found ” 问题

解决办法：重新 deploy 即可。

npm install hexo-deployer-git --save

然后 hexo d 就能提交成功

问题解决思路

• 我在安装 hexo 的过程中也出现了很多问题，我谈谈是怎么解决的

• 遇见问题不要慌，先找找报错信息，找到报错信息后，首先要弄懂什么意思，看是自己配置问题还是其它问题

• 如果报错的是某个文件第几行的话，大概率是配置问题，就得去提示的文件检查语法

• 若不是配置问题在百度，大多数情况下都会有解决教程，然后根据解决办法解决下

• 若你将报错信息百度，未能百度到答案，这时就要求助大佬或者使用 git 进行版本回退

• 最后终极大法，那就是删除干净文件重新安装即可

总结

• 按照步骤本教程一个基本的网页就搭建出来了，后面就是对网页的美化和优化

• 优化推荐阅读博客

• 网站加载速度优化方案总结
  

• 这个系统毕竟是白嫖的，我相信大家的初衷也是白嫖把哈哈，但是有些事情我还得说明下：

• 虽然是白嫖的，但访问速度和系统稳定性，是网站的最重要的标准，如果你不想花钱的话，我建议有些炫酷的美化功能能省则省，把该有的页面完善下就可以了，毕竟简洁也是一种美

• 在你美化博客的过程中，最好简单记录下你使用了什么功能，这样后面修改，更新相对容易些，比如：你觉得有更好的方案了，你就可以根据自己的记录，去删除掉之前的然后加上新的

• 说明：有什么问题欢迎大家来星球大家共同探讨，或者给我留言

• 最后：既然，你迈出了这一步就好好 diy，维护好你的系统！！！！