基于 Vercel + Next.js 构建 Blog

基于 Vercel + Next.js 构建 Blog

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 (opens in a new tab) 框架
  • 配套生态支持：基于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

创建一个新项目

https://vercel.com/dashboard (opens in a new tab)

选择新建项目 （Project）

选择你的仓库地址

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

选择你的模板导入

我选择了 Blog Starer Kit模板

准备创建 Git 仓库

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

等待部署成功

回到项目看板 https://vercel.com/ (opens in a new tab)

进入查看自己的项目

示例Blog站点地址： https://blog-demo-phi-steel.vercel.app/ (opens in a new tab)

启动项目

克隆刚部署成功的 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 开发文档 (opens in a new tab)这里我就不做赘述了

功能

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

在Vercel项目面板 (opens in a new tab)等待部署完成

再次访问你的站点 https://blog-demo-phi-steel.vercel.app/posts (opens in a new tab)

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

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

FAQ

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

果不其然，项目启动报错

升级一下相关依赖

pnpm 升级依赖文档 (opens in a new tab)

pnpm up --latest

启动成功了 ✅