1. 1. 目录
  2. 2. 前言
  3. 3. 准备工作
    1. 3.1. 1.注册一个Vercel账号、一个Github账号(具体步骤不做赘述)
    2. 3.2. 2.环境安装
  4. 4. 正式开始
    1. 4.1. 1.进入Vercel部署一个Hexo项目
    2. 4.2. 2.本地环境部署
    3. 4.3. 3.对Hexo博客进行基本配置
    4. 4.4. 4.同步仓库
    5. 4.5. 5.后续维护

目录

前言

1.为什么是Vercel?

答:网上大多数教程使用的都是Github Pages, 然而Github在国内访问速度不佳。Vercel可以实现静态网页托管,也可以直接结合Serverless服务进行部署,同时在中国国内访问速度也尚可。当然,Vercel与Github Pages一样都是可以免费使用的,也提供免费域名与SSL。如果你想要使用自己的域名,也可以绑定。

2.为什么是Hexo?

答:相较于Vuepress与Hugo,Hexo的用户中国人较多,同时中文开发者也更多。

准备工作

1.注册一个Vercel账号、一个Github账号(具体步骤不做赘述)

2.环境安装

正式开始

1.进入Vercel部署一个Hexo项目

进入Vercel的Dashboard之后,我们会看见这样的画面:

Dashboard主页面

选择+ New Project进入创建项目的页面,点击Browse All Templates → ,搜索Hexo并选择,此时来到了这个界面:

我们需要将我们的Vercel账户与Github账户链接,选择Github按钮。

链接成功以后便可以创建仓库,之后便是一路Next。

直到我们看见这个页面,第一步就算完成了。

此时我们可以进入Dashboard找到项目的网址。此时已经可以正常访问。

2.本地环境部署

打开Github Desktop并按照步骤登录后进入主界面

将我们之前创建的Hexo仓库克隆到本地

打开刚刚克隆到本地的项目的目录,可以看到文件夹内的目录结构, 这些目录的具体作用可以参见Hexo官方文档

在该目录中打开终端,输入如下命令安装依赖

1
npm install

然后输入

1
hexo s

http://localhost:4000/可以正常访问,则本地环境已经搭建完毕

3.对Hexo博客进行基本配置

这一步骤可以参考官方文档

作者在这里选用了butterfly主题进行演示,具体到各主题如何进行配置,可以参考各主题的文档。

4.同步仓库

当我们完成了博客的基本配置之后,通过Github Desktop进行仓库的同步。

5.后续维护

在我们完成了基本的部署之后,想要向我们的博客添加文章,只需在本地完成编辑,并在Github上传到对应目录即可。

当然还是需要按照Hexo的要求来。

作者在这里尝试上传一个测试文件到仓库中

可以看到Vercel几乎立刻做出了反应并完成了部署

访问博客之后也确实发现刚刚上传的测试文件生成的文章了。