使用 Vercel 和 Github 部署 Hexo 安装以及主题 Redefine 的使用

引言

如何使用 Github + Vercel 部署 Hexo 博客以及主题 Redefine 的配置

方案细则

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

安装教程

Vercel 部署

需要一个Github 账号

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

创建一个Hexo项目：

Deploy

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

左边的 Git Scope 是你的 Github 账号，

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

项目可见性就保持 Private

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

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

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

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

本地环境配置

安装 NodeJS

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

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

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

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

node -v

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

安装本地 Hexo

输入以下命令安装 Hexo

npm install -g hexo

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

安装git

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

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

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

git -v

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

接下来配置 GitHub & SSH key （已经配置过了，借用别人的教程）

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

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

在终端中运行以下指令：

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

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

验证是否配置成功

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

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

看到

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

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

克隆Github仓库

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

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

git clone 粘贴你的链接

本地使用教程

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

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

hexo clean&&hexo s

hexo clean 是清除之前的缓存

hexo s是指运行 hexo server

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

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

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

上传文件

查看文件状态：

git status

添加所有更改后的文件：

git add --all

对这些文件进行 commit：

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

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

git push

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

主题安装

Redefine 主题

用 cd 命令进入 hexo 所在目录

通过npm安装主题

cd your-hexo-site
npm install hexo-theme-redefine@latest

安装完成后，打开 _config.yml文件，修改配置：

theme: redefine

创建主题配置文件

在 Hexo 根目录下创建 _config.redefine.yml 文件。

并将此处的所有内容复制进去。

现在你可以启动 Hexo，看看效果了。

更多主题配置可参考官方文档

评论系统

本博客用的评论系统为 Waline ，通过 LeanCloud 和 Vercel 进行配置

LeanCloud 设置 (数据库)

登录或注册 LeanCloud 国际版 并进入控制台
点击左上角创建应用并起一个你喜欢的名字 (请选择免费的开发版):
进入应用，选择左下角的 设置 > 应用 Key。你可以看到你的 APP ID,APP Key 和 Master Key。请记录它们，以便后续使用。

Vercel 部署 (服务端)

点击按钮，跳转至 Vercel 进行 Server 端部署。