【24年7月】最新Hexo+GitHubPages搭建个人博客【二】

上一期我们通过学习最新Hexo+GitHubPages搭建个人博客【一】（不会搭建的同学可以参考这篇教程）已经成功搭建起了博客，githubpages有个问题就是在访问 GitHub 时，有时无法打开或者打开极其缓慢1，这可能会给你与朋友分享博客带来不便。为了避免这种尴尬，可以利用 Vercel 提供的加速服务，提升访问速度和访问体验。

1. 什么是Vercel

Vercel 是一个提供网站部署和前端开发服务的云平台，它支持静态网站和动态网站的应用部署、预览和上线。Vercel 特别以与 JavaScript 框架 Next.js 的无缝集成而闻名，尽管它也支持从其他框架和技术部署。它提供了快速部署、自动化部署、无服务器功能、自定义域名、HTTPS 支持、分支部署、团队协作等功能，确保应用程序具有高性能和可靠性。

Vercel的主要优势：

• 个人版（Hobby）永久免费，每个月100G流量，个人项目部署完成够用。如果是团队模式，则需要付费。详情查看：https://vercel.com/pricing
• 内置CI CD：可以理解为一个黑盒，只需要将项目导入Vercel，可以一键自动部署。
• 内置构建流程，支持代码推送、PR自动触发构建，不同分支唯一地址，方便测试。
• 支持本地、测试、生产三种环境部署，仅仅是命令有区别，上手成本极低
• 丰富的集成能力，项目部署自动监控，端到端自动化测试等。

2. 部署到Vercel加速访问

2.1 注册账号

打开Vercel官网登录页面： Vercel，点击右上角Sign Up按钮开始注册。

我们是个人用户所以选择第一项Hobby，输入用户名，点击Continue按钮继续。

在新页面中点击按钮Continue with GitHub

在弹出连接GitHub的界面，点击按钮Authorize Vercel按钮进行授权，等待进入下个界面。

在新的页面里面输入手机号进行绑定，收到验证码后输入验证码等待绑定完成。

2.2 添加新项目

点击Install按钮进入仓库选择界面。

在选择仓库界面选择你GitHub中博客所在的仓库，点击Install按钮导入。

输入GitHub密码，点击Confirm按钮确认导入项目。

项目导入成功之后，在首页点击Import按钮将项目导入到容器。

2.3 部署项目到容器

在部署确认页面点击Deploy按钮确认部署。

部署成功。点击Continue to Dashboard按钮跳转到首页。

点击上方的Setting进入设置界面，可以更改项目名称。也可以不修改。

至此，Vercel设置已经完成。可以通过项目主页的Domain来访问你的博客。

3. 自定义域名

此时，你可以通过https://你的用户名-github-io.vercel.app/这个链接来访问你的博客，但是这样的域名非常长，体验不是很好。Vercel支持用户自定义域名访问你的项目。如果你还没有域名的话，需要先去注册一个域名。接下来可以通过以下步骤设置你的自定义域名。

3.1 设置自定义域名

在部署完成的Congratulations页面点击Add Domain按钮。

或者在项目首页点击Domains按钮进入自定义域名设置界面

3.2 添加自定义域名

在文本框内输入你的域名，点击Add按钮添加域名。

在弹出的确认框中，点击Add确认添加该域名，等待添加完成确认域名设置界面。这里有3个选项，默认选中第一个即可。

添加成功后，会见到如下界面。这时候就需要去你的域名服务商那边配置2个解析，一个是A类型，一个是CNAME类型，按照下图红框内的内容来配置即可。

3.3 去域名服务商配置解析

我的域名都在阿里云，本篇教程只以阿里云为例。其他的域名服务商的配置界面大同小异，如果有不同可以自己摸索一下。具体步骤如下：

1. 登录阿里云账号，进入域名管理界面，并点击解析按钮进入解析页面

2. 点击添加记录按钮进入解析录入界面

   

3. 将Vercel中Type是A的部分复制到右边输入框中并点击确认按钮保存。

   

4. 再次点击添加记录按钮，在录入界面中将Vercl中type是CNAME的部分复制到右边输入框中并点击确认按钮保存。

   

   至此，域名服务商这边的设置完成。接下来，需要回到Vercel界面中查看域名的解析状态。

3.4 回到Vercel查看解析状态

Vercel会自动刷新域名的解析状态，解析成功之后会出现下图的界面。

至此，Vercel中设置已经完成。可以把刚设置的域名复制到浏览器查看效果。