使用Vercel 三步搭建可以自动构建的Blog

733 阅读1分钟

教你如何使用Vercel三步搭建属于自己的并拥有自动构建的博客

第一步

大名鼎鼎的Vercel不会还有人不知道吧,今天我们使用它搭建一个博客,全程无需一行代码即可搭建完成。

首先注册Vercel并绑定GitHub账户。

注册和绑定的流程没啥可说的略过了

Vercel 提供了一系列的模版包括Vue、React、Nuxt、Next等..

我们进入vercel-templates选择一个喜欢的,因为工作中用React比较多,我这里选择的是Tailwind CSS Blog

第二步

找到喜欢的模版后,进入模版之后点击Deploy

image.png

之后会自动在自己的GitHub上新建一个仓库克隆一份

image.png

然后就可以在自己的账户下等待部署成功,部署成功后可以直接访问(需要科学上网)

image.png

比如我们要写博客的话,我在仓库的直接修改markdown文件接口,比如我修改了new-features-in-v1.mdx 的title:

image.png

然后只要有GitHub Push,我们的项目就会在Vercel直接构建

image.png

构建完成后就可以直接线上看了,是不是很方便~

image.png

第三步

可惜并不是人人都可以科学上网,幸好Vercel是可以正常浏览的,我们可以花几块钱注册一个域名,然后CNAME解析一下,这样就可以访问啦~

image.png

image.png

本文中出现的实例仓库:github.com/AnsonZnl/zh…

最后附上我的博客:github.com/AnsonZnl/v-… 欢迎Satr🌟