摘要:本文主要介绍了如何将博客托管到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 注册
在注册时选择私人目的,不要选择商业目的:
选择邮箱注册,在邮箱收到链接后验证完成注册。
1.3 部署
这种方式不需要访问GitHub,是通过本地命令的方式进行部署的。
类似于将本地博客部署到GitHub Pages需要安装插件,将本地博客部署到Vercel也需要安装插件。
在博客目录打开bash命令行,安装Vercel插件,需要进行全局安装:
1 | npm install vercel -g |
执行命令将博客部署到平台,首次执行会登录Vercel平台,然后进行一些设置,可以直接回车使用默认设置:
1 | vercel |
部署完成后会提示生成的链接,通过链接可以访问博客。
还有一些常用命令,可以在官网学习。
推荐方式之一,从本地可以直接部署到Vercel平台,简单快速。
进入Vercel项目管理界面,打开Overview
并在右侧点击Add New...
下拉列表中的Project
选项:
在导入项目管理界面点击Continue with GitHub
并在弹出的界面上完成GitHub授权:
在导入项目管理界面可以看到刚刚导入的项目,点击项目后面的Install
并在弹出的界面上选择Only select repositories
选项,在Select repositories
下拉列表中选择GitHub Pages博客项目,点击Install
执行安装,输入GitHub密码将项目从GitHub复制到Vercel上。
在导入项目管理界面点击项目右侧的Import
,进入设置和部署界面:
设置和部署:
- 设置Vercel中的项目名,可以使用默认的。
- 设置框架,自动识别为Other框架,可以使用默认的,因为项目中只有静态文件,不需要使用框架部署。
- 检查并设置部署命令,可以使用默认配置,点击
Deploy
在Vercel上进行部署。
等到部署结束,会跳转到祝贺页面,能够看到博客的缩略图,点击即可通过Vercel提供的链接访问博客。
当对GitHub Pages博客项目进行推送时,会触发Vercel的自动部署。
推荐方式之一,不需要对现有流程进行更改,不需要考虑在Vercel上部署带来的一系列问题。
进入Vercel项目管理界面,打开Overview
并在右侧点击Add New...
下拉列表中的Project
选项:
在导入项目管理界面点击Continue with GitHub
并在弹出的界面上完成GitHub授权:
在导入项目管理界面可以看到刚刚导入的项目,点击项目后面的Install
并在弹出的界面上选择Only select repositories
选项,在Select repositories
下拉列表中选择GitHub博客源码项目,点击Install
执行安装,输入GitHub密码将项目从GitHub复制到Vercel上。
在导入项目管理界面点击项目右侧的Import
,进入设置和部署界面:
设置和部署:
- 设置Vercel中的项目名,可以使用默认的。
- 设置框架,支持自动识别比如Hexo框架,如果不对可以修改。
- 检查并设置部署命令,可以使用默认配置,点击
Deploy
在Vercel上进行部署。
等到部署结束,会跳转到祝贺页面,能够看到博客的缩略图,点击即可通过Vercel提供的链接访问博客。
当对GitHub博客源码项目进行推送时,会触发Vercel的自动部署。
不推荐这种方式,在某些情况下会出现问题,将主题项目作为子模块或者子项目,会导致部署后进入博客白屏。
1.4 设置域名
进入Vercel项目管理界面,点击创建的博客项目进入项目界面,切换到Settings
标签,在左侧导航栏点击Domains
设置:
在输入框中输入购买的域名,点击Add
添加。
根据提示去域名服务商配置域名解析,将指向GitHub Pages改为指向Vercel。
之后等待域名生效即可。
条