使用 Vercel 部署属于你的博客
还在为没有自己的博客而担心吗

起点
近年来,随着短视频的迅速发展,很多人习惯了在社交平台上分享碎片化内容。但如果你希望系统性地记录知识、沉淀作品,或者打造一个属于自己的网络身份,一个个人博客依然是不可替代的工具。
然而,传统博客搭建往往涉及服务器购买、环境配置、运维等复杂步骤,让许多非技术背景的朋友望而却步。今天,我将介绍如何利用 Vercel 搭建一个属于自己的博客.
注册 Vercel
在浏览器中打开 Sign Up – Vercel.

点击 Continue with Email, 并输入你的邮箱.

随后点击 Continue with Email. 随后, 在邮箱中接收验证码并填入.

选择 working on personal projects 就不需要绑卡了.
在 Your Name 中填入你的名称, 随后 Continue.
这样你就获得了一个 Vercel 账户!
选择一个博客模板
对于静态博客生成器,选择一个合适的模板 (或者叫做主题?) 是至关重要的。它决定了你的博客的外观,以及功能和用户的浏览体验。一大部分上决定了用户的留存率. 在这里,我们以 Hexo 为例。
Hexo 是一个快速、简洁且高效的静态博客框架,它基于 Node.js。拥有非常丰富的主题生态,从极简到功能齐全,应有尽有。说实话我一开始的博客使用的就是 Hexo。
为什么选择它?
- 生态成熟:拥有海量主题和插件,社区活跃。
- 上手简单:CLI 操作,几行命令生成、预览和部署。
- Markdown 写作:语法简洁。
- 部署灵活:支持生成静态文件,非常适合部署到 Vercel 等托管平台。
(为什么不选择本博客的模板呢?当然是因为 Bug 太吉尔多了,不敢恭维.
使用 Hexo CLI 生成基本项目
首先确保你的电脑上已经安装以下工具 (当然手机也是可以的,安装 Termux 即可。什么你说你是 iOS?
- Node.js (14.x +)
- npm (谁家好人安装 Node.js 不附赠这包管理器)
你可以通过以下命令来检查是否已经安装.
node -v
npm -v

如果不存在或未安装,请前往 Node.js 官网 下载并安装
步骤 1: 安装 Hexo CLI
打开终端(Powershell/Bash/三个点),执行以下命令:
npm install -g hexo-cli

出现这个就是成了
步骤 2 - 初始化
选择一个美丽的文件夹,作为你的博客的根目录

在文件夹中执行
hexo init blog
cd blog

蒸蚌!你又完成了一步, 注意执行完 init 一定要 cd 到新文件夹
步骤 3:安装依赖
进入项目目录后,安装项目所需的依赖包:
npm install
(如果听不懂的话反正跟着做没错就行

出现 added * packages 并且没报错就是成功了.
步骤 4:预览
现在你可以在本地启动一个开发服务器,即在编辑内容时也可以实时看到你的博客发生了什么变化。
hexo s
# 或者
hexo server
使用浏览器打开其提供的访问网址(通常为 http://localhost:4000),你就能看见 Hexo 的默认主题和一篇自动生成的示例文章!

熟悉以下命令将帮助你高效地管理博客:
hexo init [folder]:初始化一个新博客hexo new "文章标题":创建一篇新文章(会在source/_posts文件夹生成一个 Markdown 文件),使用你喜欢的文本编辑器打开即可编辑文章.hexo generate或hexo g:生成静态文件到public文件夹。hexo server或hexo s:启动本地服务器进行预览hexo deploy或hexo d:部署博客到远程平台(如 Vercel 等)hexo clean:清除缓存和生成的静态文件(在修改配置或主题后建议执行)
至此,你已经成功创建并运行了一个基础的 Hexo 博客。接下来,我们将进入下一步骤:选择一个博客模板,为你的博客换上心仪的外观。
使用 new post 生成 md 文件并使用 VSCode 编辑
在本地博客项目跑起来之后,下一步就是开始创作内容了。Hexo 提供了非常便捷的命令来创建新文章,它会自动生成一个标准的 Markdown 文件,你只需要专注于写作即可。
创建新文章
在博客根目录下,执行以下命令来创建一篇新文章:
hexo new post "你的文章标题"
例如:
hexo new post "我的第一篇博客"

执行成功后,终端会提示你新文章的路径,通常位于 source/_posts/你的文章标题.md。
使用 VS Code 编辑
推荐使用 VS Code(微软大战代码)作为你的 Markdown 编辑器,它拥有丰富的插件生态,能极大地提升写作体验。
打开文件:在 VSCode 中打开刚才生成的
.md文件。安装推荐插件:
- Markdown All in One:提供快捷键、自动补全、目录生成等便捷功能。
- Markdown Preview Enhanced:提供强大的实时预览功能,支持代码高亮、数学公式等。
开始写作:
- 文件顶部的
---之间是 FrontMatter(文章元数据),你可以在这里设置标题、日期、标签、分类等,Hexo 会识别它们. - 下方就是正文部分,使用标准的 Markdown 语法进行写作。
--- title: 我的第一篇博客 date: 2026-06-06 10:00:00 tags: - 随笔 - 生活 categories: - 日记 --- 这里是正文内容,你可以尽情在这里哔哩吧啦。 ## 二级标题 - 列表项 1 - 列表项 2- 文件顶部的
(别忘了保存
预览与发布
写作过程中,你可以随时使用 hexo s 启动本地服务器,在浏览器中实时预览你的文章效果。满意后,记得使用 vercel 将最新内容部署到线上。
部署到 Vercel
当本地预览满意后,我们需要将博客发布到互联网上,让所有人都能访问。Vercel 提供了极其简单的部署流程,它能自动检测你的 Hexo 项目,并进行构建和托管。
考虑到国内网络环境问题导致 Github, GitLab 访问不是非常稳定,因此我们将教学使用 Vercel 提供的命令行工具部署至 Vercel。这种方式更加直接,非常便捷,且无需创建一个单独的仓库。
步骤 1:安装 Vercel CLI
在终端中执行以下命令,全局安装 Vercel CLI:
npm install -g vercel
步骤 2:登录 Vercel
安装完成后,执行登录命令。这会打开浏览器让你授权登录(如果没有自动打开,请复制终端显示的链接到浏览器):
vercel login

随后应会自动打开网址,如果没有请手动访问你终端中输出的网址。

点击 Allow , 过一会会提示 Authorization successful 便表示验证通过。

输入 N 后回车。
步骤 3:初始化并部署
进入你的 Hexo 博客根目录(即包含 package.json 的文件夹),执行部署命令:
vercel

第一个配置直接回车。

输入 N,如果你已经创建过则输入 Y,本期内容不讲解已经创建的情况.

输入项目名称,很大一部分上决定了 Vercel 为你分配的子域名前缀。例如:cialloworld123.vercel.app,则这个 cialloworld123 是你的项目名称。(除非重名,重名 Vercel 会给你在子域名前缀塞东西以防止重复。)

输入 N,除非没检测到 Hexo。

如果你不了解的话建议还是输入 N。
等待片刻,当终端显示 Inspect 链接和 Production 链接时,说明部署成功。点击 Production 链接即可访问你的博客。

步骤 4:后续更新
以后每次你修改了博客内容或配置,只需要在本地执行以下两个命令即可更新线上版本:
vercel --prod
Vercel 会自动上传和构建博客。
总结
至此,我们已经将博客部署到了互联网上。
Vercel 为个人博客部署带来了极大的便利:
- 零成本:免费套餐完全够用
- 零运维:不需要买服务器,安全与维护全部免费
- 极致体验:自动 HTTPS、全球 CDN 加速、与 Git 无缝集成(好吧如果你选择 Git 部署。)
很可怕吗,不对这不可怕。
现在,你已经拥有了一个属于自己的个人博客。接下来,你可以专注于最牛逼的事情,即用博客记录你的想法。反正啥叽里咕噜的都能写。
不要犹豫,现在就开始部署,尝试写下你的第一篇文章吧,祝你写作愉快。