Vercel 是什么

Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.

Vercel是为前端开发人员提供的平台，为创新者提供了在灵感迸发时所需的速度和可靠性。

简单来说就是专为前端开发同学提供的一个一体化平台，包含的功能有如下（包括但不限于），比如：快速构建自己的Blog应用并部署

为什么要使用 Vercel ？

我所了解到的，如果需要独立部署自己的Blog站点有如下几种方案

方案一：云服务器 + 域名申请 + FTP工具手动上传部署

优点：完全自主可控，可扩展性和灵活度较高
缺点：
- 流程繁琐（域名申请 + 云服务器CES购买）
- 需要一定的服务器运维知识成本较高

方案二：基于 Github Page 构建

[[Github Page 搭建个人博客]]

优点
- 流程简单：无需申请域名新建一个 githubName.github.io 仓库
- 部署自动化：官方推荐有 Jekyllrb 框架
- 配套生态支持：基于Github Action 自动上传构建部署到站点
缺点
- 固定单个域名：只有有一个站点而且域名限定一个账号只能有一个如果你的 gh 用户名很长的话不是很好记比如：nishizhendepi9283823.github.io 这种 就很尴尬
- 配套生态开发体验一般：Jekyllrb 提供了基础的能力但仅仅是Blog相关的如果是应用级别的可能不是很方便了不适合只适合搭建简单的静态站点

方案三：基于 Vercel 搭建 Blog 站点

优点
- 开箱即用上手成本极低，友好的可视化操作界面
- 支持各种应用部署比如：WebApp应用、Blog静态站点应用等
- 支持自定义二级域名很方便如：custom-name.vercel.app
- 丰富的社区模版生态比如：React、Vue等主流生态模版都有技术栈不局限
- And so on...
缺点：多应用要冲钱变强（合理付费）不过一般来说静态站点的需求不需要充钱变强

综上所述，在快速低成本搭建自己的独立Blog的诉求下，Vercel是一个比较不错的技术方案选择

接下来，我们看如何在Vercel上创建你自己的应用到最后站点部署成功

创建你的第一个 Vercel 项目

注册｜登陆 Vercel 账号

提供了如下三个三方渠道登陆方式，选择你的账号登陆（一般是你自己的GitHub）

GitHub
GitLab
BitBucket

创建一个新项目

vercel.com/dashboard

选择新建项目（Project）

选择你的仓库地址

建议从模版库中选择一个模板并作为新仓库的模版导入

选择你的模板导入

我选择了 Blog Starer Kit 模板

准备创建 Git 仓库

输入你的仓库名因为我已经创建过了所以就取 blog-demo

等待部署成功

回到项目看板 vercel.com/

进入查看自己的项目

示例Blog站点地址： blog-demo-phi-steel.vercel.app/

启动项目

克隆刚部署成功的 Git 仓库

git clone <git-repo>

安装依赖

# npm install
npm install 
# yarn install
yarn
# pnpm install
pnpm install

启动项目（本地）

# npm run script
npm run dev
# pnpm run script
pnpm dev

本地开发调试

项目MD中有写，详细的查看 next.js 开发文档这里我就不做赘述了

功能

自动配置为处理markdown/ m d x
生成一个rss 基于你的帖子
开箱即用的好看主题包
容易分类的帖子与标签
快速，优化的网页字体加载

在Vercel项目面板等待部署完成

再次访问你的站点 blog-demo-phi-steel.vercel.app/posts

可以看到我们刚才的部署已经成功了至此搞定 ✅

整体耗时大概2h左右还是比较快的

FAQ

error - TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string or an instance of Buffer or URL.

果不其然，项目启动报错

升级一下相关依赖

pnpm 升级依赖文档

pnpm up --latest

启动成功了 ✅

基于Vercel + Next快速搭建一个Blog站点