登录
hexo+Butterfly 博客搭建
hexo基础配置
首先贴上官方文档地址
安装hexo
安装hexo很简单：
全局安装（一般我们都用全局安装）
npm install -g hexo-cli
局部安装
npm install hexo
创建自己的博客项目
首先建一个专门存放hexo项目的文件夹，比如叫hexo（具体看你需不需要）。
在该文件夹下运行下面命令创建自己的博客项目，比如我的项目叫my-blog：
hexo init my-blog
安装完成后进入新创建的项目目录：
cd my-blog
npm安装所需要的依赖
npm install
目录结构
暂时只认识下面的目录结构就行了：
启动项目
hexo server
这个命令可以在package.json中查看
在浏览器打开：
写作
现在我们关注一下根目录中的scaffolds文件夹：
post模板
我使用post模板生成一个新的文章试试：
命令：
hexo new post '我的第一篇文章'
可以看到生成了一个新的文章，并且title，date都自动生成了。
page模板
我们使用page模板生成一个新的页面试试：
命令：
hexo new page "test-page"
浏览这个页面
draft模板
命令：
hexo new draft '这是草稿模板'
注意：草稿文章用hexo server命令是不能预览的，我们我们要使用下面的命令：
hexo clean
hexo clean是用来清理缓存的，可选。
hexo s --draft
s是server的简写
现在可以预览草稿文章
Butterfly主题配置
官方文档
安装
Butterfly的官方文档写的很详细，给了两种安装butterfly主题的方法：git克隆和npm安装。我更推荐使用npm安装，这样可以避免后续的git分支冲突问题，当然如果你对git很熟悉并且可以轻松解决分支冲突，可以使用git克隆。这些是我的踩坑经历，哈哈😁
在hexo根目录下执行下面命令：
npm install hexo-theme-butterfly
注意：我们不用运行更新主题的命令，因为我们安装的就是最新的butterfly主题：
❌ 不需要执行，好象执行了没关系，😄
npm update hexo-theme-butterfly
然后记得安装butterfly的两个插件：
npm install hexo-renderer-pug hexo-renderer-stylus --save
应用butterfly主题
创建butterfly配置文件
我们需要使用_config.butterfly.yml配置文件来控制buttefly主题，从而实现主题自定义。
先把hexo默认的主题配置文件_config.landscape.yml删掉：
然后创建butterfly的配置文件_config.butterfly.yml：
然后在node-modules中找到hexo-theme-butterfly：
然后把butterfly配置文件_config.yml中的所有内容复制到我们刚才在hexo根目录下创建的_config.butterfly.yml里面
在_config.butterfly.yml中的配置可以覆盖butterfly主题_config.yml中的配置，从而可以实现主题自定义。
导航栏配置
butterfly的配置项很多，但是不怕，有官方文档，我们最好从上往下开始配置吧，先配置导航栏
先配置一下logo：
hexo展示的logo就是网站的title，这个需要在hexo的配置文件中进行配置而不是在butterfly的配置文件中进行配置：
如果你喜欢图片logo，可以在butterfly的的配置文件中设置：
然后配置一下右侧的menu：
我们先分别创建三个页面：分类页，标签页，关于页：
hexo new page tags
hexo new page categories
hexo new page about
在每个目录的index.md中这样写
比如是分类页：
---
title: Categories
type: 'categories'
date: 2025-04-01 18:08:11
---
比如是标签页：
---
title: Tags
type: 'tags'
orderby: random
order: 1
date: 2025-04-01 18:04:49
---
然后进行路由配置：
好了，导航栏配置完成了：
top-image配置
看一下效果：
然后配置打字机效果：
因为我想用这样输出<Hello World />，所以<Hello World />这样写，否则不会生效
配置个人信息卡片
在hexo的配置文件中进行Author和description的配置：
然后在butterfly的配置文件中设置avatar：
然后更改Follow Me的连接
Announcement卡片配置
我不需要这个卡片，所以设置成不显示
同样我们可以把不需要的卡片设置成不显示，这样清爽多了
配置网站背景色
配置深色模式下背景色
butterfly的深色模式背景色太暗了，应该怎么自定义这个背景色呢？
我通过观察发现，butterfly深色模式下的样式在这个文件里面：
我们可以在我们自己的source目录下创建一个叫css的文件夹，然后在这个文件夹里面创建custom.css文件：
然后从tailwindcss的调色盘中选择一种比较舒服的颜色：
然后在butterfly的配置文件中引入我们自己的css文件：
文章版权声明
因为我暂时不需要这个版权信息，所以我把它设置成false了：
开启文章内容排版美化
开启排版美化之前：
开启之后：
配置字体
我想给代码块配置Jetbrains家的字体，怎么做呢：
我们可以像上面图片一样引入字体cdn链接。
我这里附上Jetbrains Mono的国内cdn链接：
这是deepseek推荐的cdn链接
<link href="https://fonts.loli.net/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
这是jsdeleiver的cdn链接
<link href="<https://cdn.jsdelivr.net/npm/jetbrains-mono@1.0.6/css/jetbrains-mono.min.css>" rel="stylesheet">
然后更改代码块的字体：
配置图片放大预览
我想放大预览这里的图片，怎么做呢？
把lightbox设置成medium_zoo或者fancybox就可以了。
