Hexo -31- vercel 部署网站

本文最后更新于:2022年5月21日 凌晨

vercel是一个站点托管平台,提供CDN加速,同类的平台有Netlify 和 Github Pages,相比之下,vercel国内的访问速度更快,并且提供Production环境和development环境,本文记录使用 vercel 部署 Hexo 博客的方法。

简介

  • vercel是一个站点托管平台,可以托管静态网页,后台提供CDN加速,同类的平台有Netlify 和 Github Pages,相比之下,vercel国内的访问速度更快,并且提供Production环境和development 环境,对于项目开发非常的有用的,并且支持持续集成,一次push或者一次PR会自动化构建发布,发布在development环境,都会生成不一样的链接可供预览。
  • 个人可以免费试用 Vercel 的服务,每个月有 100G 流量,对于个人博客已经最够。
  • 可以绑定 GitHub 账号,工程绑定 GitHub 仓库,部署效果随着仓库更新而自动更新、重新部署。
  • 支持仓库中包含 submodule,稍有限制——要求使用 https 仓库地址。
  • 官方文档:https://vercel.com/docs

操作步骤

注册 账号

  • 登录官网注册,建议直接使用 GitHub 账号登录

绑定 GitHub 账号

  • 好处是可以直接拉取自己 GitHub 的仓库,并实时跟踪最新的代码
  • 如果还没有绑定,可以进入个人 Settings 中设置:

创建 Vercel Hexo 项目

  • 在 Vercel 建立 Hexo 站点我目前成功使用过两种方法

    1. 使用 Vercel 的 Hexo 模板
    2. 拉取自己 GitHub 中的 Hexo 项目仓库
  • 登录 Vercel 进入个人仪表盘界面,选择 NewProject

  • 接下来分别介绍两种方法部署 Hexo 站点
使用 Vercel 的 Hexo 模板
  • 选择所有模板:

  • 选择 Hexo:

  • 随后选择 GitHub,设立一个临时仓库名字:

  • 随后 Vercel 会在你的 GitHub 仓库中创建相应名称的仓库,并保存这部分示例代码:

  • 之后部署成 Vercel 的工程:

  • 此时在 Vercel 账户的仪表盘界面可以看到我们新建的项目:

  • Vercel 为我们生成了开发链接和 域链接,都可以访问当前的页面:

  • 页面示例:

  • 至此成功使用 Vercel 的 Hexo 模板创建了项目
拉取 GitHub 中的 Hexo 项目仓库

此处假设你已经在 GitHub 维护了自己的 Hexo 源码仓库并且可以在 GitHub 的 Pages 服务上正常使用

  • 选择我们 GitHub 中的 Hexo 项目源码仓库(注意:不是 Hexo d 命令部署的仓库,是 Hexo 源码仓库

  • FRAMEWORK PRESET 选项选择 Hexo ,其余不用修改直接部署即可:

  • 之后 Vercel 会拉取仓库代码并自动执行 npm install && Hexo generate 等命令并部署到网页:

  • 进入链接可以看到部署的页面:

更新 Vercel 项目

此时我们已经创建了 Vercel 项目

  • 更新项目代码仅需将本地代码推向Vercel 项目对应的 GitHub 仓库即可,Vercel 会自动检测 GitHub 改动并重新部署

仓库 Submodule

  • 上述 Hexo 工程所有源码均在一个仓库中,并不包含 git submodule,如果仓库中有模块为 submodule 则可能报错
  • 例如我的 theme 是 submodule 刚开始就没有成功部署
  • Support for private git submodules #44
  • Vercel 在 2020年11月支持 HTTP 协议的 git submodule
  • 因此我把submodule 由 git 地址转为 http 地址后问题解决

绑定域名

Vercel 会为我们分配域名,我们也可以按照自己要求配置自定义的域名

  • 首先确定自己已有的 Vercel 域名,例如我的 vvd-hexo.vercel.app

  • 在自己的域名解析中添加指向该域名的 CNAME 记录:

  • 此时访问域名会返回 404 错误,还需要在 Vercel 中配置
  • 进入 Vercel 项目仪表盘,选择 View Domains

  • 在 Domains 中添加我们自己的域名:

  • 等一会之后即生成了自定义的 Domain:

  • 可以通过该域名访问我们的 Hexo 站点了

参考资料


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!