当前位置: 首页 > news >正文

Hexo + Butterfly + Vercel 完整个人Blog部署指南

🦋 Hexo + Butterfly + Vercel 完整个人Blog部署指南

第一步:本地环境准备

1. 安装Node.js和Hexo
# 安装Hexo CLI
npm install -g hexo-cli# 创建博客项目
hexo init my-blog
cd my-blog
npm install
2. 安装Butterfly主题
# 方法一:npm安装(推荐)
npm install hexo-theme-butterfly# 方法二:Git克隆
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

第二步:配置Butterfly主题

1. 修改站点配置 _config.yml
# 基本信息
title: Your Blog Name
subtitle: ''
description: 'Your blog description'
keywords: 'blog,hexo,butterfly'
author: Your Name
language: zh-CN
timezone: 'Asia/Shanghai'# URL配置
url: https://your-blog.vercel.app
permalink: :year/:month/:day/:title/# 主题设置
theme: butterfly# 部署配置
deploy:type: ''
2. 创建主题配置文件
# 复制主题配置到根目录(推荐方式)
cp node_modules/hexo-theme-butterfly/_config.yml _config.butterfly.yml# 或者如果是git克隆的主题
cp themes/butterfly/_config.yml _config.butterfly.yml
3. 配置 _config.butterfly.yml(核心配置)
# 导航菜单
menu:首页: / || fas fa-home归档: /archives/ || fas fa-archive标签: /tags/ || fas fa-tags分类: /categories/ || fas fa-folder-open关于: /about/ || fas fa-heart# 代码高亮
highlight_theme: light #  light dark high_contrast
highlight_copy: true # 复制按钮
highlight_lang: true # 显示语言
highlight_shrink: false # 代码框展开# 社交链接
social:fab fa-github: https://github.com/your-username || Githubfas fa-envelope: mailto:your-email@example.com || Email# 头像
avatar:img: https://your-avatar-url.jpgeffect: false# 网站背景
background: url(https://your-background-image.jpg)# 打字效果
subtitle:enable: trueeffect: truesource: falsesub:- 欢迎来到我的博客- Welcome to my blog- 分享技术与生活# 文章封面
cover:index_enable: trueaside_enable: truearchives_enable: truedefault_cover:- https://example.com/img/default1.jpg- https://example.com/img/default2.jpg# 评论系统(推荐Giscus)
comments:use: Giscustext: truelazyload: falsecount: falsecard_post_count: falsegiscus:repo: your-username/your-reporepo_id: your-repo-idcategory_id: your-category-idtheme:light: lightdark: darkoption:

第三步:创建必要页面

# 创建分类页面
hexo new page categories
# 编辑 source/categories/index.md
---
title: 分类
date: 2025-07-08
type: "categories"
---# 创建标签页面
hexo new page tags
# 编辑 source/tags/index.md
---
title: 标签
date: 2025-07-08
type: "tags"
---# 创建关于页面
hexo new page about
# 编辑 source/about/index.md
---
title: 关于
date: 2025-07-08
---# 这里写关于你的介绍

第四步:创建第一篇文章

hexo new post "我的第一篇博客"

编辑生成的文件:

---
title: 我的第一篇博客
date: 2025-07-08 17:49:00
tags: - 博客- Hexo
categories: - 技术分享
cover: http://syi4w5o08.hn-bkt.clouddn.com/picgo/20250708230348.png
---# 欢迎来到我的博客这是我使用 Hexo + Butterfly 主题搭建的博客!<!-- more -->## 特色功能- 🎨 美观的Butterfly主题
- 📱 响应式设计
- 🚀 快速加载
- 💬 评论系统
- 🔍 搜索功能

第五步:本地预览

# 清理并生成
hexo clean && hexo generate# 启动本地服务器
hexo server#或者
hexo clean && hexo generate && hexo server
# 访问 http://localhost:4000 预览

第六步:部署到Vercel

1. 推送到GitHub
# 初始化Git(如果还没有)
git init
git add .
git commit -m "Initial commit"# 推送到GitHubgit remote add origin https://github.com/your-username/your-blog.git
git branch -M main
git push -u origin main
2. 连接Vercel
  1. 访问 vercel.com
  2. 使用GitHub账号登录
  3. 点击 “New Project”
  4. 选择你的博客仓库
  5. 配置构建设置:
    Framework Preset: Other
    Build Command: npm run build
    Output Directory: public
    Install Command: npm install
    
3. 添加构建脚本到 package.json
{"scripts": {"build": "hexo clean && hexo generate","dev": "hexo server"}
}
4. 创建 vercel.json(可选优化)
{"builds": [{"src": "package.json","use": "@vercel/static-build"}]
}

第七步:优化配置

1. 安装推荐插件
npm install hexo-generator-searchdb --save
npm install hexo-wordcount --save
npm install hexo-generator-feed --save
2. 配置搜索功能

_config.yml 添加:

search:path: search.xmlfield: postcontent: true
3. 配置RSS
feed:enable: truetype: atompath: atom.xmllimit: 20

🎯 写作工作流

# 1. 创建新文章
hexo new post "文章标题"# 2. 编辑文章
# 在 source/_posts/ 目录下编辑# 3. 本地预览
hexo server# 4. 推送发布
git add .
git commit -m "新增文章:文章标题"
git push# Vercel会自动构建部署

🔧 常用命令

hexo new [layout] <title>    # 新建文章
hexo generate               # 生成静态文件
hexo server                # 启动本地服务器
hexo deploy                # 部署网站
hexo clean                 # 清除缓存文件
http://www.lryc.cn/news/583633.html

相关文章:

  • Flask3.1打造极简CMS系统
  • 自动化Trae Apollo参数解释的批量获取
  • 股权结构解析
  • SpringBoot集成文件 - 大文件的上传(异步,分片,断点续传和秒传)
  • 专题一_双指针_查找总价格为目标值的两个商品
  • 拼多多正在错失即时零售?
  • ECR仓库CloudFormation模板完整指南
  • 【每日算法】专题六_模拟
  • WPF学习笔记(27)科学计算器
  • 1、专栏介绍以及目录
  • 周立功汽车软件ZXDoc深度解析:新能源汽车开发新基建的破局之道
  • eggNOG数据库注释文件
  • 以太网基础④IP 协议介绍与 IP 校验和算法实现
  • 【Linux网络编程】Socket - TCP
  • Java-----韩顺平单例设计模式学习笔记
  • swiglu 激活函数学习笔记
  • Java垃圾收集机制Test1
  • [Python] 区分方法 函数
  • 深度解析:将SymPy符号表达式转化为高效NumPy计算函数的通用解决方案
  • Git系列--3.分支管理
  • Python管理咨询数据可视化实战:收入分布与顾问利用率双轴对比图表生成脚本
  • 零基础上手 Amazon DynamoDB:NoSQL 数据库服务的核心概念与快速搭建指南
  • SQL Server 2008R2 到 2012 数据库迁移完整指南
  • Redis-哨兵选取主节点流程
  • CVE-2025-32463复现
  • AI进化论03:达特茅斯会议——AI的“开宗立派”大会
  • SpringBoot实现MCP
  • Git版本控制完全指南:从入门到实战(简单版)
  • 【LeetCode207.课程表】以及变式
  • Flutter基础(前端教程⑨-图片)