轻量级Hexo博客搭建指南

准备工作

这里不多赘述，直接去B站参照up主CodeSheep的视频操作就行，学习到部署到GitHub即可。
链接：https://www.bilibili.com/video/BV1Yb411a7ty?share_source=copy_web

配置

Hexo基本配置

建议做一部分就运行一下hexo s来查看效果，检查是否有报错。

打开博客根目录文件夹下的_config.yml配置好title、subtitle、author、language、timezone、url即可。

# Site
title: 东方迷津筑
subtitle: 幻想乡一角
description:
keywords:
author: 狛枫
language: zh-CN
timezone: Asia/Shanghai
# URL
# 如果你是用GitHub Page，那么这里写https://username.github.io
url: https://komaeka.fun

Butterfly主题配置

由于本文属于轻量级指南，没提到的部分就是默认配置，如果有兴趣也可以自己钻研。

1. 进入Butterfly 安裝文檔(一) 快速開始 | Butterfly学习安装、应用主题、安装插件、升级建议。

2. 进入Butterfly 安裝文檔(二) 主題頁面 | Butterfly学习Front-matter、标签页、分类页、友情链接、图库、404页面。

   1. 有些萌新不知道Front-matter是什么，我简单介绍一下。因为Hexo博客的页面主要由source文件夹里边的Markdown文件渲染而来，而Front-matter就能在这个Markdown文件里边进行一些设置，比如文章标题、标签、分类、发布时间等等。
   2. 标签页、分类页和友情链接页面除了添加type还可以把top_img加上，这样就有顶部图了。
   3. 图库标签采用的是相对地址，比如/Gallery/wallpaper指的是博客根目录/source/Gallery/wallpaper。

3. 进入Butterfly 安裝文檔(三) 主題配置-1 | Butterfly学习导航菜单、社交图标、主页文章节选、顶部图、文章页相关配置、头像、Footer 设置、右下角按钮、侧边栏设置、标签外挂。
   2. 顶部图配置index_img、archive_img、tag_img、category_img即可，其他部分后续有需要再考虑修改。
   3. 如果你想用GitHub徽标，Footer设置部分可以把copyright改为false，后面可以用插件设置GitHub Badge。
   4. 标签外挂要熟悉，写文章的时候使用起来效果会很好。

4. 进入Butterfly 安裝文檔(四) 主題配置-2 | Butterfly学习评论、在线聊天、搜索系统、美化/特效、字数统计。

   1. 关于评论系统，我看一些大佬喜欢用Twikoo，我就也跟着用Twikoo。我找到了一篇大佬的配置教程，写得十分详细，亲测可用：Twikoo评论系统配置教程。

   2. 在线聊天其实可以不用添加，不过添加了真的很酷就是了，我用的是Tidio，效果如图：

      添加了之后记得在_config.butterfly.yml改rightside-bottom，不然聊天窗口会挡住侧边设置栏目，我改为了130px。

   3. 搜索系统我用的是本地搜索，打开之后右上角的导航栏最左边就会自动出现一个放大镜的标志，那就是搜索。

   4. 美化/特效部分，我把footer背景改为了true，打开了beautify，改了字体为Microsoft YaHei，将字体大小调为了16px，添加了网站副标题，打开了页面加载动画。

5. 在页底添加GitHub Badge，效果演示：

6. 至此，你的Hexo博客基本上已经搭建完毕，如果你还想继续美化或者提高访问性能等，去Akilarの糖果屋，那里会有你想要的！

附录

教程链接

• Hexo官网
• Butterfly官网
• Akilarの糖果屋（里边有很多魔改和美化教程哦！）

工具资源

• Gravatar头像
• 腾讯云
• Tidio
• Font Awesome

涉及的插件

npm install hexo-deployer-git --save # 部署插件
npm install hexo-renderer-pug hexo-renderer-stylus --save # 渲染器插件
npm install hexo-generator-search --save # 本地搜索插件
npm install hexo-wordcount --save # 字数统计插件
npm install hexo-butterfly-footer-beautify --save #页底GitHub徽标插件

---

本人水平很菜，如果文章有差错，还望指正。

谢谢§ԾᴗԾ§