toc 目录

管理员 - 1

Object2
Object2 摆烂中
tagHome
arrow_back返回

使用 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

image.png

出现这个就是成了

步骤 2 - 初始化

选择一个美丽的文件夹,作为你的博客的根目录

在文件夹中执行

hexo init blog
cd blog

image.png

蒸蚌!你又完成了一步, 注意执行完 init 一定要 cd 到新文件夹

步骤 3:安装依赖

进入项目目录后,安装项目所需的依赖包:

npm install

如果听不懂的话反正跟着做没错就行

image.png

出现 added * packages 并且没报错就是成功了.

步骤 4:预览

现在你可以在本地启动一个开发服务器,即在编辑内容时也可以实时看到你的博客发生了什么变化。

hexo s
# 或者
hexo server

使用浏览器打开其提供的访问网址(通常为 http://localhost:4000),你就能看见 Hexo 的默认主题和一篇自动生成的示例文章!

image.png

熟悉以下命令将帮助你高效地管理博客:

  • 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 "我的第一篇博客"

image.png

执行成功后,终端会提示你新文章的路径,通常位于 source/_posts/你的文章标题.md

使用 VS Code 编辑

推荐使用 VS Code(微软大战代码)作为你的 Markdown 编辑器,它拥有丰富的插件生态,能极大地提升写作体验。

  1. 打开文件:在 VSCode 中打开刚才生成的 .md 文件。

  2. 安装推荐插件

    • Markdown All in One:提供快捷键、自动补全、目录生成等便捷功能。
    • Markdown Preview Enhanced:提供强大的实时预览功能,支持代码高亮、数学公式等。
  3. 开始写作

    • 文件顶部的 --- 之间是 FrontMatter(文章元数据),你可以在这里设置标题、日期、标签、分类等,Hexo 会识别它们.
    • 下方就是正文部分,使用标准的 Markdown 语法进行写作。
    ---
    title: 我的第一篇博客
    date: 2026-06-06 10:00:00
    tags:
      - 随笔
      - 生活
    categories:
      - 日记
    ---
    
    这里是正文内容,你可以尽情在这里哔哩吧啦。
    
    ## 二级标题
    
    - 列表项 1
    - 列表项 2
    

image.png别忘了保存

预览与发布

写作过程中,你可以随时使用 hexo s 启动本地服务器,在浏览器中实时预览你的文章效果。满意后,记得使用 vercel 将最新内容部署到线上。

部署到 Vercel

当本地预览满意后,我们需要将博客发布到互联网上,让所有人都能访问。Vercel 提供了极其简单的部署流程,它能自动检测你的 Hexo 项目,并进行构建和托管。

考虑到国内网络环境问题导致 Github, GitLab 访问不是非常稳定,因此我们将教学使用 Vercel 提供的命令行工具部署至 Vercel。这种方式更加直接,非常便捷,且无需创建一个单独的仓库。

步骤 1:安装 Vercel CLI

在终端中执行以下命令,全局安装 Vercel CLI:

npm install -g vercel

步骤 2:登录 Vercel

安装完成后,执行登录命令。这会打开浏览器让你授权登录(如果没有自动打开,请复制终端显示的链接到浏览器):

vercel login

image.png

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

image.png

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

image.png

输入 N 后回车。

步骤 3:初始化并部署

进入你的 Hexo 博客根目录(即包含 package.json 的文件夹),执行部署命令:

vercel

image.png

第一个配置直接回车。

image.png

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

image.png

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

image.png

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

image.png

如果你不了解的话建议还是输入 N

等待片刻,当终端显示 Inspect 链接和 Production 链接时,说明部署成功。点击 Production 链接即可访问你的博客。

image.png

步骤 4:后续更新

以后每次你修改了博客内容或配置,只需要在本地执行以下两个命令即可更新线上版本:

vercel --prod

Vercel 会自动上传和构建博客。

总结

至此,我们已经将博客部署到了互联网上。

Vercel 为个人博客部署带来了极大的便利:

  • 零成本:免费套餐完全够用
  • 零运维:不需要买服务器,安全与维护全部免费
  • 极致体验:自动 HTTPS、全球 CDN 加速、与 Git 无缝集成(好吧如果你选择 Git 部署。)

很可怕吗,不对这不可怕。

现在,你已经拥有了一个属于自己的个人博客。接下来,你可以专注于最牛逼的事情,即用博客记录你的想法。反正啥叽里咕噜的都能写。

不要犹豫,现在就开始部署,尝试写下你的第一篇文章吧,祝你写作愉快。