利用GitHub与Vercel多端部署Hexo博客

利用GitHub与Vercel多端部署Hexo博客

本文将详细介绍如何利用GitHub与Vercel多端部署Hexo博客。通过这种方式，你可以避免GitHub静态托管速度慢的问题，同时利用Vercel的快速部署和中国大陆专属节点，提升博客访问速度。

前言

写这个教程是因为GitHub的静态托管速度确实有点慢，而Vercel部署会快很多。本文将从零开始，教你如何利用GitHub部署Hexo博客，并通过Vercel自动拉取GitHub仓库。这样，你的自定义域名就不需要绑定在GitHub的Pages，而是绑定在Vercel。虽然Vercel的官方解析比较慢，但再慢也没GitHub慢。此外，Vercel有专门针对中国大陆的节点，也有国内第三方搭建的节点，解析后速度会有很大提升。

一.搭建Hexo

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

1.安装node

选择自己设备对应的版本，按要求一直点下一步进行安装，建议放在C盘之外的盘。

2.安装git

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

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

git --version
node -v
npm -v

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

3.安装 Hexo CLI

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

npm install -g hexo-cli

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

hexo init

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

npm install hexo-deployer-git --save

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

#假设是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 文件文件夹

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

hexo g
hexo s

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

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 部分的配置，示例如下：

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

3.配置ssh密钥

• 检查是否存在密钥

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

ls -al ~/.ssh

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

• 生成新的密钥

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

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

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

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托管，到这里已经结束了。

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

三.Vercel额外部署

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

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

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

结语

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