使用hexo-butterfly框架搭建个人博客

这里记录一下我自己搭建（魔改/照搬他人）个人博客的步骤，日后查找起来也方便。

欢迎访问我的个人博客点击这里预览效果

出自https://akilar.top/posts/e2d3c450/

这里直接npm安装配置拿来用了。这里转载一下安装方法：

博客根目录执行

在站点配置文件或者主题配置文件添加配置项（对，两者任一均可。但不要都写）

修改字体样式直接引入css文件和字体包即可。

1、首先寻找喜欢的字体，有些字体很好看并且是免费非商用的，我们可以拿来用。

这里推荐几个网址供参考：方正字库，第一字体网，字体天下，字体家，自由字体

2、将需要使用的字体文件放入博客目录下，我这里是放在blog/source/butterfly/css下，方便css文件引入。

3、如有有css文件，就在最下面继续写；如果没有，则新建一个css文件，文件名任取

这里使用的是小康博客的鼠标样式。如果只想修改鼠标样式，在css文件添加下方代码，然后引入即可。

我这里是直接使用大佬现成的文件，主题配置中inject引入css文件。

这里使用的是Akilar大佬的修改方案，个人倾向于一图流，比较符合我的审美。

由于前面使用了小康博客的css，页脚的模糊毛玻璃效果没去掉，在页面F12审查元素之后发现是#footer, #footer:before这个选择器有问题，修改如下：

这样页脚就透明了。

这里参考作者的全局吸底Aplayer教程，为方便后续自己查阅，特摘抄出来。

首先安装hexo-tag-aplayer插件,官方github；

博客根目录安装：

由于需要全局都插入aplayer和meting资源，为了防止插入重复的资源，需要把asset_inject设为false

在hexo的配置文件中

在主题配置文件中，enable设为true和per_page设为true

然后把代码插入到页脚中

运行Hexo就可以看到网页左下角出现了Aplayer

最后，如果你想切换页面时，音乐不会中断。把主题配置文件的pjax设为true即可。

参数解释：

参考Akilar大佬的修改方案。

原版的算法生成0的几率很小，所以我把生成随机数的算法改成了Math.floor

首先必须设置网站背景图，在主题配置中找到并且配置。我这里是配置成了'#efefef'

配置之后，主页使用#web_bg的div来存放背景图片，使用#page-header来存放banner图片。使用js随机选择一张图片，然后根据id取值重设即可做到每次切换或刷新时，随机背景图片。

我这里在blog/source/butterfly/js下新建了rdmbkg.js文件

最后在主题配置文件中引入js

最后在主题配置文件中引入js

参考这里，我直接npm安装之后拿来用了，下面内容均摘自原博客。

博客根目录执行命令

在hexo配置，或者主题配置中任选一个添加如下配置信息即可。二选一，不要都添加。

参数说明

最开始使用的是utterances，现在改为Twikoo

具体配置参见：Twikoo

我使用的是Vercel部署，主要是因为免费。作者为我们提供了视频的部署教程，点击查看

我为了偷懒，Vercel使用github登录， MongoDB使用google帐号登录。

这里补充几点：

Vercel添加环境变量MONGODB_URI之后，想要环境变量生效，记得要重启服务（在Deployments里，点击Redeploy ）

配置文件的修改在MONGODB控制台中，点击Browse Collections

关于代码高亮，需要在配置中配置HIGHLIGHT:true

语法：

其中class="language-css"换成需要的语言。

另外twikoo支持md语法，所以直接使用md语法添加代码块同样可行。

文章参考：

操作步骤如下：

进入企业微信创建一个企业。每个普通用户都可以创建企业，不需要很麻烦，但是需要填写一些基本信息。

在 “企业微信 —— 应用管理” 底部的 “自建” 应用处，新建一个 “应用”。

创建完成后，记录下应用页面的AgentId和Secret。查看Secret需要安装一个企业微信，查看完可以卸载。

在 “企业微信 —— 我的企业” 底部，记录下 企业 ID。

我之前使用vercel部署过twikoo，因此不需要再创建新的云函数。如果你不是使用vercel，参考这里

找到你的twikoo github仓库，clone到本地，进入api/，执行以下命令：

然后在该目录创建一个python.py文件，内容如下：

注意文件名命名必须是python.py 否则你可能需要更改获取query parameters部分的代码。

将改动push到远程仓库，等待一会，vercel会自动部署。当Vercel完成部署后，可以使用下面这样的方式，拼接一个 URL，浏览器访问，看看手机微信能不能接收到消息。

API参数：

完整的url如下所示：

将上述url的内容替换成你的信息。其中，vercel_app_address可以在vercel应用界面查看，如下图：

测试一下你的访问路径是否有效，如果能收到消息就说明成功。

在twikoo后台管理WECOM_API_URL中添加你拼接的url即可。

注意msg后面不要有参数：

在“企业微信——我的企业——微信插件”页面配置，点击这里查看。

使用微信扫码，关注你的企业微信，并且在设置中打开允许成员在微信插件中接收和回复聊天消息选项。

大功告成！现在，使用一个非博主的邮箱，去评论一条试试吧。

参考这里，我只添加了本地搜索。

根目录输入命令安装

然后在hexo的配置文件中添加

在主题配置文件中打开本地搜索

参考这里，通过shields.io在线生成，

输入相关信息后，点击 make badge 即可得到徽标的 URL。可以用 img 标签引用，写法简单。不过正式写法建议用 object 标签引用，写法示例如下。

还可以继续添加参数，在 URL 内添加样式属性，在url后面使用 ? 引用，使用 & 连接各属性。

在 [Blogroot]\_config.butterfly.yml 的 footer 配置项中添加徽标，注意事先压缩一下，使他们只留一行。为了不至于太过紧凑，设置一下行内间隔属性 margin-inline。

