Vercel + Github 搭建个人博客

解决 Github pages 访问速度慢的问题……

前言

一开始我的个人博客是用 Gitee Pages 访问的，但是长且丑，就购买了个人域名 ll.sc.cn ；

后来发现，Gitee Pages 自定义域名需要企业版，也就是要花钱的；

但我的个人博客主要是用来记录一些自己学习的过程，并无收益，花钱买了个域名都已经破费了:joy: ；

所以转到 Github Pages 上，用了几天发现访问速度实在是太太太太太慢了，有些网络环境还直接不能访问；

经过一番搜索，有大佬推荐 Vercel 来搭建。

因为我已经注册好 Vercel 了，一开始只是想试一试，所以在注册过程中没有截图，故引用 MTR-Static 大佬的图片了。

此文当一次温习和留存以便查阅。

正文

注册 Github 账号就不多赘述，不会的找 度娘 ；

注册 Vercel 账号

打开 https://vercel.com/signup ，点击 Continue with Github。

出现授权页面，点击 Authorize Vercel。

创建博客

到了 Select Vercel account 的页面，在下面的 Personal Account 内点击你自己的账户，接着点击 Continue。

点击 Import Project。

接着点击 Select Template。

在模板选择页面向下滚动，可以找到 Hugo，点击它，现在我们将使用 Hugo 来生成静态网页。

保持默认，点击 Continue。

点击 Install Vercel for Github。

点击绿色的 Install。

![点击安装

保持默认，点击 Continue。

到了 Create Git Repository 页面，因为之前关联的是 Github，所以选择 Github。在 Repository Name 内填写你想要的仓库名称，Vercel 将在 Github 创建一个仓库用于托管文件。Private Git Repository 无论勾选与否都差不多，区别就在于创建的仓库是是私人仓库还是公开仓库，点击 Continue。

Import Project 页面保持默认即可，点击 Deploy。

现在就创建成功了，点击 Visit 就可以直接访问。但是界面十分粗糙，接下来需要做一些个性化设置。

我第一次在创建的时候选择了 Hugo 模板，但是部署后打开网页 404 ，然后我删除了刚刚在 Vercel 建的新库，重新导入 Github 项目，保持默认，没有选择 Hugo 模板，按刚刚的步骤完成，打开链接，成功了，网页显示正常。

开始使用

你可以到 GitHub Desktop 下载 GitHub Desktop，相比 CLI 的 git，配置起来更便捷。

登录号账号之后点击 File，接着点击 Clone repositories。

找到自己为创建 Hugo 创建的仓库，选中后点击 Clone。

打开文件资源管理器，打开 C:\Users\你的用户名\Documents\GitHub，应该可以看到刚刚 clone 的仓库，此处为 test。

按照主题提供的方法做配置，例如： even。

修改完之后打开 Github Desktop，应该能看到更改，在左下角的 Summary 里填入做的修改（upload theme 或者别的什么，有内容即可），点击 Commit to master。

点击右上角的 Push origin，把修改推送到 Github。

完成之后再等待半分钟，打开网站，改动应该已经生效了。

这是因为 Vercel 会检测到 Github 仓库改动之后会自动重新生成网页，之后更新文章可以直接在 Github 网页版上传到./content/posts 里，比在电脑上自己生成网页再 Push 方便不少。

绑定域名

这需要你自己有一个域名，如果不想花钱的话可以在 freenom 免费申请一个，这里不多赘述。

在 Vercel 的控制面板里打开你的项目（如此处的 test） > Settings > Domains，在输入框里输入你想绑定的域名，此处我用 test.yxyy.top。接着它会提示错误，这是因为我还没有设置域名解析。

你需要按照提示在域名提供商那里做 CNAME 解析，我是在阿里云注册的域名，其他的域名注册商应该也大同小异。

现在回到 Vercel 控制面板，应该就不会报错了，它还会自动帮你申请 Let's Encrypt 的 SSL 证书。

现在可以带着域名访问了。

参考链接

• 徐艺扬： 使用Vercel+Github搭建个人博客
• 知乎： 手把手教你搭建完全免费的个人博客