Hexo+Fluid+Obsidian博客搭建及优化

1.前言

搭建这个博客的契机实际上是前段时间和一个学长吃饭的时候看到他自己建的个人博客，我之前也知道现存的相关开源项目十分成熟，然后就是脑瓜一拍开始干（bushi

这倒也算是解决了一直以来的没地方分享东西的问题。我是很想多去写点东西来记录折腾的有趣的各种小东西，记录自己欣赏过的艺术作品，记录自己的生活想法与感受的，很想在现在还有时间的时候多去写点长篇的文章来保护我自己的思考能力和语言表达能力，防止在短视频风暴中迷失自我。但是在哪里写这又是一个问题：发贴吧知乎小红书吧，一个是目前这些论坛的氛围个人不是很喜欢，也懒得天天去迎合氛围去叠甲；发空间或者朋友圈吧，这俩地方又不适合做长篇大论，一段小文字又满足不了我的表达欲，也讲不清楚我想说什么，而且我的微信好友也不一定愿意看；做视频发出来就更不用讲了，耗时间还要考虑社群氛围问题。

而个人博客的方案则很好的满足了我这个需求：我可以在自己的个人博客上随便说随便讲，述我之所想，录我之欲记，毕竟我这算是写给自己看的，也基本上没人来我这看这些文章；一方面这也算是一个有趣的小项目不是嘛？虽然用的是开源项目，但不妨碍我顺便就给前端的那一套东西给了解一下。

前言的最后一段还是献给可能来的读者吧，如果你也想搭建一个这样的个人博客，不妨阅读下去，我将会在这里写一些搭建的过程和个人推荐的写作工作流。

2.搭建

所用到的工具：

  • hexo：博客框架，可以理解为blogs网站的骨架。
  • Fluid：blogs网站的主题，具体的配置按照这个官方文档讲的改就是了，文档十分详细，不再赘述。
  • Github Pages：静态网站托管服务，免费且方便，一个github账号只能有一个。
  • Obsidian：一个文本编辑器，配置好的话十分方便，插件丰富，可以完成模板导入，目录结构文件夹化等任务。
  • Typora：写markdown文件的轻量级编辑器，比自带的记事本多个渲染和快捷键的事儿。

安装

前置依赖

  • Node.js：是一个可以执行 JavaScript 代码的软件程序。更准确地说，Node.js 是一个 JavaScript 运行环境。
  • Git：著名的开源分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Github的Git就是他，可以理解为你的管理文件版本的管家，支持各版本保存、回滚、上传。

Hexo安装

这里的步骤都要在git-bash命令行中做，路径为你要放博客的文件夹下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 全局安装 Hexo 命令行工具（CLI）
# -g 表示全局安装，安装后可在任何目录使用 hexo 命令
# 需要提前安装 Node.js 和 npm（Node.js 包管理器）
npm install -g hexo-cli

# 验证 Hexo 是否安装成功，显示 Hexo 及其相关依赖的版本号
# 如果正常显示版本信息，说明环境配置正确
hexo -v

# 初始化一个新的 Hexo 项目到当前目录下的 my-blog 文件夹
# 该命令会创建项目目录结构并自动下载默认主题 landscape
hexo init my-blog

# 进入项目目录（后续操作都需要在此目录下执行）
cd my-blog

# 安装项目所需的本地依赖包
# 会读取 package.json 中的依赖项，安装到 node_modules 目录
# 这些依赖包括 hexo-server, hexo-deployer-git 等核心模块
npm install

# 生成静态网站文件（编译 Markdown 为 HTML）
# 生成的静态文件会保存在 public 目录中
# 每次内容更新后都需要重新生成
hexo g # 完整命令是 hexo generate

# 启动本地开发服务器（默认端口 4000）
# 访问 http://localhost:4000 可以预览网站
# 支持热更新，修改内容后会自动刷新（但修改配置文件后需要重启服务）
hexo s # 完整命令是 hexo server

之后就能在本机的 http://localhost:4000 预览网站了。

更换主题

本站所用的是Fluid：

1
2
3
4
5
6
7
8
9
10
#具体配置可以参考官方文档(https://hexo.fluid-dev.com/docs/)，写的很详细。
npm install --save hexo-theme-fluid

#安装好后可以在本机4000端口查看效果
hexo clean # 清除已生成的静态网页文件  
hexo g # 重新生成  
hexo s # 本地启动

#如果git已经配置好可以直接上传
hexo d #上传到你配置好的github托管服务器上，然后可以通过网页来查看，具体公网域名就不用管了，这玩意就已经可以在公网上浏览了。

3.写作

本人刚开始用的还是typora，但是每次插入图片，配置笔记属性啥的都要手动做，简直是敲代码届的耻辱好吧，于是就转向Obsidian来写blogs了，这篇文章也算是第一篇用Obsidian来写的。

首先是安装Obsidian，这个不说了直接看官方网站和相关文章：

你要是连markdown也不会写的话，那就先学markdown，挺好使的，你要是信息类行业少不了这个：

具体的可以语法与快捷键结合。

4.发布

先配置一下hexo-deployer-git

1
npm install hexo-deployer-git --save

改一下_config.yml文件

1
2
3
4
5
deploy:  
type: git  
repo: <repository url> # https://github.com/<GitHub用户名>/<GitHub用户名>.github.io.git  
branch: [branch]  
token: [token]

5.工作流（暂时）

  • 使用new指令新建一篇博客
1
hexo new <文章名>
  • 打开obsidian开始写作
  • 写作完了之后，终端本地预览
1
2
hexo g  
hexo s
  • 预览没问题之后，发布
1
hexo d

6.优化

分类树文件夹化（自动分类）

不可否认的是是项目就没有完美的，像是上述介绍的这套流程个人用上去还是有些很不顺的点，比如分类页的话，本来这个按照逻辑的话在本地写博客就应该是按照文件夹的包容关系来分，但是他原生的分类要在每篇博客前面的文件属性里面这样写：

1
2
3
4
5
6
7
8
---
title: Hexo简介
date: 2008-08-08
categories:
  - web开发
  - 前端
  - 博客框架
---

这玩意让我咋管理？你的意思是我要记住每个文件是在那个目录树下？一个字都不能错？这不是给自己找事吗？本来分类就是为了便于管理，这不是本末倒置了吗

于是就去找，发现了个开源项目：

按照他官方文档进行安装配置就行。有一点要注意的是如果存在文件没有分类组的话会发生一些奇妙的事情（好像）。

Git自动推送

在写完前几篇博客后我每次都要手动到git的bash下hexo clean``hexo g``hexo d一遍，很麻烦，然后就是想到为什么不能直接上自动化插件：

具体做法的原文档来源于：

导入模板

obsidian原生支持模板功能，直接在设置里面配置一下路径，写个模板文件就行了

7.后记

本网站对写博客时图片的插入还需要进一步的优化，详情可见这位大佬的博客，本文很多都是从他那来的：

折腾杂项
#折腾的小杂项
Hexo+Fluid+Obsidian博客搭建及优化
http://example.com/2025/04/07/折腾杂项/2025-04-07-搭建自己的博客/
作者
ZHW
发布于
2025年4月7日
许可协议