Hexo 博客搭建:GitHub Pages 与 Butterfly 主题配置
前言:为什么要做这个博客?
平时在学习过程中写过不少 Python 脚本,折腾过 PostgreSQL 数据库,也在 GitHub 上修过别人的 Bug。逐渐意识到,知识如果不系统地沉淀下来,很容易变成过眼云烟。
为了记录接下来死磕 Java 后端开发的学习历程,决定搭建一个真正属于自己的独立博客。
这篇文章不仅是教程,更是一篇的“填坑日记”。
一、网络超时
环境配置(Node.js 和 Git)还算顺利,但敲下第一行初始化命令 hexo init myblog 时,就开始报错了:
1 | fatal: unable to access '[https://github.com/hexojs/hexo-starter.git/](https://github.com/hexojs/hexo-starter.git/)': Connection timed out after 300030 milliseconds |
排坑思路: 命令行默认是不走代理的,干等 300 秒后必定超时。而后面的 EPERM 报错纯粹是因为网络断开后,Hexo 备用机制乱了阵脚,试图在 D 盘根目录建文件夹被系统权限拦截。
解决方案: 果断清理残留的半成品文件夹,直接动用国内镜像源进行极速克隆:
1 | hexo init myblog [https://ghproxy.net/https://github.com/hexojs/hexo-starter.git](https://ghproxy.net/https://github.com/hexojs/hexo-starter.git) |
随后进入文件夹,使用淘宝镜像源安装依赖:
1 | npm install --registry=[https://registry.npmmirror.com](https://registry.npmmirror.c |
二、连接被重置
在本地跑通 hexo s 看到默认主题后,按照教程配置了 _config.yml,准备将网页推送到 GitHub Pages。结果在执行 hexo d 时,再次报错:
1 | fatal: unable to access '[https://github.com/](https://github.com/)...': Recv failure: Connection was reset |
排坑思路: 国内使用 https:// 开头的地址去推送 Git 极度不稳定,经常推到一半连接就被掐断。于是抛弃 HTTPS 部署,改用 SSH 密钥免密传输。
解决方案:
- 生成本地密钥: 运行
ssh-keygen -t rsa -C "我的邮箱",一路回车。 - 配置 GitHub: 将
~/.ssh/id_rsa.pub里的公钥全选复制,添加到 GitHub 的SSH and GPG keys中。 - 测试连接: 运行
ssh -T git@github.com确认打通。 - 修改 Hexo 总配置: 将部署地址换成 SSH 格式。
1 | deploy: |
修改完成后,再次 hexo clean && hexo g && hexo d,丝滑上线!
三、换装 Butterfly
为了追求视觉效果,我选择了目前 Hexo 界功能多样的主题——Butterfly。但代价是配置复杂度的提升。
避坑指南:
- 国内极速克隆: 同样使用镜像加速,避免克隆到一半报错。
git clone https://github.moeyy.xyz/https://github.com/JerryC808/hexo-theme-butterfly themes/butterfly - 必装渲染器: Butterfly 使用了 Pug 和 Stylus,如果不装对应的渲染插件,本地预览会直接满屏乱码。
npm install hexo-renderer-pug hexo-renderer-stylus --save
四、消失不掉的 “xxxxxx”
在配置侧边栏社交链接时,遇到了本次搭建过程中最诡异的 Bug:明明已经把 _config.yml 里的 social 链接改成了我自己的 GitHub 账号(fanbyteio),且再三确只有这一处social链接,但网页上的图标点开后,依然顽固地跳转到主题默认的 github.com/xxxxxx。
排坑思路:
我先后尝试了:
- 强制清除浏览器缓存(Ctrl + F5)。
- 执行
hexo clean深度清理。 - 将主题内部的
_config.yml放在根目录下且更名为_config.butterfly.yml - 删除外层配置文件,直接修改主题内部的
_config.yml。
结果:全部失败! 那个xxxxxx就像幽灵一样,不知藏在哪个角落。
最终解决办法:全局搜索
我意识到,既然网页上出现了这个字符串,它一定以硬编码的形式存在于某个配置文件中。我动用了 Windows 命令行下的全局搜索工具:
1 | findstr /S /N "xxxxxx" *.yml |
真相大白: 搜查结果显示,除了我修改的 social 区块,在 themes\butterfly\_config.yml 的第 285 行还藏着另一个 link 配置。原来 Butterfly 有多处可以配置 GitHub 链接的地方,而我之前只改了其中一个
这就是典型的“代码改了,但没完全改”。精准打击掉这一行后,跳转终于恢复正常。