文章摘要
白衣 DeepSeek

前言

写这个教程是因为Github的静态托管速度确实有点慢，而vercel部署会快很多，我会在这篇文章里，从0到1教你如何利用Github部署Hexo博客，并且额外通过vercel自动拉取GitHub仓库，这样你的自定义域名就不需要绑定在GitHub的pages，而是绑定在Vercel。虽然vercel的官方解析比较慢，但再慢也没Github慢，其次，vercel有专门针对中国大陆的节点，也有国内第三方搭建的节点。 我们解析后两个，速度会有很大的提升。

一.搭建Hexo

在开始搭建 Hexo 博客之前，你需要确保系统中已经安装了以下软件：

1.安装node

node.js

引用外部链接
安装
node.js官网下载
选择自己设备对应的版本，按要求一直点下一步进行安装，建议放在C盘之外的盘

2.安装git

git

引用外部链接
安装
git国内镜像源下载
由于git官网下载非常的慢，所以我给出的是国内镜像网站，选择自己设备对应的版本，按要求一直点下一步进行安装，同样建议放在C盘之外的盘

安装成功之后，在命令行依次输入以下命令，检测是否安装成功

1
2
3
git --version
node -v
npm -v

可以用PowerShell也可以用同时按 Win+ R 输入 cmd 打开命令提示符，有相应版本信息显示则安装成功，若报错请卸载软件重新安装
检验是否安装成功

3.安装 Hexo CLI

打开命令行工具，运行以下命令来全局安装 Hexo CLI：

1
npm install -g hexo-cli

新建一个目录来存放你的博客项目，然后进入该目录右键打开终端，也可以右键打开Git Bash Here输入以下命令进行初始化：

1
hexo init

为了能够将 Hexo 生成的静态文件部署到 GitHub，需要安装hexo-deployer-git插件，在项目根目录下运行以下命令：

1
npm install hexo-deployer-git --save

安装完成后，你的博客根目录下应该会有以下文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#假设是E盘：
    └── blog  # Hexo 博客根目录
        ├── _config.yml         # Hexo 全局配置文件，可设置网站标题、副标题、作者、URL、部署方式等信息
        ├── package.json        # 项目依赖和脚本配置文件，记录项目所需的 npm 包和可执行脚本，通过 npm install 安装依赖
        ├── package-lock.json   # 锁定安装时的包的版本号，保证其他人安装相同版本的依赖
        ├── scaffolds           # 模板文件夹
        │   ├── draft.md        # 草稿文章模板，使用 hexo new draft "文章标题" 时基于此创建草稿
        │   ├── page.md         # 页面模板，使用 hexo new page "页面名称" 时基于此创建页面
        │   └── post.md         # 文章模板，使用 hexo new post "文章标题" 时基于此创建文章
        ├── source              # 资源文件夹，存放博客文章、页面、图片等资源
        │   ├── _drafts         # 草稿文件夹，存放未发布的文章草稿
        │   │   └── draft-article.md  # 示例草稿文章
        │   ├── _posts          # 文章文件夹，存放已发布的文章
        │   │   └── published-article.md  # 示例已发布文章
        │   ├── images          # 图片文件夹，存放博客中使用的图片
        │   │   └── example.jpg # 示例图片
        │   └── index.md        # 首页 Markdown 文件，可自定义首页内容
        ├── themes              # 主题文件夹，存放 Hexo 主题
        │   └── next            # 以 Next 主题为例，不同主题名称不同
        │       ├── _config.yml # 主题配置文件，可配置主题外观、功能等
        │       ├── languages   # 语言文件文件夹，包含不同语言的文本配置
        │       ├── layout      # 布局文件夹，存放主题的模板文件（如 Pug、EJS 等）
        │       ├── scripts     # 脚本文件夹，存放主题的自定义脚本
        │       └── source      # 主题资源文件夹，存放主题的 CSS、JavaScript、图片等资源
        ├── node_modules        # 依赖包文件夹，存放项目通过 npm 安装的所有依赖包
        └── public              # 生成的静态文件文件夹，hexo generate 命令将 Markdown 文件转换为 HTML 等静态文件存于此
            ├── index.html      # 博客首页
            ├── archives        # 文章存档页面
            ├── categories      # 分类页面
            ├── tags            # 标签页面
            ├── css             # 样式文件文件夹
            └── js              # JavaScript 文件文件夹

