嗨，各位想拥有自己博客的小伙伴们～ 今天超开心能跟大家分享如何从 0 开始搭建一个超美的 Hexo 博客，还会手把手教大家装上颜值爆表的 Butterfly 主题！全程保姆级教程，就算你是第一次接触，跟着做也绝对没问题，快来一起试试看吧～ 😉
（本方法为 Windows 安装 hexo 方法）

一、准备工作：这些工具先装好哦～

在正式开始之前，我们需要先准备好几个 “必备武器”，别担心，安装过程都很简单的！

  1. Node.js：Hexo 是基于 Node.js 运行的，所以这个必须有～
  • 👉 下载地址：Node.js 官网（推荐选 LTS 版本，稳定又省心）
  • 安装好之后，打开电脑的命令提示符（Windows）或终端（Mac），输入 node -v 和 npm -v，如果能看到版本号，就说明安装成功啦！是不是很简单～
  1. Git：用来管理代码和部署博客的好帮手～
  • 👉 下载地址：Git 官网
  • 安装时一路默认下一步就好，安装完成后输入 git –version，出现版本信息就 OK 啦～
  1. 代码编辑器（选一个你喜欢的）：
  • 推荐 VS Code，免费又好用，还能装各种方便的插件，写文章、改配置都超顺手！
  • 👉 VS Code 官网
  • 好啦，准备工作完成，是不是已经有点小期待了？接下来正式开始搭建博客咯～ 🎉

二、安装 Hexo：让我们的博客 “诞生” 吧！

  1. 打开命令行工具（Windows 用 cmd 或 PowerShell，Mac 用终端），先找个地方建个文件夹放博客，比如我在桌面建了个 MyBlog 文件夹，然后在命令行里进入这个文件夹：
1
cd 桌面/MyBlog  # 这里换成你的文件夹路径哦
  1. 安装 Hexo 脚手架：输入下面的命令，耐心等一会儿，npm 会帮我们下载需要的文件～
1
npm install -g hexo-cli

安装完成后，输入 hexo -v，看到 Hexo 的版本信息就说明安装成功啦！开心～ 😊

  1. 初始化博客：在刚才的文件夹里，输入这个命令，Hexo 会帮我们生成一个博客的基本框架：
1
hexo init

这个过程可能需要几分钟，慢慢等它跑完，跑完之后你会发现 MyBlog 文件夹里多了好多文件和文件夹，这就是我们博客的 “骨架” 啦～

  1. 安装依赖包：继续输入下面的命令，安装博客运行需要的依赖：
1
npm install
  1. 试试效果吧！输入这两个命令，启动本地服务器：
1
2
hexo g  # 生成静态文件（g 是 generate 的缩写哦）
hexo s  # 启动服务器（s 是 server 的缩写）

看到 Hexo is running at http://localhost:4000/ 这样的提示，就可以打开浏览器，输入 http://localhost:4000 看看啦！是不是已经有一个简单的博客页面了？虽然默认主题比较朴素，但这是我们自己搭建的第一个博客呀，超有成就感有没有！🥳
（想关掉服务器的话，在命令行按 Ctrl + C 就好啦～）

三、安装 Butterfly 主题：给博客换身 “漂亮衣服”！

默认主题虽然简洁，但咱们肯定想让博客更美观、更有个性对不对？Butterfly 主题就是个超棒的选择，颜值高、功能全，还很容易上手，快来装上试试看～

  1. 下载 Butterfly 主题：先确保你还在博客的根目录（就是 MyBlog 文件夹），然后输入下面的命令，把主题下载到 themes 文件夹里：
1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

等它下载完成，你就可以在 themes 文件夹里看到 butterfly 这个文件夹啦，里面就是主题的所有文件哦～

  1. 安装主题需要的依赖：Butterfly 主题需要一些额外的依赖包，输入下面的命令安装：
1
npm install hexo-renderer-pug hexo-renderer-stylus --save

这个很快就好，安装完成就可以进行下一步啦～

  1. 启用 Butterfly 主题：
    打开博客根目录下的 _config.yml 文件（这个是 Hexo 的全局配置文件，建议用 VS Code 打开，编辑起来更方便），找到 theme 这一行，把默认的 theme: landscape 改成 theme: butterfly，就像这样：
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly  # 这里改成 butterfly 哦

改完之后记得保存文件呀～

  1. 复制主题配置文件（重要！）：
    为了方便以后修改主题配置，我们最好把主题文件夹里的配置文件复制到博客根目录。在 themes/butterfly 文件夹里，有个 _config.yml 文件，把它复制一份到博客根目录（就是 MyBlog 文件夹），并改名为 _config.butterfly.yml。这样以后我们修改主题配置，就直接改这个 _config.butterfly.yml 文件就好啦，不用担心升级主题时配置会丢失～

  2. 再看看效果：
    再次输入 hexo g 和 hexo s，然后打开 http://localhost:4000 看看，是不是瞬间变漂亮了？Butterfly 主题的默认样式就已经很赞了，清新又大气，有没有眼前一亮的感觉？✨

四、简单配置：让博客更 “懂你”～

现在博客已经搭起来了，但还有些基本信息需要改成我们自己的，比如博客名称、作者名之类的～
打开根目录的 _config.yml 文件，找到这些地方修改：

1
2
3
4
5
6
7
8
# Site
title: 你的博客名称  # 比如“我的小窝”
subtitle: ''  # 副标题，可选
description: 这里写博客的描述～  # 比如“记录生活和学习的点滴”
keywords:
author: 你的名字  # 比如“小明”
language: zh-CN  # 语言设置为中文
timezone: ''  # 时区不用改，默认就好

改完保存，再用 hexo g 重新生成一下，刷新页面就能看到变化啦～ 是不是感觉博客更有 “自己的味道” 了？😊

五、写第一篇文章：记录你的心情吧～

博客搭好了，当然要写第一篇文章啦！超级简单，输入这个命令：

1
hexo new "我的第一篇博客"  # 引号里是文章标题，可以自己改哦

然后你会在 source/_posts 文件夹里看到一个 我的第一篇博客.md 的文件，用 VS Code 打开它，就可以开始写文章啦～
文章开头的 — 之间是一些配置信息，比如：

1
2
3
4
5
6
7
8
9
---
title: 我的第一篇博客
date: 2025-08-21 15:30:00  # 发布时间，自动生成的
tags:  # 标签，可以加多个
- 博客
- Hexo
categories:  # 分类
- 教程
---

在 — 下面就可以用 Markdown 语法写正文啦，比如：

1
2
3
4
5
6
7
8
9
10
# 欢迎来到我的博客～

这是我用 Hexo + Butterfly 搭建的博客，是不是很赞？😉

## 我以后会在这里分享：
- 学习笔记
- 生活趣事
- 各种好玩的东西

一起加油呀！💪

六、最后想说的话～

到这里，我们已经成功从 0 开始搭建了一个 Hexo 博客，还装上了美美的 Butterfly 主题，甚至写出了第一篇文章，是不是觉得也没有很难？其实很多看似复杂的东西，只要一步步来，都能搞定的～
Butterfly 主题还有很多超棒的功能，比如自定义导航栏、添加相册、设置评论系统等等，大家可以慢慢探索，把博客打造成自己喜欢的样子～ 过程中如果遇到问题也别着急，多查查官方文档或者问问社区，总会解决的！
希望这篇教程能帮到想搭建博客的你，祝大家都能拥有一个属于自己的小天地，记录生活，分享美好～ 下篇文章再见啦！👋