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

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

Evan Luo MVP++

引言

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

为什么选择 Hexo?

Hexo

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

优点:

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

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

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

方案细则

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

安装教程

账号准备

请注册好:Github 账号

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

Vercel 主界面

创建 Hexo 项目

创建 Hexo 项目直达链接:

Deploy

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

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

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

Vercel 创建 Hexo页面

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

Hexo 项目页面

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

部署完成后,它就和你刚刚所填写的仓库绑定了,一旦你的仓库有什么变化,它就会自动同步部署,全过程大概 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

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

NPM 版本号

安装本地 Hexo

macOS用户请打开终端 (Terminal)

Windows用户请打开 CMD

输入以下命令安装 Hexo

1
npm install -g hexo

等一会,大概一分钟

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

上传方式配置

提供两种 Push 方式,二选一,分别是 gitGithub Desktop

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

Github Desktop

前往 Github 官网下载 并安装。

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

Screenshot 2023-03-17 at 10.46.20 PM

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

Screenshot 2023-03-17 at 10.47.55 PM

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

Git 方式

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

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

macOS用户请打开终端 (Terminal)

Windows用户请打开 Git bash

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

1
git -v

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

Screenshot 2023-03-17 at 10.50.34 PM

接下来配置 GitHub & SSH key

macOS用户请打开终端 (Terminal)

Windows用户请打开 Git bash

打开 Git Bash ,运行下面的命令:

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

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

RSA密钥

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

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

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

SSH keys Github

接下来设置 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 下方的链接

Git clone地址

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

1
git clone 粘贴你的链接

比如这样:

Git clone粘贴链接

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

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

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

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

如图

Create Personal Access Token

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

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

账号是你 Github 邮箱

密码是你刚刚复制的 Token

本地使用教程

现在既然clone好了,那么该如何使用呢?

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

1
hexo clean&&hexo s

hexo clean 是清除之前的缓存

hexo s是指运行 hexo server

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

Hexo本地运行成功

如果要结束运行,可以执行:Ctrl+C

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

上传文件

Github Desktop 方式上传

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

Screenshot 2023-03-17 at 10.54.13 PM

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

Screenshot 2023-03-17 at 10.54.54 PM

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

Screenshot 2023-03-17 at 10.56.27 PM

Git 方式上传

查看文件状态:

1
git status

添加所有更改后的文件

1
git add --all

对这些文件进行 commit:

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

最后,同步到 Github 云端仓库:

1
git push

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

配置教程

安装主题

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

欢迎使用我写的 Redefine 主题

Redefine主题安装界面

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

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

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

安装插件

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

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

比如这个 sitemap 插件

Hexo generator sitemap插件

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

比如这个插件的参数

插件参数页面

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

总结

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

邮件:contact@ohevan.com

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

让我知道。谢谢阅读!

  • Title: 使用 Vercel 和 Github 部署 Hexo 安装以及使用教程
  • Author: Evan Luo
  • Created at : Aug 27 2022 11:19:26
  • Updated at : May 29 2024 19:04:15
  • Link: https://ohevan.com/vercel-hexo-configuration.html
  • License: This work is licensed under CC BY-NC-SA 4.0.
Comments