Hexo部署与配置-基于Butterfly主题【持续更新】

这篇博文作为总参考，感谢竹山一叶。

Hexo站点部署

本人太懒了，看客们不如…参考这篇文章？

网站配置

Front-matter

参考Hexo文档的Front-matter说明

开启评论

听说推荐Twikoo，话不多说先上参考链接，留待以后搞。

更改顶部图

（1）在主题外的source文件夹中新建一个image文件夹，放入顶部图。注意不要放主题下自带的source-img文件夹，否则主题更新后会覆盖掉图片。
（2）配置_config.butterfly.yml文件

1 2	# If the banner of page not setting, it will show the default_top_img default_top_img: /Blog/image/top-image.jpg

注意：冒号和路径之间有一个英文空格不要删除，这是yml的规则。
另外，如果你的网站和我一样根目录不是’/',使用本地图片时，需加上你的根目录。
例如：我的网站是https://chenhuizhu-0930.github.io/Blog/，引用一张image/top-image.jpg图片，则设置 default_top_img 为 /Blog/image/top-image.jpg。这里要注意大小写不要错。因为github是严格区分大小写的，如果写成/blog即使本地显示图片，部署后也不显示（踩坑的血泪/(ㄒoㄒ)/）。

另另外，将上述github原始url绑定域名后，记得这里要修改，否则图片加载会失效。

更改网站图标&头像

把网站图标放入主题下面的img文件夹，头像放入新建的image文件夹，并将主题配置文件更改如下：

1
2
3

favicon: /img/favicon.png #网站图标
avatar:
  img: /image/my-photo.png #头像

这里我不理解favicon使用我新建的image路径就不行（avatar用image文件夹就正常显示），只好把图标放到了主题下的img文件夹中…（4.12补充：绑定域名后image路径也可以了…不懂）

我的测试如下：
在谷歌浏览器中快捷键ctrl+shift+i打开开发者工具，可以在开发者工具里直接修改路径试错，看左侧是否达到相应效果。下图使用img路径，图标可以正常显示。

copy了网站图标到image文件夹中，路径修改到下图中的image路径下，发现图标失效。下图中可以看到资源是存在于路径中的，但不知道为什么这一路径不行。有了解的大佬还请解惑哇~

文章中引用另一篇博文

两种方式：
（1）Hexo自带的{% post_link %}标签可以通过文章的文件名（不带扩展名）直接引用；
（2）使用markdown语法的文章发布后的路径进行链接

1 2	（1）{% post_link HexoAddImage 利用Hexo在博客中插入本地图片 \| 无需外链 %} （2）[利用Hexo在博客中插入本地图片 \| 无需外链](/Blog/2025/02/07/HexoAddImage)

效果👇
（1）利用Hexo在博客中插入本地图片 | 无需外链
（2）利用Hexo在博客中插入本地图片 | 无需外链