前言

Hexo 是一个快速、简洁且高效的静态博客框架，基于 Node.js，支持 Markdown 语法。Vercel 是一个全球化的云部署平台，提供免费的静态站点托管服务。将两者结合，你可以快速搭建一个高性能的个人博客。

一、环境准备

安装 Node.js

Hexo 基于 Node.js，首先确保你的开发环境中安装了 Node.js（推荐 v18 或更高版本）。

1
2
3
4
5
# 检查 Node.js 版本
node -v

# 检查 npm 版本
npm -v

安装 Git

Hexo 依赖 Git 进行版本管理，确保已安装 Git：

1
git --version

二、安装和初始化 Hexo

全局安装 Hexo CLI：

1
npm install -g hexo-cli

创建博客项目：

1
2
3
hexo init my-blog
cd my-blog
npm install

hexo init 会自动生成项目骨架，包括 source/_posts/、scaffolds/、themes/ 等目录。

三、项目结构

1
2
3
4
5
6
7
8
9
my-blog/
├── _config.yml        # 站点配置（标题、描述、URL、部署等）
├── package.json       # 依赖管理
├── scaffolds/         # 文章模板
├── source/            # 源文件目录
│   ├── _posts/        # 博客文章（Markdown）
│   └── images/        # 图片资源
├── themes/            # 主题目录
└── public/            # 生成的静态文件

四、选择主题

Hexo 拥有丰富的主题生态。推荐几款热门主题：

主题 特点
Butterfly 功能全面，文档完善，支持暗色模式、Mermaid、搜索等
NexT 经典主题，简洁优雅，插件生态丰富
Fluid Material Design 风格，美观大方

安装主题（以 Butterfly 为例）：

1
npm install hexo-theme-butterfly

然后在 _config.yml 中启用：

1
theme: butterfly

主题的详细配置通常在独立的配置文件中进行，例如 _config.butterfly.yml。

五、撰写与预览

创建新文章：

1
hexo new post "文章标题"

文章使用 Markdown 格式，支持 Front-Matter：

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: 文章标题
date: 2025-01-01 12:00:00
tags:
  - 标签1
  - 标签2
categories:
  - 分类名称
cover: /images/cover.jpg
description: 文章摘要
---

这里是正文内容。

本地预览：

1
2
hexo server
# 访问 http://localhost:4000

Hexo 支持热重载，修改文件后浏览器会自动刷新。

六、部署到 Vercel

方案一：通过 Git 仓库部署（推荐）

  1. 将博客项目推送到 GitHub：
1
2
3
4
5
git init
git add .
git commit -m "init blog"
git remote add origin https://github.com/你的用户名/你的仓库.git
git push -u origin main

  1. 登录 Vercel，点击 Add New Project，导入你的 GitHub 仓库

  2. 配置构建选项（Vercel 会自动检测 Hexo）：

配置项 值
Framework Preset Hexo
Build Command npm run build（或 hexo generate）
Output Directory public
  1. 点击 Deploy，等待部署完成

方案二：使用 Vercel CLI

1
2
npm i -g vercel
vercel

按照命令行提示完成登录和部署。

配置 vercel.json

在项目根目录添加 vercel.json，可以优化路由和 URL：

1
2
3
4
{
  "cleanUrls": true,
  "trailingSlash": false
}
  • cleanUrls: true — 移除 URL 中的 .html 后缀
  • trailingSlash: false — 移除 URL 末尾的斜杠

七、绑定自定义域名

  1. 在 Vercel 项目设置中找到 Domains
  2. 输入你的域名（如 blog.example.com）
  3. 在你的域名 DNS 中添加 CNAME 记录，指向 cname.vercel-dns.com
  4. Vercel 会自动签发 SSL 证书，等待生效即可

八、自动部署流程

每次推送代码到 GitHub，Vercel 会自动触发重新部署：

1
2
3
git add .
git commit -m "发布新文章"
git push

无需任何手动操作，整个过程在十几秒内完成。

九、SEO 优化

安装常用插件提升站点的搜索引擎可见性：

1
npm install hexo-generator-sitemap hexo-generator-feed
  • hexo-generator-sitemap：自动生成 sitemap.xml，帮助搜索引擎索引
  • hexo-generator-feed：生成 RSS Feed，方便读者订阅

在 _config.yml 中完善站点描述和关键词：

1
2
description: 个人技术博客，分享编程经验和学习笔记
keywords: 博客, 技术, 编程, 教程

十、常见问题

部署后文章不显示？
检查 _config.yml 中的 permalink 配置，确保与 Vercel 的路由兼容。如果使用 cleanUrls，建议设置 permalink: :year/:month/:title/。

图片加载失败？
图片路径使用绝对路径（以 / 开头），确保图片放在 source/images/ 目录下。

自定义域名 HTTPS？
Vercel 自动为绑定域名提供免费 SSL 证书，无需额外配置。

总结

Hexo + Vercel 是一个零成本、高性能的个人博客方案。Hexo 提供高效的内容管理和丰富的主题生态，Vercel 提供全球 CDN 加速和自动化部署。两者结合，你只需专注于写作，剩下的事情交给工具链自动处理。