Hexo 博客搭建、远程 IDE 连接编辑与 Fluid 配置教程

大家好，这篇文章记录一套非常适合个人使用的博客搭建方案：使用 Hexo 搭建静态博客，借助远程 IDE 直接连接服务器进行编辑，再配合 Fluid 主题完成网站美化。整套方案上手快、维护简单，非常适合个人知识整理、技术笔记和长期写作。

一、为什么选择 Hexo

Hexo 是一个基于 Node.js 的静态博客框架，它的优点很明显：

  • 搭建速度快
  • 写文章只需要 Markdown
  • 生成的是静态页面，访问速度快
  • 不需要复杂的数据库和后台
  • 适合部署到 Linux 服务器、对象存储或静态托管平台

对于想专注内容输出的人来说，Hexo 是一个非常轻量、非常省心的选择。

二、准备工作

在正式开始之前，建议先准备好以下环境：

  • 一台 Linux 服务器
  • Node.js 环境
  • pnpm 或 npm
  • 一个可访问服务器文件的远程 IDE
  • 一个用于放置静态网页的目录

如果你和我现在的环境类似，可以参考下面这套目录结构：

  • 博客项目目录：/root/blog
  • 生成后的静态文件目录：/root/blog/public
  • 网站部署目录：/var/www/hexo

三、初始化 Hexo 博客

如果你还没有博客项目，可以先初始化一个。

1
2
3
4
mkdir -p /root/blog
cd /root/blog
pnpm dlx hexo-cli init .
pnpm install

初始化完成后，项目里通常会有这些核心文件：

  • _config.yml：Hexo 全站配置
  • source/_posts/：文章目录
  • themes/：主题目录
  • package.json：依赖配置

日常最常接触的，其实主要就是 _config.yml 和 source/_posts/。

四、连接远程 IDE 直接编辑服务器博客

如果你不想每次都在终端里编辑文件，那么最方便的方式就是使用远程 IDE 直接连接服务器。

典型流程如下：

  1. 在本地打开支持远程 SSH 的 IDE
  2. 通过 SSH 连接你的服务器
  3. 打开博客目录 /root/blog
  4. 直接在 IDE 中编辑 _config.yml、_config.fluid.yml 和 source/_posts/ 下的文章文件

这样做的好处是：

  • 改配置更直观
  • 写 Markdown 更舒服
  • 上传图片更方便
  • 生成与部署命令仍然在服务器本地执行，不容易出路径问题

如果你平时写文章比较多，这种方式会比纯命令行轻松很多。

五、安装 Fluid 主题

Hexo 默认主题比较简洁，如果你希望博客更现代、更适合中文内容展示，Fluid 是一个非常不错的选择。

在博客根目录执行：

1
2
cd /root/blog
pnpm install hexo-theme-fluid

安装完成后，修改 Hexo 根配置文件 _config.yml：

1
2
theme: fluid
language: zh-CN

然后把主题默认配置复制到博客根目录，生成一个独立的 Fluid 配置文件：

1
cp /root/blog/node_modules/hexo-theme-fluid/_config.yml /root/blog/_config.fluid.yml

这样后续你就可以通过 _config.fluid.yml 来定制主题，而不用直接改主题包里的文件。

六、配置站点名称与首页文案

博客最常修改的两个地方，一个是站点标题，一个是首页中间显示的标语。

1. 修改网站名称

在 _config.yml 中：

1
title: 知行笔记

2. 修改导航栏左上角标题

在 _config.fluid.yml 中找到：

1
2
navbar:
  blog_title: "知行笔记"

3. 修改首页中间的标语

同样在 _config.fluid.yml 中找到首页副标题设置：

1
2
3
4
index:
  slogan:
    enable: true
    text: "知之愈明，则行之愈笃。"

完成这几处后，你的网站就会从默认主题文案变成自己的博客品牌风格。

七、上传站点图标与文章封面

为了让博客更有辨识度，建议准备两类图片：

  • 网站图标（favicon）
  • 文章封面图

1. 图片应该放在哪里

建议统一放在：

1
/root/blog/source/img/

这个目录下的图片在生成站点后会被映射为：

1
/img/文件名

例如：

  • /root/blog/source/img/favicon.jpeg → /img/favicon.jpeg
  • /root/blog/source/img/cover.jpeg → /img/cover.jpeg

2. 设置网站图标

在 _config.fluid.yml 中修改：

1
2
favicon: /img/favicon.jpeg
apple_touch_icon: /img/favicon.jpeg

3. 给文章设置封面图

在文章头部 Front Matter 中加入：

1
index_img: /img/cover.jpeg

这样文章在首页列表中就会显示封面图。

八、发布文章时如何设置分类和标签

Hexo 的分类和标签直接写在文章头部。

例如：

1
2
3
4
5
6
7
8
9
---
title: Hello World
date: 2026-04-13
index_img: /img/cover.jpeg
categories:
  - 博客
tags:
  - 博客
---

说明如下：

  • categories：文章分类
  • tags：文章标签
  • index_img：首页文章封面图

如果只写一个分类和一个标签，也推荐用列表格式，这样后续扩展更方便。

九、常用发布命令

在这套博客方案里，我实际使用的发布命令如下：

1
2
3
4
cd /root/blog
npx hexo clean
npx hexo generate
rsync -av --delete /root/blog/public/ /var/www/hexo/

这三步分别表示：

  • hexo clean：清理缓存和旧生成文件
  • hexo generate：重新生成静态页面
  • rsync：把生成后的页面同步到网站目录

如果你愿意，还可以把这些命令写进一个脚本里，之后一键发布。

十、推荐的日常写作流程

我比较推荐下面这套流程：

  1. 通过远程 IDE 连接服务器
  2. 在 source/_posts/ 中新建 Markdown 文章
  3. 把配图上传到 source/img/
  4. 在文章头部写好标题、日期、分类、标签、封面图
  5. 保存后执行生成和部署命令
  6. 刷新网页检查效果

这样整个博客维护会非常顺手，尤其适合持续更新的个人博客。

十一、一个完整的文章模板

你以后可以直接参考这个模板来写：

1
2
3
4
5
6
7
8
9
10
11
---
title: 文章标题
date: 2026-04-13 12:00:00
index_img: /img/cover.jpeg
categories:
  - 博客
tags:
  - 博客
---

这里开始写正文内容。

十二、结语

如果你希望拥有一个简单、稳定、可控的个人博客方案，那么 Hexo + 远程 IDE + Fluid 这套组合非常值得长期使用。

它的优势并不在于功能有多复杂，而在于：

  • 写作成本低
  • 配置透明
  • 页面美观
  • 迁移方便
  • 非常适合个人知识沉淀

搭好以后，你只需要持续写作，就能慢慢把博客变成自己的知识花园。

如果后续你还想继续完善博客，可以再逐步增加以下内容：

  • 关于我页面
  • 友情链接页面
  • 评论系统
  • 站内搜索
  • 自定义首页 Banner
  • 文章置顶与归档整理

先把博客跑起来，再一点点变好，就是最舒服的节奏。

博客
#博客
Hexo 博客搭建、远程 IDE 连接编辑与 Fluid 配置教程
http://example.com/2026/04/13/hexo-fluid-remote-ide-guide/
作者
John Doe
发布于
2026年4月13日
许可协议