抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

摘要:本文主要介绍了如何将博客托管到Vercel云平台。

环境

Windows 10 企业版 LTSC 21H2
Node 18.14.0
NPM 9.3.1
Git 2.37.3
Hexo 4.3.1

1 使用Vercel

1.1 简介

Vercel是一个云服务平台,可以用于部署静态网站,也用于部署一些没有接口数据交互的动态网站。

对于个人博客,在Vercel上部署类似于在GitHub Pages上进行部署,但是Vercel的访问速度要比GitHub Pages好太多,因此许多博主都将博客部署在Vercel上。

Vercel官网:https://vercel.com/

1.2 注册

在注册时选择私人目的,不要选择商业目的:
001-注册Vercel

选择邮箱注册,在邮箱收到链接后验证完成注册。

1.3 部署

这种方式不需要访问GitHub,是通过本地命令的方式进行部署的。

类似于将本地博客部署到GitHub Pages需要安装插件,将本地博客部署到Vercel也需要安装插件。

在博客目录打开bash命令行,安装Vercel插件,需要进行全局安装:

bash
1
npm install vercel -g

执行命令将博客部署到平台,首次执行会登录Vercel平台,然后进行一些设置,可以直接回车使用默认设置:

bash
1
vercel

部署完成后会提示生成的链接,通过链接可以访问博客。

还有一些常用命令,可以在官网学习。

推荐方式之一,从本地可以直接部署到Vercel平台,简单快速。

进入Vercel项目管理界面,打开Overview并在右侧点击Add New...下拉列表中的Project选项:
002-添加项目

在导入项目管理界面点击Continue with GitHub并在弹出的界面上完成GitHub授权:
003-导入GitHub项目

在导入项目管理界面可以看到刚刚导入的项目,点击项目后面的Install并在弹出的界面上选择Only select repositories选项,在Select repositories下拉列表中选择GitHub Pages博客项目,点击Install执行安装,输入GitHub密码将项目从GitHub复制到Vercel上。

在导入项目管理界面点击项目右侧的Import,进入设置和部署界面:
004-部署项目

设置和部署:

  1. 设置Vercel中的项目名,可以使用默认的。
  2. 设置框架,自动识别为Other框架,可以使用默认的,因为项目中只有静态文件,不需要使用框架部署。
  3. 检查并设置部署命令,可以使用默认配置,点击Deploy在Vercel上进行部署。

等到部署结束,会跳转到祝贺页面,能够看到博客的缩略图,点击即可通过Vercel提供的链接访问博客。

当对GitHub Pages博客项目进行推送时,会触发Vercel的自动部署。

推荐方式之一,不需要对现有流程进行更改,不需要考虑在Vercel上部署带来的一系列问题。

进入Vercel项目管理界面,打开Overview并在右侧点击Add New...下拉列表中的Project选项:
002-添加项目

在导入项目管理界面点击Continue with GitHub并在弹出的界面上完成GitHub授权:
003-导入GitHub项目

在导入项目管理界面可以看到刚刚导入的项目,点击项目后面的Install并在弹出的界面上选择Only select repositories选项,在Select repositories下拉列表中选择GitHub博客源码项目,点击Install执行安装,输入GitHub密码将项目从GitHub复制到Vercel上。

在导入项目管理界面点击项目右侧的Import,进入设置和部署界面:
005-部署项目

设置和部署:

  1. 设置Vercel中的项目名,可以使用默认的。
  2. 设置框架,支持自动识别比如Hexo框架,如果不对可以修改。
  3. 检查并设置部署命令,可以使用默认配置,点击Deploy在Vercel上进行部署。

等到部署结束,会跳转到祝贺页面,能够看到博客的缩略图,点击即可通过Vercel提供的链接访问博客。

当对GitHub博客源码项目进行推送时,会触发Vercel的自动部署。

不推荐这种方式,在某些情况下会出现问题,将主题项目作为子模块或者子项目,会导致部署后进入博客白屏。

1.4 设置域名

进入Vercel项目管理界面,点击创建的博客项目进入项目界面,切换到Settings标签,在左侧导航栏点击Domains设置:
006-设置域名

在输入框中输入购买的域名,点击Add添加。

根据提示去域名服务商配置域名解析,将指向GitHub Pages改为指向Vercel。

之后等待域名生效即可。

评论