Hexo + Vercel 博客从 0到上线全教程

前言

Hexo 是一款轻量高效的静态博客框架，基于 Node.js 构建，Markdown 写作体验极佳；Vercel 则是一站式的部署平台，支持免费托管静态站点，自动构建、部署和预览，两者结合能快速搭建并上线属于自己的博客。本文将从环境准备到最终上线，手把手带你完成 Hexo + Vercel 博客的搭建全流程。

一、环境准备

1. 安装 Node.js

Hexo 依赖 Node.js 运行，首先需要安装 Node.js（建议选择 LTS 长期支持版本）。

• 下载地址：Node.js 官网

• 验证安装：安装完成后，打开终端 / 命令提示符，执行以下命令，能显示版本号即安装成功：

  1 2	node -v npm -v

2. 安装 Git

Vercel 部署依赖 Git 版本控制，同时 Hexo 也需要 Git 辅助操作。

• 下载地址：Git 官网
• 验证安装：终端执行 git --version，显示版本号即成功。

3. （可选）注册 GitHub/Gitee 账号

虽然 Vercel 可直接关联本地代码，但建议将博客源码托管到 Git 仓库（如 GitHub），方便后续管理和协作。

二、Hexo 本地初始化

1. 全局安装 Hexo CLI

打开终端，执行以下命令全局安装 Hexo 命令行工具：

1

npm install -g hexo-cli

2. 初始化博客项目

选择一个空文件夹作为博客根目录，在根目录下cmd，执行以下命令初始化 Hexo 项目：

1
2
3
4

# 初始化 Hexo 项目
hexo init
# 安装项目依赖
npm install

3. 本地启动预览

初始化完成后，启动本地服务器预览博客：

1
2
3
4

# 生成静态文件
hexo generate (简写：hexo g)
# 启动本地服务
hexo server (简写：hexo s)

打开浏览器访问 http://localhost:4000，就能看到 Hexo 默认的博客页面，至此本地 Hexo 博客已搭建完成。

三、Hexo 基础配置

Hexo 的核心配置文件是根目录下的 _config.yml，我们需要修改关键配置，让博客更贴合自己的需求。

打开 _config.yml，修改以下内容（注意：YAML 文件中冒号后必须加空格）：

1
2
3
4
5
6
7
8
9
10
11
12

# 站点标题
title: 我的 Hexo 博客
# 副标题
subtitle: 技术分享 & 生活记录
# 描述
description: 用 Hexo + Vercel 搭建的个人博客
# 作者
author: 你的名字
# 语言（设置为中文）
language: zh-CN
# 时区（如北京时区）
timezone: Asia/Shanghai

四、编写第一篇博客

Hexo 的博客文章存放在 source/_posts 目录下，支持 Markdown 格式。

1. 创建文章

执行以下命令创建新文章（将 first-post 替换为你的文章标题），或者在目录下手动创建md文件：

1

hexo new "first-post"

执行后会在 source/_posts 下生成 first-post.md 文件。

2. 编辑文章

打开 first-post.md，内容格式如下，按 Markdown 语法编写即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

---
title: 我的第一篇 Hexo 博客
date: 2024-05-20 15:00:00
tags:
  - Hexo
  - 教程
categories:
  - 技术
---

# 标题
这是我的第一篇 Hexo 博客内容，使用 Markdown 编写～

## 二级标题
可以添加图片、代码块、列表等内容：

### 代码块示例
```javascript
console.log("Hello Hexo!");

列表示例

• 列表项 1
• 列表项 2

3. 重新预览

修改后重新执行 hexo c && hexo g && hexo s，刷新 http://localhost:4000 就能看到新文章。

五、Vercel 部署准备

1. 托管博客源码到 GitHub

（1）初始化本地 Git 仓库：

1
2
3
4
5
6
7
8

# 进入博客根目录
cd myblog
# 初始化 Git
git init
# 添加所有文件
git add .
# 提交代码
git commit -m "init hexo blog"

（2）在 GitHub 新建仓库（如命名为 hexo-blog），然后将本地代码推送到远程仓库：

1
2
3
4

# 关联远程仓库
git remote add origin https://github.com/你的用户名/hexo-blog.git
# 推送代码（第一次加-u）
git push -u origin main

2. 注册 Vercel 账号

访问 Vercel 官网，使用 GitHub 账号登录（推荐，方便关联仓库）。

六、Vercel 一键部署

1. 新建 Vercel 项目

（1）登录 Vercel 后，点击首页的 New Project；

（2）选择 Import Git Repository，找到刚才创建的 GitHub 仓库（如 hexo-blog），点击 Import；

（3）配置项目信息：

• Project Name：自定义（如 my-hexo-blog）；

• Framework Preset：选择 Hexo（Vercel 会自动识别）；

• Build Command：保持默认 hexo generate；

• Output Directory：保持默认 public

（4）点击 Deploy，Vercel 会自动拉取代码、安装依赖、构建并部署，等待部署完成即可。

2. 访问上线后的博客

部署完成后，Vercel 会生成一个默认域名（如 my-hexo-blog.vercel.app），点击域名即可访问你的博客，至此博客已成功上线！

七、自定义域名（可选）

如果有自己的域名（比如我提取在阿里云申请了域名），可在 Vercel 中配置：

1. 进入 Vercel 项目的 Settings -> Domains；
2. 输入你的自定义域名（如 blog.yourname.com），点击 Add；
3. 按照 Vercel 提示，到域名服务商处配置 DNS 解析（添加 CNAME 或 A 记录）；
4. 等待解析生效后，即可通过自定义域名访问博客。

八、后续维护

1. 发布新文章

（1）本地编写新文章：hexo new "新文章标题"；

（2）编辑完成后，提交代码到 GitHub：

1
2
3

git add .
git commit -m "add new post: 新文章标题"
git push origin main  （或者 master）

（3）Vercel 会自动检测代码更新，触发重新部署，无需手动操作。

2. 修改主题 / 配置

Hexo 支持丰富的主题（如 Next、Butterfly、[Stellar](Stellar：开始您全新的博客之旅 - XAOXUU)），我使用的是stellar主题，下载主题到 themes 目录，修改 _config.yml 中的 theme 字段即可。修改后提交代码，Vercel 会自动重新部署。

常见问题解决

1. 本地启动报错：检查 Node.js 版本是否兼容（建议 14+），重新执行 npm install 安装依赖；
2. Vercel 部署失败：检查仓库是否包含 package.json、_config.yml 等核心文件，确认 Build Command 为 hexo generate；
3. 访问 404：确认 _config.yml 中的 root 配置为 /，且 Output Directory 为 public。

总结

通过 Hexo + Vercel 的组合，我们可以快速、免费地搭建并上线个人博客，全程无需服务器运维，只需专注于内容创作。从环境准备、本地初始化，到 Vercel 部署，整个流程简单易懂，即使是零基础也能快速上手。希望这篇教程能帮助你搭建出自己的博客，开启内容创作之路～