依次执行以下命令查看是否本地部署成功：

1
2
hexo g
hexo s

显示如下证明成功部署了Hexo博客

1
2
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

你可以访问 http://localhost:4000/ 查看你的博客
博客默认页面

二.部署到Github

1.创建 GitHub 仓库

登录 GitHub 账号，点击页面右上角的 “+” 号，选择 New repository 创建仓库就行了

2.修改deploy

打开 Hexo 项目根目录下的_config.yml文件，找到并修改 deploy 部分的配置，示例如下：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:用户名/仓库名.git
  branch: main

3.配置ssh密钥

  • 检查是否存在密钥

在生成新的 SSH 密钥之前，你可以先检查一下本地是否已经存在 SSH 密钥。打开终端（在 Windows 系统中可以使用 Git Bash），输入以下命令：

1
ls -al ~/.ssh

查看是否有 id_rsa.pub 或 id_ed25519.pub 文件，如果有，则说明已经存在 SSH 密钥，你可以直接使用该密钥；如果没有，则需要生成新的 SSH 密钥

  • 生成新的密钥

右键打开 Git Bash 并设置用户名和邮箱

1
2
git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 邮箱"

在终端中输入以下命令，一直按回车来生成新的 SSH 密钥：

1
ssh-keygen -t rsa -C "GitHub 邮箱"

这会在默认路径 C:\Users\用户名.ssh 下生成 id_rsa（私钥）和 id_rsa.pub（公钥）两个文件。打开公钥id_rsa.pub文件，全选并复制里面的所有内容。如果在资源管理器中看不到.ssh目录，勾选显示隐藏的项目就行了

  • GitHub添加密钥

登陆 GitHub ，进入 Settings 页面，选择左边栏的 SSH and GPG keys，点击 New SSH key

Title 随便取个名字，粘贴复制的 id_rsa.pub 内容到 Key 中，点击 Add SSH key 完成添加

添加完成后，可以在 Git Bash 中输入ssh -T git@github.com来验证是否添加成功。出现类似下方的提示信息，则连接成功

Hi username! You’ve successfully authenticated, but GitHub does not provide shell access.

此时进行hexo三连就可以部署到Github了，但我们的教程是不采用GitHub作为网站托管，所以我们不需要在Github绑定自定义域名，如果你执意要用Github托管，到这里已经结束了。

1
2
3
4
5
hexo clean                 #清理缓存
hexo g                     #生成静态文件
hexo d                     #部署到Github
hexo new "我的第一篇文章"   #创建新文章
hexo new page "about"      #创建新页面

三.Vercel额外部署

这里很简单，你只需要登录Vercel，创建一个项目，他会让你选择你的Github的仓库，我们选择博客仓库进行创建就可以了

创建是自动部署的，默认节点是美国，修改节点需要重新部署，其实我不太建议大家使用香港，由于泛滥使用，速度也没见得多快，你们可以使用亚太地区的，比如新加坡、日本等

然后绑定自己域名，这里需要C解析到如下地址，自己选一个：

解析地址 特点描述 推荐程度
cname-china.vercel-dns.com 针对中国地区优化的官方解析地址 较推荐
cname.vercel-dns.com 官方解析地址，稳定、全球加速 中等
vercel.cdn.yt-blog.top 国内第三方提供，中国访问速度优，稳定性未知 较推荐

结语

相信通过一步步跟着教程操作，大家已经成功掌握了 Hexo 博客在 Github 和 Vercel 多端部署的方法。不用再为网站速度慢而烦恼，也无需担心稳定性问题。每次往 GitHub 推送更新后，Vercel 都会同步跟上，让你的博客始终保持最佳状态。希望大家能好好利用这个技巧，让自己的博客被更多人看到、喜欢，也期待大家不断探索新的可能