Hexo + Butterfly 搭建个人博客

用 Hexo + Butterfly 主题，从零搭建一个漂亮的个人博客，并部署到服务器。

为什么选 Hexo + Butterfly

• Hexo：成熟的静态博客框架，生成纯静态文件，部署简单
• Butterfly：最流行的 Hexo 主题，功能丰富，颜值高，支持 Heo 风格

一、环境准备

需要先装好：

• Node.js（建议 18+）
• Git

# 安装 Hexo 命令行工具
npm install -g hexo-cli

二、初始化博客

# 创建博客项目
hexo init blog
cd blog
npm install

三、安装 Butterfly 主题

# 下载主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

# 安装主题依赖
npm install hexo-renderer-pug hexo-renderer-stylus --save

修改 _config.yml，启用主题：

theme: butterfly

四、基础配置

编辑 _config.yml：

# 站点信息
title: 我的博客
subtitle: '分享技术与生活'
description: '个人技术博客'
author: 你的名字
language: zh-CN
timezone: 'Asia/Shanghai'

# URL（改成你的域名）
url: https://your-domain.com

五、创建独立主题配置

把主题的配置复制一份出来，这样升级主题不会丢配置：

cp themes/butterfly/_config.yml _config.butterfly.yml

修改 _config.butterfly.yml 的导航菜单：

menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  分类: /categories/ || fas fa-folder-open
  标签: /tags/ || fas fa-tags
  关于: /about/ || fas fa-heart

六、创建必要页面

# 分类页
hexo new page categories
# 标签页
hexo new page tags
# 关于页
hexo new page about

给分类页和标签页加 type 声明（编辑生成的 index.md）：

---
title: 分类
type: categories
---

七、写第一篇文章

hexo new "我的第一篇文章"

文章在 source/_posts/ 下，用 Markdown 写：

---
title: 我的第一篇文章
date: 2026-07-15
tags:
  - 随笔
categories:
  - 生活
---

正文内容在这里。

八、本地预览

hexo server

浏览器打开 http://localhost:4000 看效果。

九、部署到服务器

生成静态文件

hexo clean && hexo generate

生成的文件在 public/ 目录。

上传到服务器

# 把 public/ 下的文件传到服务器
scp -r public/* root@your-server:/www/wwwroot/your-domain/

Nginx 配置

server {
    listen 80;
    server_name your-domain.com;
    root /www/wwwroot/your-domain;
    index index.html;

    location / {
        try_files $uri $uri/ $uri.html /index.html;
    }
}

十、后续更新

每次改完内容，3 步部署：

hexo clean && hexo generate
scp -r public/* root@your-server:/www/wwwroot/your-domain/

---

⬅️ 返回教程目录