这篇文章将手把手记录我如何搭建自己的技术博客，涵盖 Hexo 博客初始化、主题美化、内容管理到自动部署的完整流程，希望对也想打造自己博客的你有所帮助。

一、Hexo 初始化与基础配置

Hexo 是一款基于 Node.js 的静态博客框架，轻量、快速，非常适合开发者记录技术文章。

初始化项目结构

确保本地安装了 Node.js 和 Git，然后全局安装 Hexo：

1
2
3
4
 npm install -g hexo-cli
 hexo init my-blog
 cd my-blog
 npm install

项目初始化完成后，会看到几个关键目录和文件，比如：

  • source/：文章目录
  • themes/：主题目录
  • _config.yml：博客全局配置文件

基本信息配置

**打开根目录下的 **_config.yml，修改以下内容来设置站点信息：

1
2
3
4
5
 title: Johnny-Zhao's TechBlog
 subtitle: KEEP FIGHTING
 author: Johnny-Zhao
 language: zh-CN
 url: https://zjncs.github.io

接着，安装依赖（推荐使用 yarn）：

1
 yarn install

这样 Hexo 的核心环境就搭好了。

二、美化博客：Butterfly 主题配置

一个好看的博客主题，不光提升观感，还能激发写作动力。我选择的是 Butterfly —— 颜值高、功能全、社区活跃。

启用主题

**从 **Butterfly 仓库 克隆到 themes 目录，并在 _config.yml 中指定：

1
 theme: butterfly

个性化配置

**主题的详细配置写在 **_config.butterfly.yml 中，这里记录几个关键改动：

  • 夜间模式：支持自动/手动切换
  • 首页背景图 + 动态头像：加点动画效果，看着更灵动
  • 副标题打字机效果：配上「愿你历尽千帆，归来仍是少年」等短句
  • 侧边栏组件：作者简介、公告栏、分类、标签、归档一应俱全
  • 评论系统：集成 Giscus，评论数据保存在 GitHub 仓库中
  • 代码块美化：mac 风格 + 一键复制 + 语言标识
  • 数学公式支持：开启 KaTeX，写公式不再痛苦

Hexo Pro：桌面端可视化管理利器

**除了传统命令行操作，我还使用了 **Hexo Pro —— 一款基于 Electron 的桌面客户端。它支持：

  • 图形化管理文章、分类、标签；
  • 一键新建、编辑、发布文章；
  • 直接预览博客样式；
  • 支持 Hexo 插件管理与主题切换；
  • 提供 Windows/macOS 版本，开箱即用。

这对不熟悉命令行或希望更高效率地管理博客内容的用户非常友好，特别适合日常频繁写作的技术人。

Qexo：极致轻量的后端服务推荐

**如果你想更进一步，让博客拥有完整的后台管理系统，不妨试试 **Qexo。

Qexo 是一个为 Hexo 博客设计的轻量级后台，它的特点包括：

  • 支持在线创建/修改文章；
  • 自带图床功能，方便插入图片；
  • 可搭配 Cloudflare Pages、Vercel、GitHub Pages 等平台部署；
  • 极简风格 UI，操作直观、性能出色；
  • 支持 GitHub/Gitee 登录；
  • 与 Hexo 博客仓库无缝连接，自动提交 PR 实现文章管理。

这对于想在手机或浏览器上随时写作的朋友来说，非常实用。

**💡 **个人建议：Hexo Pro 更适合桌面端写作和内容管理，Qexo 则提供了一个轻量在线 CMS 管理界面，两者可以结合使用，让你的博客写作体验更上一层楼。