从零开始：使用 GitHub + Hexo + Fluid 搭建个性化博客（附魔改与使用教程）
<h1 id="前言">前言</h1><p>目前网上关于这类方法的技术博客数量众多且内容繁杂。因此，这篇博客主要是对这些资源进行系统化的整理，并记录我在搭建过程中遇到的一些问题和解决方法。建议大家结合我推荐的博客一起阅读，同时参考本文中提到一些bug对应的解决办法。由于文章篇幅较长，您可以根据目录选择性查看所需内容。</p>
<h1 id="搭建博客">搭建博客</h1>
<p>推荐文章：<br>
GitHub Pages + Hexo搭建个人博客网站，史上最全教程_hexo博客-CSDN博客</p>
<h2 id="安装主题时git报错">安装主题时git报错</h2>
<p>取消代理设置</p>
<pre><code>git config --global --unset http.proxy
git config --global --unset https.proxy
</code></pre>
<h2 id="hexo图片不显示">hexo图片不显示</h2>
<p>解决办法：使用图床<br>
Obsidian+PicGo+Gitee搭建免费图床_obsidian 图床-CSDN博客<br>
同时，也推荐使用腾讯云、阿里云的对象存储服务存储图片，然后在文章加入图片的链接。</p>
<h3 id="使用图床之后依然不显示图片">使用图床之后依然不显示图片</h3>
<p>如果使用图床之后依然不显示图片，不要慌，由于图床的防盗链机制，只允许本网站显示图片，外部网站加载图片就会报错。<br>
解决办法：<br>
以fluid主题为例，根据路径<code>themes\fluid\layout\_partial\head.ejs</code>找到<code>head.ejs</code>文件，在文件中添加</p>
<pre><code><meta name="referrer" content="no-referrer">
</code></pre>
<p><img src="https://gitee.com/techstream/mypicture/raw/master/img/20250405204632480.png" alt="image.png" loading="lazy"></p>
<h2 id="我目前的工作流">我目前的工作流</h2>
<ul>
<li>在obsdian写好md文件，然后把md文件粘贴到hexo的-post文件夹里在文章最开头额外加入以下语句作为标题：</li>
</ul>
<pre><code>---
title: 黑马点评环境搭建
---
</code></pre>
<ul>
<li>输入以下指令进行本地预览：</li>
</ul>
<pre><code>hexo clean && hexo g && hexo s
</code></pre>
<p><code>hexo clean</code>用于清除缓存，<code>hexo g</code>用于重新生成，<code>hexo s</code>用于启动本地测试服务器</p>
<ul>
<li>然后部署到网站</li>
</ul>
<pre><code>hexo deploy# 或简写 hexo d
</code></pre>
<p>当然如果选择在hexo目录下直接写文章也可以使用如下命令，简化了第一步</p>
<pre><code>hexo new post 测试文章
</code></pre>
<h2 id="魔改博客">魔改博客</h2>
<h2 id="阅读量统计出错">阅读量统计出错</h2>
<p>如果参考我刚刚推荐的博客，添加阅读量统计出错，可尝试一下两个办法：<br>
方法一（推荐）：<br>
使用leancloud国际版，LeanCloud<br>
方法二：<br>
将leancloud改回busuanzi</p>
<h2 id="背景图随机出现">背景图随机出现</h2>
<p>基于 JavaScript 的 Hexo Fluid 主题 banner 随机背景图实现 - 竹林里有冰的博客 (zhul.in)<br>
另外推荐几个博客背景图的配图网站：<br>
pexels<br>
优势：搜索功能强大，匹配度高。可以选择尺寸下载，图片质量高，原图分辨率高。访问速度快。<br>
劣势：图片种类没有Pixabay多<br>
Pixabay<br>
优势：图片种类多，扁平风，摄影都有。支持中文(虽然是机翻)访问快。可以选择尺寸下载。 <br>
劣势：搜索功能鸡肋，图片质量一般，需要有一定筛选能力！<br>
（以上评价摘自知乎）<br>
pixiv</p>
<h2 id="背景固定背景贯穿整个博客">背景固定（背景贯穿整个博客）</h2>
<p>基于hexo的fluid主题的魔改汇总 - GISHAI<br>
一定要注意文件的路径问题：</p>
<ul>
<li>确保 <code>injector.js</code> 文件存放在<code>themes/fluid/scripts</code>目录中（以fluid为例，该主题默认没有scripts文件夹，需手动创建）</li>
</ul>
<ul>
<li>确保 <code>backgroundize.js</code> 文件存放在 <code>themes/fluid/source/js/</code> 目录中。</li>
<li>确保 <code>backgroundize.css</code> 文件存放在 <code>themes/fluid/source/css/</code> 目录中。</li>
</ul>
<h2 id="博客底部添加运行时间">博客底部添加运行时间</h2>
<p>Hexo博客Fluid主题魔改记录 - KEVIN'S BLOG (kevinchu.top)<br>
注意在文件中修改为自己博客创建的时间</p>
<h2 id="fluid主题自定义标签页小图标">fluid主题自定义标签页小图标</h2>
<p>在线制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net<br>
推荐使用该网站制作标签页小图标<br>
修改主题的_config.yml文件，在语句后添加对应的路径</p>
<pre><code># 用于浏览器标签的图标
# Icon for browser tab
favicon: /images/favicon.ico
# 用于苹果设备的图标
# Icon for Apple touch
apple_touch_icon: /images/favicon.ico
</code></pre>
<p>以如上命令为例，标签页小图标要存放在<code>themes\fluid\source\images</code>目录下，且应命名为favicon.ico</p>
<h2 id="对文章进行分类添加标签">对文章进行分类/添加标签</h2>
<ul>
<li>修改主题的_config.yml文件中的menu</li>
</ul>
<pre><code>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" }
</code></pre>
<ul>
<li>在文章开头加入如下命令：</li>
</ul>
<pre><code>---
title: 一、SQL
date: 2025-04-04 21:40
tags:
- MySQL
categories:
-
---
</code></pre>
<h2 id="更多魔改文章推荐">更多魔改文章推荐</h2>
<p>Hexo&Fluid魔改笔记 - Asteri5m的小破站<br>
开始使用 | Hexo Fluid 用户手册 (fluid-dev.com)</p><br><br>
来源：https://www.cnblogs.com/codebreeze/p/18810560
頁:
[1]