从零开始：使用 GitHub + Hexo + Fluid 搭建个性化博客（附魔改与使用教程）

前言

目前网上关于这类方法的技术博客数量众多且内容繁杂。因此，这篇博客主要是对这些资源进行系统化的整理，并记录我在搭建过程中遇到的一些问题和解决方法。建议大家结合我推荐的博客一起阅读，同时参考本文中提到一些bug对应的解决办法。由于文章篇幅较长，您可以根据目录选择性查看所需内容。

搭建博客

安装主题时git报错

取消代理设置

git config --global --unset http.proxy 
git config --global --unset https.proxy

hexo图片不显示

解决办法：使用图床
Obsidian+PicGo+Gitee搭建免费图床_obsidian 图床-CSDN博客
同时，也推荐使用腾讯云、阿里云的对象存储服务存储图片，然后在文章加入图片的链接。

使用图床之后依然不显示图片

如果使用图床之后依然不显示图片，不要慌，由于图床的防盗链机制，只允许本网站显示图片，外部网站加载图片就会报错。
解决办法：
以fluid主题为例，根据路径themes\fluid\layout\_partial\head.ejs找到head.ejs文件，在文件中添加

<meta name="referrer" content="no-referrer">

我目前的工作流

在obsdian写好md文件，然后把md文件粘贴到hexo的-post文件夹里在文章最开头额外加入以下语句作为标题：

---
title: 黑马点评环境搭建
---

输入以下指令进行本地预览：

hexo clean && hexo g && hexo s

hexo clean用于清除缓存，hexo g用于重新生成，hexo s用于启动本地测试服务器

然后部署到网站

hexo deploy  # 或简写 hexo d

当然如果选择在hexo目录下直接写文章也可以使用如下命令，简化了第一步

hexo new post 测试文章

魔改博客

阅读量统计出错

如果参考我刚刚推荐的博客，添加阅读量统计出错，可尝试一下两个办法：
方法一（推荐）：
使用leancloud国际版，LeanCloud
方法二：
将leancloud改回busuanzi

背景图随机出现

基于 JavaScript 的 Hexo Fluid 主题 banner 随机背景图实现 - 竹林里有冰的博客 (zhul.in)
另外推荐几个博客背景图的配图网站：
pexels
优势：搜索功能强大，匹配度高。可以选择尺寸下载，图片质量高，原图分辨率高。访问速度快。
劣势：图片种类没有Pixabay多
Pixabay
优势：图片种类多，扁平风，摄影都有。支持中文(虽然是机翻)访问快。可以选择尺寸下载。
劣势：搜索功能鸡肋，图片质量一般，需要有一定筛选能力！
（以上评价摘自知乎）
pixiv

背景固定（背景贯穿整个博客）

基于hexo的fluid主题的魔改汇总 - GISHAI
一定要注意文件的路径问题：

确保 injector.js 文件存放在themes/fluid/scripts目录中（以fluid为例，该主题默认没有scripts文件夹，需手动创建）

确保 backgroundize.js 文件存放在 themes/fluid/source/js/ 目录中。
确保 backgroundize.css 文件存放在 themes/fluid/source/css/ 目录中。

博客底部添加运行时间

Hexo博客Fluid主题魔改记录 - KEVIN'S BLOG (kevinchu.top)
注意在文件中修改为自己博客创建的时间

fluid主题自定义标签页小图标

在线制作ico图标 | 在线ico图标转换工具方便制作favicon.ico - 比特虫 - Bitbug.net
推荐使用该网站制作标签页小图标
修改主题的_config.yml文件，在语句后添加对应的路径

# 用于浏览器标签的图标
# Icon for browser tab
favicon: /images/favicon.ico 
# 用于苹果设备的图标
# Icon for Apple touch
apple_touch_icon: /images/favicon.ico

以如上命令为例，标签页小图标要存放在themes\fluid\source\images目录下，且应命名为favicon.ico

对文章进行分类/添加标签

修改主题的_config.yml文件中的menu

menu:  
- { key: "home", link: "/", icon: "iconfont icon-home-fill" }  
- { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" }  
- { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" }  
- { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }  
- { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }  
- { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }

在文章开头加入如下命令：

---
title: 一、SQL
date: 2025-04-04 21:40
tags:
- MySQL
categories:
- [MySQL]
---

林下清风