使用Vercel+Github搭建个人博客

时间:2024-02-21 10:17:35

前言

在座的各位应该都试过用Github Pages来搭建个人博客,但效果却总是不不尽如人意,访问速度太太太太太慢了。

今天我在群里问大佬该如何做到让博客秒开,大佬给我推荐了Vercel,让我试试。我在百度上搜索,竟然找不到官网,经过一番周折后还是找到了。

https://vercel.com/

因为我的Github账号已经注册过Vercel了,注册账号的时候也没注意流程,只好引用MTR-Static大佬的图片了。

这篇教程就当是从零开始建设个人博客吧。

正文

注册Github账号

不多赘述,参考这篇教程吧。

注册Vercel账号

这里我用我的Github小号演示。

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

firefox_2020-08-28-01-47-51-1598550471.png

出现授权页面,点击Authorize Vercel

火狐截图_2020-08-27T17-49-26.430Z.png

创建博客

点击Import Project

firefox_2020-08-28-02-11-12-1598551872.png

接着点击Select Template

firefox_2020-08-28-02-11-41-1598551901.png

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

firefox_2020-08-28-02-13-31-1598552011.png

保持默认,点击Continue

v2-808d1ea8ba78e0250b328b265ebb60bf_r.jpg

点击Install Vercel for Github

v2-7f0e7b2ad2a4d2be9b31657c937e0d33_r.jpg

点击绿色的Install

v2-237a6169386d6296dbafe6123450e676_r.jpg

保持默认,点击Continue

v2-a476f208535064ac9abe8db76a2d4559_b.jpg

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

firefox_2020-08-28-02-18-00-1598552280.png

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

firefox_2020-08-28-02-22-13-1598552533.png

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

firefox_2020-08-28-02-23-51-1598552631.png

火狐截图_2020-08-27T18-50-23.903Z.png

开始使用

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

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

GitHubDesktop_2020-08-28-03-00-37-1598554837.png

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

GitHubDesktop_2020-08-28-03-02-46-1598554966.png

GitHubDesktop_2020-08-28-03-04-02-1598555042.png

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

explorer_2020-08-28-03-06-15-1598555175.png

按照主题提供的方法做配置,我推荐even

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

图片.png

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

GitHubDesktop_2020-08-28-03-14-23-1598555663.png

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

firefox_2020-08-28-03-21-47-1598556107.png

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

firefox_2020-08-28-03-20-29-1598556029.png

绑定域名

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

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

firefox_2020-08-28-03-32-51-1598556771.png

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

firefox_2020-08-28-03-35-23-1598556923.png

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

firefox_2020-08-28-03-37-34-1598557054.png

真不错,可以带着域名访问了。

图片.png


以下为备份。

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

firefox_2020-08-28-02-16-18-1598552178.png

可能是因为我的Github小号用的是189邮箱?无法注册。

firefox_2020-08-28-02-05-34-1598551534.png

引用别人的教程吧,请按照他的方法来注册账号,注册完帐号就可以回来了。