使用Hexo + GitHub + Vercel 搭建个人博客(一)

前言

     关于怎么搭建hexo博客，网上资源众多，在B站亦或各类大佬的博客中都有详尽的操作教程，我在文中会插入我所参考过的链接，游客可以优先参考大佬们的教程。

零、 博客框架的选择

     在还没开始搭建之前，你需要确认那一种博客框架适合自己，是动态博客还是静态博客？使用wordpress还是hexo或Typecho，如果你还不确定，那么可以参考下面这个视频，视频中的UP主对Hexo、Wordpress、Halo、Typecho做了分段的描述，最后的尾声与我的想法高度一致 搭建博客往往是你博客生涯中最简单的事情

一、 环境准备

     如果你选择的是Hexo，那么我们继续；正如标题所说，我的博客使用Hexo + GitHub + Vercel搭建。主要参考自@小明的部落格的Hexo 博客搭建教程，描述很详细，很推荐观看。

1. 安装 Node.js

• 下载地址：https://nodejs.org/zh-cn
• 安装完成后，通过下面指令验证是否安装成功：

1

node -v

2. 安装 Git

• 下载地址：https://git-scm.com/downloads
• 安装完成后，通过下面指令验证是否安装成功：

1

git --version

3. 安装 Hexo CLI

• 安装完成 Node.js 后执行下面这段指令安装 Hexo CLI：

1

npm install -g hexo-cli

• 安装完成后，通过下面指令验证是否安装成功：

1

hexo version

二、 初始化 Hexo 博客

1. 创建博客目录

     选择一个存放博客的文件夹，执行以下指令。Hexo 会自动在当前路径下创建项目文件夹并安装依赖。

1
2

hexo init my-blog
cd my-blog

2. 本地预览

1

hexo server

或简写为 hexo s

打开浏览器访问 http://localhost:4000，就能看到默认的 Hexo 博客页面。按 Ctrl + C 停止服务器。

3. 目录结构说明

1
2
3
4
5
6
7
8
9
10

my-blog/
├── _config.yml          # 站点全局配置
├── source/
│   ├── _posts/          # 博客文章（Markdown 文件）
│   └── index.md         # 自定义首页（可选）
├── themes/              # 主题文件夹
├── public/              # 生成后的静态文件（部署时用到）
├── scaffolds/           # 文章模板
├── package.json         # 项目依赖
└── node_modules/        # 依赖包

三、 配置站点信息

1. 修改站点配置

     打开根目录下的 _config.yml，修改以下字段：

1
2
3
4
5
6

title: 我的博客              # 站点标题
subtitle: 记录学习与生活       # 副标题
description: ''              # 站点描述（SEO 用）
author: 你的名字              # 作者名
language: zh-CN              # 语言
url: https://你的域名.com     # 站点地址（部署后改为实际域名）

2. 安装主题

     安装主题，本博客使用的是 Stellar 主题：

1

npm install hexo-theme-stellar --save

     然后在 _config.yml 中指定主题：

1

theme: stellar

     建议复制一份主题默认配置到博客根目录，重命名为 _config.stellar.yml，后续所有主题参数改动都在这个新文件中进行。

3. 创建第一篇文章

1

hexo new "我的第一篇文章"

     这会在 source/_posts/ 下生成一个 Markdown 文件，编辑内容后重新生成即可看到效果。

1

hexo clean;hexo generate;hexo server

简写为 hexo cl;hexo g;hexo s

四、 部署到 Vercel

     本博客使用 Vercel 部署（不是 GitHub Pages）。GitHub 仓库仅用于存放源码，Vercel 在每次推送后自动构建并部署。

1. 创建 GitHub 仓库并推送源码

     在 GitHub 上创建一个仓库存放博客源码，建议设为私有。

1
2
3
4
5
6

git init
git add .
git commit -m "初始化博客"
git branch -M main
git remote add origin git@github.com:你的用户名/你的仓库名.git
git push -u origin main

注意：node_modules/、public/、db.json 无需提交，.gitignore 已默认排除。

2. 配置 hexo-deployer-git

     安装部署插件，之后可以用 hexo deploy 一键推送：

1

npm install hexo-deployer-git --save

     在 _config.yml 末尾添加：

1
2
3
4

deploy:
  type: git
  repository: git@github.com:你的用户名/你的仓库名.git
  branch: main

3. 在 Vercel 中导入项目

• 访问 vercel.com，用 GitHub 账号登录
• 点击 Add New → Project
• 选择刚刚推送的 GitHub 仓库
• 关键配置：
  • Framework Preset：选择 Hexo
  • Build Command：hexo generate（默认已填好）
  • Output Directory：public（默认已填好）
• 点击 Deploy，等待构建完成

4. 绑定自定义域名

     部署成功后，Vercel 会分配一个 xxx.vercel.app 的免费域名。如果有自己的域名：

• 在 Vercel 项目设置中进入 Domains
• 添加你的域名，按提示在域名服务商处添加 DNS 记录
• Vercel 会自动申请和续签 SSL 证书

5. 后续更新

     每次写完文章后，执行下面指令即可。Vercel 检测到仓库更新后会自动重新部署：

1

hexo clean;hexo deploy

简写为 hexo cl;hexo d

五、 常用指令

1
2
3
4
5
6
7

hexo new "文章标题"               # 新建文章
hexo server                       # 本地预览 (简写: hexo s)
hexo clean                        # 清除缓存 (简写: hexo cl)
hexo generate                     # 生成静态文件 (简写: hexo g)
hexo deploy                       # 推送源码到 GitHub (简写: hexo d)
hexo cl;hexo g;hexo s             # 一键清理+生成+预览
hexo cl;hexo d                    # 一键清理+部署

参考链接

• Hexo 官方文档
• Stellar 主题文档
• Vercel 部署文档
• 小明的部落格 - Hexo 博客搭建教程
• B 站 Hexo/WordPress/Halo/Typecho 对比评测