前言

• 全文根目录值安装 hexo 框架的根目录，主题目录至 安装 butterfly 主题的目录
• 配置文件指 _config 配置文件，主题配置文件指 _config.butterfly 主题配置文件

博客关键页面生成

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

标签页

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

CODE

hexo new page tags

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

CODE

---

title: 标签

date: 2022-08-03 12:53:45

type: "tags"

---

分类页

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

CODE

hexo new page categories

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

CODE

---

title: 分类

date: 2022-03-11 12:56:06

type: "categories"

---

友情链接

创建友情链接页面

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

CODE

hexo new page link

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

CODE

---

title: 友情链接

date: 2022-03-11 12:57:48

type: "link"

---

友情链接添加

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

CODE

---

title: friends

date: 2022-08-03 08:18:23

type: "friends"

layout: "friends"

---

# 友链交换

想要交换友链的小伙伴，欢迎在留言板留言，留言格式：

* **名称：**你的博客名称

* **地址：**你的博客地址

* **简介：**一句话简介

* **头像：**你的头像地址

例如我的博客友链，大家可以加到自己博客里哦：

* **名称：**余白

* **地址：**https://heiyushaoye.github.io

* **简介：**无处不在

* **头像：**头像地址

• 预览效果如下，就表示成功了，然后直接跳到帮助文档的404页面
  
  网络异常，图片无法展示

  |
  
  

关于我

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

CODE

hexo new page about

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

CODE

---

title: 关于作者

date: 2022-03-11 13:01:21

type: "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 文件中添加：（如果没有这个路径的话添加即可）

CODE

// 背景

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，就可以通过编辑器运行这行代码，就不用傻傻的一个一个敲了！
  
  CODE
  

"server": "hexo clean && hexo generate && hexo server"

修改第九行，这行代码可以省去每次都要清理，然后生成静态页面，这个步骤，

然后每次运行的时候也可以不用去输入命令行，可以找到这行代码然后点击 server 运行即可

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

导航栏的说明：

• 注意：

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

• 方框的内容是自己随意更改的
• 注意一下文档的缩进

• 详解：

• 分类 是指标签栏的名称
• / 内容 / 是指路径，source文件夹下——->categories文件夹下——->i ndex.md 文件【自动去匹配】
• fas fa-home 是图标

• 网络异常，图片无法展示

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

menu:

  主页: / || fas fa-home

  时间线: /archives/ || fas fa-archive

  标签: /tags/ || fas fa-tags

  分类: /categories/ || fas fa-folder-open

  链接||fas fa-list:

    友链: /link/ || fas fa-link

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

字数统计

CODE

BASH

cnpm install hexo-wordcount --save

修改主题配置文件：

CODE

YMLwordcount:

  enable: true

  post_wordcount: true

  min2read: true

  total_wordcount: true

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

目录折叠

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

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 配置文件下，将如下我修改过的代码复制到文件末尾（官方给的那个有 坑 ）。
  
  CODE
  

search:

  path: search.xml

  field: post

  format: html

  limit: 10000

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

• 页面美化

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

beautify:

  enable: true

  field: post # site/post

  title-prefix-icon: # '\f0c1'

  title-prefix-icon-color: # '#F47466'

• 网站的副标题，根据自己的喜好调试即可，附上我的样式
  
  网络异常，图片无法展示

  |
  
  
• 设置主页面高度，根据自己的喜好设置即可
  
  网络异常，图片无法展示

  |
  
  
• 字数统计
  根据文档自己设置一下
  
• prefetch (預加載)、pangu、pjax，将这些服务开启。（false改为true即可）

进阶文档

PS:

• 这部分根据自己喜好，看官方文档配置即可
• 魔改官方主题的尽头其实就是默认就好哈哈

gulp压缩

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

• gulp

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

CODE

安装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-de

v 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主页就能看到发布的文章啦。
  
  CODE
  

hexo clean

hexo g

hexo s

hexo d

• 博客文件的说明：

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

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

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

博客的部署

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

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

域名

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

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

域名的备案授权

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

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

• 某宝去买授权嘛，备案域名
• 服务器到期后，可以不续费服务器，然后备案，具体的方式就不说了，下去自行了解

双线部署及全站 CDN 加速

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

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

准备

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

• 部署到 GitHub
  这里就不bb了，看上面内容就行
  
• 购买域名

• 这里不再赘述，要会基本的解析操作。
  
• 添加解析记录（ps：这个小节看下，后面 vercel 部署还会在讲）
  
  网络异常，图片无法展示

  |
  
  

• 绑定域名

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

ping username.github.io

# username记得替换成你的用户名

• 网络异常，图片无法展示

  |

• 获取到的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时遇见的报错
   
   网络异常，图片无法展示

   |
   
   

解决办法：

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

设置全局模块命令：

CODE

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

设置cache模块命令

CODE

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

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

解决办法：重新 deploy 即可。

CODE

npm install hexo-deployer-git --save

然后 hexo d 就能提交成功

问题解决思路

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

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

• 如果报错的是某个文件第几行的话，大概率是配置问题，就得去提示的文件检查语法
• 若不是配置问题在百度，大多数情况下都会有解决教程，然后根据解决办法解决下
• 若你将报错信息百度，未能百度到答案，这时就要求助大佬或者使用git进行版本回退
• 最后终极大法，那就是删除干净文件重新安装即可

总结

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

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

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

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

• 在你美化博客的过程中，最好简单记录下你使用了什么功能，这样后面修改，更新相对容易些，比如：你觉得有更好的方案了，你就可以根据自己的记录，去删除掉之前的然后加上新的
• 说明：有什么问题欢迎大家来星球大家共同探讨，或者给我留言
• 最后：既然，你迈出了这一步就好好diy，维护好你的系统！！！！