ICP备案的徽标可以通过logo属性添加，连接如下

做了一些文章路径的优化，Hexo默认永久链接是 :year/:month/:day/:title/的格式，这样不美观，也不利于SEO。

在站点配置文件中修改：

这样文章的路径就没有讨厌的年月日格式了。

我这里使用的是hexo-generator-seo-friendly-sitemap，生成网站地图。

网站地图是什么？

网站地图实际上就像是一个站点的导航文件。网站地图的重要性：

搜索引擎每天都是让爬虫在互联网爬行来抓取页面，站点地图的作用就是给爬虫爬行构造了一个方便快捷的通道，因为网站页面是一层一层的链接的，其中可能会存在死链接的情况，如果没有站点地图，爬虫爬行在某个页面就因死链接爬行不了，那么就不能收录那些断链接的页面。

站点地图的存在不仅是满足搜索引擎爬虫的查看，更多是方便网站访客来浏览网站，特别是例如门户型网站由于信息量太多很多访客都是通过站点地图来寻找到自己需要的信息页面，这也能很好的提高用户体验度 。

站点地图可以提高链接页面的权重，因为站点地图是指向其他页面的链接，此时站点地图就给页面增加了导入链接，大家知道导入链接的增加会影响到页面的权重，从而提高页面的权重，页面权重的提高同时会提高页面的收录率。

使用方法：

hexo根目录下安装：

在Hexo站点配置文件添加：

设置之后，网站地图就生成完毕了。

以我的站点为例，

网站地图索引：https://www.yyyzyyyz.cn/sitemap.xml

文章网站地图：https://www.yyyzyyyz.cn/post-sitemap.xml

页面网站地图：https://www.yyyzyyyz.cn/page-sitemap.xml

接下来，我们需要将生成的网站地图提交到谷歌、百度、必应等站点，注册账号，添加你的域名，然后复制刚才生成的网站地图上传。之后等待爬虫抓取就好了。下面是sitemap上传示例。

百度：

必应：

谷歌：

关于谷歌，有能力的同学可以尝试一下。

使用hexo-submit-urls-to-search-engine插件，每次hexo -d时，可自动推送Hexo博客新链接至谷歌、百度、必应搜索引擎站长平台以提升网站收录质量和速度。解放双手，一劳永逸。

首先在本地hexo根目录下安装：

获取站长平台API token，关于这部分内容，官方文档有详细介绍，点击查看

假设你已经阅读了官方文档，并且获得了token。获取token之后，Hexo站点配置文件添加：

关于谷歌，如果不想提交到谷歌，设置google和google_proxy为0。

配置完成。

接下来只需要hexo clean && hexo generate && hexo deploy即可。

如果推送成功，你会看到如下消息：

关于robots协议，可以查看我的这篇博客，简单来说就是可以指定搜索引擎爬虫可以抓取什么内容、不可以抓取什么内容。

这些网站可以在线生成robots.txt任选一个即可：tool在线生成，ChinaZ在线生成，dqdv在线生成，w3cschool在线生成

复制生成的内容，新建一个robots.txt将内容粘贴进去，然后将它上传至网站根目录下。

可以在这里验证你的文件是否生效：验证robots

为网站使用到的所有外链添加rel="noopener external nofollow noreferrer", 可以有效地加强网站SEO和防止权重流失。github

hexo博客根目录安装：

然后在配置文件添加：

参考这篇文章。

首先，要保证使用git安装了butterfly主题而不是npm安装，因为通过npm安装并不会在themes里生成主题文件夹，而是在 node_modules里生成。

操作步骤如下：

登录GitHub，访问 Github-> 头像（右上角）->Settings->Developer Settings->Personal access tokens（点击跳转），点击generate new token，创建token，名称随意，需要勾选repo权限。

复制这个token备用，token只会显示这一次，如果忘记需要重新生成。

我们需要创建一个用来存放 Hexo 博客源码的私有仓库，由于仓库会保存刚刚生成的token，如果泄露会导致安全问题，因此选择闭源。用[SourceRepo]表示。

这个仓库可以公开，也可以私有。用[GithubBlogRepo]表示。

打开站点配置文件 博客根目录/_config.yml, 找到 deploy 配置项，使用之前生成的token和github仓库 URL 来组装地址。

在博客根目录新建.github 文件夹，注意开头是有个. 。然后在.github 内新建 workflows 文件夹，再在 workflows 文件夹内新建 autodeploy.yml, 在 [Blogroot]/.github/workflows/autodeploy.yml 里面输入如下内容：

我们需要在自动部署时使用免密登录，因此要在刚刚创建的存放源码的私有仓库[SourceRepo]内添加一个secrets。

进入私有仓库点击settings->secrets->new repository secret，其中Name为HEXO_DEPLOY_PRI；Value为你本地电脑上.ssh文件夹下为服务器生成的免密登录的私钥，我这里是id_rsa，复制私钥内容粘贴即可。

博客根目录下，添加.gitignore文件：

在博客根目录下启动终端，使用 git 指令重设仓库地址。

前往源码仓库查看，如果你发现theme/butterfly文件打不开并且有一个箭头，是由于我们clone安装的butterfly主题，这个文件夹里面有.git隐藏文件，github就将他视为一个子系统模块了。

解决办法就是：

然后重新add、commit、push即可。

打开 GIthub 存放源码的私有仓库，找到 action，查看是否成功上传博客。

这种方式有一个缺点是每次更新时，你所有的文章更新时间都会改变，于是我干脆把更新时间隐藏了。

本文来自博客园，作者：yyyz，转载请注明原文链接：https://www.cnblogs.com/yyyzyyyz/p/15542401.html