如何使用HEXO快速搭建个人博客

基于 Hexo + Fluid 主题的博客开发指南

本指南将详细介绍如何使用 Hexo 静态博客框架搭配 Fluid 主题搭建一个美观、功能丰富的个人博客，并部署到 GitHub Pages。

1. 环境准备

1.1 安装 Node.js

Hexo 基于 Node.js，需先安装：
• Windows/macOS：从 Node.js 官网 下载 LTS 版本安装。

• Linux：

1
2
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

验证安装：

1
2
node -v  # 检查 Node.js 版本
npm -v   # 检查 npm 版本

1.2 安装 Git

Hexo 依赖 Git 管理文章和部署：
• Windows/macOS：从 Git 官网 下载安装。

• Linux：

1
sudo apt-get install git

验证安装：

1
git --version

1.3 安装 Hexo
全局安装 Hexo：

1
npm install -g hexo-cli

验证安装：

1
hexo -v

2. 初始化 Hexo 博客

2.1 创建博客项目

1
2
3
hexo init myblog  # 初始化项目
cd myblog         # 进入项目目录
npm install       # 安装依赖

2.2 启动本地服务器

1
hexo clean && hexo server

访问 http://localhost:4000 查看默认博客。

3. 安装 Fluid 主题

3.1 下载 Fluid

在博客目录下执行：

1
npm install --save hexo-theme-fluid

3.2 配置 Fluid

  1. 修改 _config.yml（Hexo 主配置）：

    1
    theme: fluid  # 指定主题

  2. 创建 _config.fluid.yml（Fluid 主题配置）：

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

    然后编辑 _config.fluid.yml 自定义主题样式。

3.3 启用 Fluid

1
hexo clean && hexo g && hexo s

访问 http://localhost:4000 查看 Fluid 主题效果。

4. 配置 Fluid 主题

4.1 基本配置

修改 _config.fluid.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 网站信息
title: "我的博客"
subtitle: "记录技术与生活"
logo: "/images/logo.png"  # 网站 Logo

# 导航栏
navbar:
  menu:
    - { name: "首页", path: "/" }
    - { name: "归档", path: "/archives/" }
    - { name: "关于", path: "/about/" }

# 页脚
footer:
  since: 2023
  powered: true

4.2 代码高亮

Hexo 默认使用 highlight.js，Fluid 支持更美观的代码样式：

1
2
3
code_highlight:
  enable: true
  theme: atom-one-dark  # 可选主题：github、atom-one-light 等

4.3 评论系统

Fluid 支持多种评论插件，如 Valine、Gitalk：

1
2
3
4
5
comments:
  enable: true
  type: valine  # 使用 Valine
  app_id: "your_app_id"  # 从 LeanCloud 获取
  app_key: "your_app_key"

4.4 搜索功能

安装 hexo-generator-search：

1
npm install hexo-generator-search --save

配置 _config.yml：

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

5. 编写文章

5.1 创建新文章

1
hexo new "Hello World"

文件位于 source/_posts/hello-world.md。

5.2 Markdown 语法

1
2
3
4
5
6
7
8
9
10
11
12
---
title: Hello World
date: 2023-10-01
tags: [Hexo, Fluid]
categories: 技术
---

## 这是一篇测试文章

### 代码示例
```python
print("Hello, Fluid!")

图片
使用：! [] ()加载图片，[]内填图片名称，（）填对应路径，注意图片路径可以相对可以绝对。
图片

6. 部署到 GitHub Pages

6.1 创建 GitHub 仓库

  1. 在 GitHub 创建仓库 username.github.io（如 yourname.github.io）。
  2. 本地初始化 Git：
    1
    2
    git init
    git remote add origin https://github.com/yourname/yourname.github.io.git

6.2 安装部署插件

1
npm install hexo-deployer-git --save

6.3 配置 _config.yml

1
2
3
4
deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
  branch: main

6.4 部署

1
hexo clean && hexo g && hexo d

访问 https://yourname.github.io 查看博客。

7. 进阶优化

7.1 自定义 CSS

在 source/css/custom.css 添加：

1
2
3
4
/* 自定义样式 */
.post {
  margin-bottom: 2rem;
}

然后在 _config.fluid.yml 引入：

1
custom_css: /css/custom.css

7.2 添加 Google Analytics

1
2
analytics:
  google: "G-XXXXXXXXXX"  # 替换为你的 GA ID

7.3 使用 CDN 加速

1
2
3
4
cdn:
  enable: true
  js: https://cdn.jsdelivr.net/npm/...
  css: https://cdn.jsdelivr.net/npm/...

8. 常见问题

Q1: 页面样式不生效？
• 执行 hexo clean && hexo g 重新生成。

• 检查 _config.fluid.yml 是否正确配置。

Q2: 部署失败？
• 确保 GitHub 仓库权限正确。

• 检查 _config.yml 的 deploy 配置。

Q3: 如何更换主题颜色？
修改 _config.fluid.yml：

1
2
color:
  primary: "#0066CC"  # 主色调

9. 总结

通过本指南，你可以快速搭建一个基于 Hexo + Fluid 的高颜值博客，并部署到 GitHub Pages。

🚀 Happy Blogging! 🚀

技术
#博客 #学习
如何使用HEXO快速搭建个人博客
http://example.com/2025/04/20/hexo/
作者
Jie Zhao
发布于
2025年4月20日
许可协议