使用 Vercel 和 Github 部署 Hexo 安装以及使用教程

引言

本教程会教你如何使用 Github + Vercel 部署 Hexo 博客

为什么选择 Hexo？

很多玩博客的大佬都在使用 Hexo 静态博客作为自己的系统而不是 WordPress 或者 Typecho，这是因为 Hexo 这一类的静态博客，可以部署在很多稳定且免费的环境中，同时也可以保持访问速度，对于大佬来说，这是个最好不过的选择了。

优点：

• 环境稳定且免费，可以省出维护服务器的精力和开支
• 大佬们一般对服务器有很高的要求，一个服务器通常会专门做一件事情，如果挂博客太低的配置没法有很好的访问性能，太高的配置又是资源浪费，中规中矩的配置却又比上不足比下有余，这时候静态博客就是个很好的解决方案。

在所有静态博客系统中，最受欢迎的，莫过于 Hexo 系统。

当然，如果你比较喜欢 Hugo，也可以仿照本教程进行安装。

方案细则

把 Hexo 文件放在 Github 上，每次更新文件都推送到 Github 上，由 Vercel 自动拉取构建

安装教程

账号准备

请注册好：Github 账号

再前往Vercel 网站使用Github账号注册一个账号。这样注册好以后 Vercel里面就可以看到你 Github 里面的项目了。

创建 Hexo 项目

创建 Hexo 项目直达链接：

这时候就到了创建 Hexo 项目的页面了。

左边的 Git Scope 是你的 Github 账号，右边 REPOSITORY NAME 是你账号下 Hexo 博客仓库的名字，你的博客源文件就存放在这里，名称可以自选

项目可见性就保持 Private，这样别人就看不到你 Hexo 仓库的各种机密信息了，有效保持版权和隐私

最后点击 Create 创建项目，等一会就好了。

最后成功以后，会给你一个二级域名，这个二级域名是属于你的，不会回收，建议可以调试的时候临时使用。

部署完成后，它就和你刚刚所填写的仓库绑定了，一旦你的仓库有什么变化，它就会自动同步部署，全过程大概 5 分钟可以完成部署。

你现在可以点击那个二级域名，就可以看到你的 Hexo 博客了。

但是不建议长期使用。

原因有下：

• 这个 vercel.app 域名已经被各大搜索引擎屏蔽，无法被收录
• 这个 vercel.app 根域名已经被中国大陆防火长城屏蔽，中国国内无法访问，如果你的读者面向国内，不建议使用

所以建议绑定自己的域名。

本地调试

本步骤会在本地安装hexo环境，更改主题/文章后能及时看到，改好以后可以直接 push 代码到你的 Github 仓库，让 Vercel 自动拉取并且部署。

本地环境配置

安装 NodeJS

Macos，Windows均可安装环境。如果你是资深geek，Node.js已经安装好的，可以直接跳过本步骤

安装 Node.js，可以前往 Node.js官网下载安装

安装好以后，接下来是验证配置

macOS用户请打开终端 (Terminal)

Windows用户请打开 CMD

通过下面的代码查看 Node.js 版本

1

node -v

如果有显示，那么就说明配置成功了

安装本地 Hexo

macOS用户请打开终端 (Terminal)

Windows用户请打开 CMD

输入以下命令安装 Hexo

1

npm install -g hexo

等一会，大概一分钟

提示 hexo@[版本号] 即为安装成功。接下来是配置 Push 方式

上传方式配置

Github Desktop 使用和配置更加方便，推荐使用。

Github Desktop

前往 Github 官网下载 并安装。

安装好并且登录你的 Github 账号，会出现如下界面

点击左上角，点击 Add 新增项目，选择 Clone 仓库 ，选中你之前创建的 Hexo 仓库，然后点击 Clone 把仓库克隆下来。

接下来你就能在 Local Path 中显示的文件地址找到你项目的文件夹了。

Git 方式

首先安装 Git，可以前往Git官网下载安装

安装好以后，接下来是验证配置

macOS用户请打开终端 (Terminal)

Windows用户请打开 Git bash

通过下面的代码查看 Git 版本

1

git -v

如果有显示，那么就说明配置成功了

接下来配置 GitHub & SSH key

