🎯 前言

在这个信息爆炸的时代，拥有一个属于自己的博客平台变得越来越重要。今天我将分享如何使用 Hexo + Butterfly主题 搭建一个既美观又功能强大的个人博客。

为什么选择 Hexo + Butterfly？

  • Hexo: 快速、简洁且高效的静态站点生成器
  • Butterfly: 功能丰富、界面优雅的Hexo主题
  • GitHub Pages: 免费的静态网站托管服务
  • 自定义域名: 提升博客的专业性

🛠️ 环境准备

系统要求

  • Node.js 16.x 或更高版本
  • Git
  • 文本编辑器（推荐VS Code）

安装Node.js

1
2
3
4
5
6
# 检查Node.js版本
node --version
npm --version

# 如果未安装，请前往官网下载安装
# https://nodejs.org/

📦 Hexo安装与配置

1. 全局安装Hexo CLI

1
npm install -g hexo-cli

2. 创建博客项目

1
2
3
4
5
6
# 创建新的Hexo项目
hexo init my-blog
cd my-blog

# 安装依赖
npm install

3. 项目结构概览

1
2
3
4
5
6
7
8
my-blog/
├── _config.yml          # 站点配置文件
├── package.json         # 项目依赖
├── scaffolds/           # 模板文件夹
├── source/              # 资源文件夹
│   ├── _drafts/         # 草稿
│   └── _posts/          # 文章
└── themes/              # 主题文件夹

🦋 Butterfly主题安装

方法一：NPM安装（推荐）

1
npm install hexo-theme-butterfly

方法二：Git克隆

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

主题配置

  1. 修改站点配置文件 _config.yml：

    1
    theme: butterfly

  2. 创建主题配置文件：

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

⚙️ 核心配置详解

站点配置 (_config.yml)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 基本信息
title: 重启纪元
subtitle: 启航新征程
description: 自能生羽翼，何必仰云梯
author: 毛毛
language: zh-CN
timezone: Asia/Shanghai

# URL配置
url: https://maomao725.top
permalink: :year/:month/:day/:title/

# 主题配置
theme: butterfly

Butterfly主题配置要点

1. 导航菜单

1
2
3
4
5
menu:
  首页: / || fas fa-home
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  关于: /about/ || fas fa-heart

2. 头像和背景图片

1
2
3
4
5
6
avatar:
  img: /img/avatar.jpg
  effect: true

index_img: /img/background.png
default_top_img: /img/background.png

3. 社交链接

1
2
3
social:
  fab fa-github: https://github.com/maomao725 || Github
  fas fa-envelope: mailto:yejiale25@gmail || Email

4. 搜索功能

1
2
3
local_search:
  enable: true
  preload: true

🎨 个性化定制

1. 添加自定义样式

创建 source/css/custom.css：

1
2
3
4
/* 自定义样式 */
.custom-class {
    /* 你的样式 */
}

2. 添加网站图标

将 favicon.ico 放置在 source/ 目录下。

3. 配置代码高亮

1
2
3
highlight_theme: light
highlight_copy: true
highlight_lang: true

🚀 部署到GitHub Pages

1. 创建GitHub仓库

创建名为 username.github.io 的仓库。

2. 配置部署

安装部署插件：

1
npm install hexo-deployer-git --save

配置 _config.yml：

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

3. GitHub Actions自动部署

创建 .github/workflows/deploy.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
name: Deploy Blog

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install and Build
        run: |
          npm install
          npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

🔧 优化建议

1. SEO优化

1
2
3
4
5
6
# 安装SEO插件
npm install hexo-generator-sitemap --save

# 配置站点地图
sitemap:
  path: sitemap.xml

2. 性能优化

1
2
3
# 启用懒加载
lazyload:
  enable: true

3. 搜索优化

1
npm install hexo-generator-searchdb --save

📝 写作技巧

1. 文章Front-matter

1
2
3
4
5
6
7
8
9
10
11
---
title: 文章标题
date: 2024-09-14 10:00:00
tags:
  - 标签1
  - 标签2
categories:
  - 分类名称
cover: /img/cover.jpg
description: 文章描述
---

2. 常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 新建文章
hexo new post "文章标题"

# 新建页面
hexo new page "页面名称"

# 生成静态文件
hexo generate

# 启动本地服务器
hexo server

# 部署
hexo deploy

🌐 自定义域名配置

1. 添加CNAME文件

在 source/ 目录下创建 CNAME 文件：

1
yourdomain.com

2. 配置DNS解析

在域名提供商处添加CNAME记录：

1
2
3
类型: CNAME
名称: @（或www）
值: username.github.io

🔍 常见问题解决

1. 主题更新问题

1
npm update hexo-theme-butterfly

2. 构建失败

检查配置文件语法，确保YAML格式正确。

3. 图片不显示

检查图片路径，确保相对路径正确。

🎊 总结

通过以上步骤，我们成功搭建了一个功能完整、界面优雅的个人博客。Hexo + Butterfly 的组合为我们提供了：

  • 🚀 快速生成: 秒级的静态文件生成
  • 🎨 美观界面: 现代化的UI设计
  • 📱 响应式设计: 完美适配各种设备
  • 🔍 SEO友好: 良好的搜索引擎优化
  • 🛠️ 高度可定制: 丰富的配置选项

下一步计划

  • 学习Markdown语法，提升写作效率
  • 探索更多主题功能，如评论系统、统计分析
  • 定期备份博客数据，保障内容安全
  • 持续创作优质内容，建立个人品牌

“The best blogs are those that teach you something new every time you visit.”

最好的博客是那些每次访问都能让你学到新东西的博客。

愿你的博客之旅充满收获与快乐！ ✨

📚 参考资源