macOS用户请打开终端 (Terminal)

Windows用户请打开 Git bash

打开 Git Bash ，运行下面的命令：

1

ssh-keygen -t rsa -C "你的电子邮箱地址"

连续3次回车，最终命令行会显示公钥私钥等数据的目录地址（这边从网上盗个图）

找到 id_rsa.pub 文件的目录，用文本编辑器（VScode或者记事本）打开这个文件，复制里面的全部内容。

前往 GitHub -> Settings -> SSH and GPG keys -> New SSH key，直达链接：这里捏

将刚复制的内容粘贴到 Key 中，Title填你喜欢的，点击保存 Add SSH Key。

接下来设置 Git

在终端中运行以下指令：

1
2
3

git config --global user.name "你的 GitHub username"

git config --global user.email "你的 GitHub 注册邮箱地址"

验证是否配置成功

1

ssh -T git@github.com #这里不用更改邮箱地址

如果提示如果提示 Are you sure you want to continue connecting (yes/no)? 输入 yes 并回车。

看到

1

Hi [你的Github用户名]! You've successfully authenticated, but GitHub does not provide shell access.

就说明成功了，到此，本地环境配置成功

克隆Github仓库

前往你在 Github上的仓库，然后点击 Code，复制 HTTPS 下方的链接

先cd到你打算放博客的文件夹，再使用以下命令克隆你的 hexo 仓库到本地

1

git clone 粘贴你的链接

比如这样：

私有仓库 clone 可能需要输入 Github 账号和密码。

此时，当你输入 Github 密码的时候，会提示错误。因为 Github 已经关闭了 Password Login Support

所以请前往 Github -> Settings -> Developer Settings -> Personal Access Token 创建一个Token。直达链接：这里捏

命名随便，过期时间选择 No expiration，**然后勾选 repo **

如图

创建完成以后复制这个 Token，保存好，因为这个 Token 只显示一次。

此时就可以继续命令行登录账号了。

账号是你 Github 邮箱

密码是你刚刚复制的 Token

本地使用教程

现在既然clone好了，那么该如何使用呢？

每次当你改完hexo文件，可以使用以下命令让 hexo 在本地运行起来

1

hexo clean&&hexo s

hexo clean 是清除之前的缓存

hexo s是指运行 hexo server

当你看见这条信息的时候，就可以打开 http://127.0.0.1:4000 查看你所做的更改的效果了

如果要结束运行，可以执行：Ctrl+C

如果本地测试好没问题，就可以 push 到 Github 了

上传文件

Github Desktop 方式上传

首先点击 Fetch Origin 查找文件改动

然后在左下角的输入框中写本次文件改动 (Commit) 总结，然后点击 Commit to main

最后，点击右上角的 Push origin ，这样文件就上传到 Github 了

Git 方式上传

查看文件状态：

1

git status

添加所有更改后的文件：

1

git add --all

对这些文件进行 commit：

1

git commit -m "你要commit的内容"

最后，同步到 Github 云端仓库：

1

git push

此时，Vercel 会自动拉取更改信息，重新构建网站，过程一般40s左右

配置教程

安装主题

这个很简单，在网上找到你喜欢的主题，找到主题的 Github 链接，上面就会有安装教程。

欢迎使用我写的 Redefine 主题

跟着安装即可，编辑 hexo 根目录下的 _config.yml 文件，把 theme 选项从默认的 landscape 更改为你所用主题的名字，比如这里就改成 redefine

最后测试没问题就可以参考 步骤2.3.5 push 到云端了

具体的主题的自定义指南可以看主题自己的文档，比如我的 Redefine 主题文档

安装插件

Hexo 插件还是比较多的，可以自行去网上找。

找到插件的 Github 页面，也会提供安装指南

比如这个 sitemap 插件

执行命令，安装好以后根据插件文档，在 hexo 根目录下的 _config.yml 中添加指定参数就行。

比如这个插件的参数

最后测试没问题就可以参考上文 push 到云端了

总结

如果安装有问题，欢迎联系我，我会及时回复

邮件：contact@ohevan.com

如果写的还不错，欢迎留下评论，让我知道。谢谢阅读！

让我知道。谢谢阅读！