个人博客搭建全记录：Hugo + Vercel 方案选择与部署（上）

Sat, 21 Mar 2026 00:00:00 +0000

本次个人博客建站复盘将分为上下两篇。本篇（上篇）主要聚焦于前期的方案选择、Hugo 主题选型，以及如何将博客从本地部署到 Vercel 实现公网上线。

一、方案选择

在动手前，我其实考虑过两种方案：一是零自建博客，二是套用成熟的模版。

以下是我对这两个方案的优缺点对比：

维度	直接使用模版 (Hugo, Hexo 等)	从零自建 (前后端自己写)
主要目的	快速搭建，把核心精力放在写内容上。	将博客本身作为一个独立的项目经历写进简历。
时间成本	极低（几个小时即可上线）。	很高（需要设计数据库、写接口、调前端、部署）。
技术展现	展现你的技术深度、总结能力和开源参与度。	直接展现你的编码能力、架构设计和业务逻辑处理。
维护难度	几乎为零，专注于 Markdown 写作。	需要自己处理 Bug、服务器安全、数据库备份等。

作为一名在校生，从零自建固然能展示项目思路，但我最终还是选择了成熟的模板方案。原因很简单：我已经有其他的实际项目背书，不需要再靠一个博客来证明开发能力。此外，个人“造的轮子”在 SEO 优化、移动端适配等细节上，往往拼不过开源社区沉淀多年的成熟产物。

二、Hugo 主题选型

在确定使用由 Go 语言编写、构建速度极快的静态网站生成器 Hugo 后，我重点考察了 GitHub 上 Star 极高的三款主题：

PaperMod：极简主义的巅峰。加载速度极快，没有任何多余的视觉干扰。如果你的博客全是硬核的底层原理分析，它非常合适。
Blowfish：专为程序员打造的“全能战士”。支持直接集成 GitHub 状态卡片，非常适合把博客当作开源作品集的人。
Stack：卡片式的精美个人主页。它采用了类似社交媒体的左侧固定导航栏，UI/UX 简单但布局清晰。实际体验下来，它甚至带给我一种读小说般的沉浸感。

最终，我选择了 Stack 主题 作为我的博客模版。

三、搭建复现

以下是具体的实操步骤。需要注意的是，Stack 主题因为使用了 SCSS 编译，所以必须安装 Hugo Extended（扩展版）。

Step 1: 安装 Hugo Extended

根据你的操作系统，在终端运行相应的命令：

macOS (使用 Homebrew)
```
brew install hugo
```
Windows (使用原生包管理器 Winget)
```
winget install Hugo.Hugo.Extended
```

安装完成后，验证一下版本（请确保输出信息里带有 extended 字样）：

hugo version

Step 2: 初始化项目并拉取主题

创建一个新的 Hugo 站点，并将 Stack 主题作为 Git 子模块引入：

# 创建站点目录
hugo new site myblog
cd myblog

# 初始化 git 仓库
git init

# 将 Stack 主题拉取到 themes 目录
git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/hugo-theme-stack

Step 3: “偷懒”神技 —— 复制 ExampleSite

这是上手 Stack 主题最快的方式。主题作者已经配好了一套完整的演示模板，我们直接拿来用：

# 在 myblog 根目录下执行：将示例站点的配置文件和内容复制到你的项目根目录并覆盖
cp -r themes/hugo-theme-stack/exampleSite/* ./

注：Windows 用户如果觉得命令行麻烦，可以直接在资源管理器中，把 themes/hugo-theme-stack/exampleSite/ 下的所有文件手动复制并粘贴到项目根目录。

Step 4: 本地启动

在终端运行以下命令，然后打开浏览器访问 http://localhost:1313，你就能看到博客的雏形了！

hugo server -D

四、Vercel 部署与域名绑定

本地测试没问题后，我们需要把它部署到公网。传统流程通常需要购买服务器和域名、进行工信部备案，还要手动配置 SSL 证书，过程相对繁琐。这里我强烈推荐使用 Vercel。

只需简单配置域名 DNS 解析和环境变量，之后每次上传代码就能实现自动 CI/CD。Vercel 还会自动生成 SSL 证书并提供全球 CDN 加速，不仅极大地提升了用户的访问体验，还彻底省去了维护服务器的麻烦。

Step 1: 将代码推送到 GitHub

在 GitHub 上新建一个仓库（比如叫 my-blog），然后将本地代码 Push 上去：

git add .
git commit -m "init blog"
git branch -M main
git remote add origin https://github.com/你的用户名/my-blog.git
git push -u origin main

Step 2: Vercel 一键部署与环境变量配置

关键一步：因为 Stack 主题对 Hugo 版本有要求，我们需要在部署前展开 Environment Variables (环境变量) 选项卡，添加一条记录：

Key: HUGO_VERSION
Value: 0.160.0 （建议填最新版本号，至少不低于 0.157.0）

点击 Deploy。等待几十秒，Vercel 就会为你自动构建并分配一个临时域名。此后，你每次往 GitHub push 代码，Vercel 都会自动触发更新。

Step 3: 绑定自定义域名

如果你像我一样在腾讯云（或阿里云）购买了专属域名（如 jiangwan.ink），还需要进行一下解析：

进入 Vercel 该项目的 Settings -> Domains，填入你的域名 jiangwan.ink。
登录腾讯云域名控制台，找到该域名，添加一条 A 记录：
- 主机记录 (Name): @
- 记录类型 (Type): A
- 记录值 (Value): 填写 Vercel 提供的 IP 地址（如 76.76.21.21，具体以 Vercel 提示为准）

等待几分钟 DNS 生效，你的博客就正式公网上线了！

至此，我们的个人博客已经基本搭建完成，可以开始撰写并发布文章了。但相比于一个功能完备的博客，它目前还缺少一些进阶配置，例如：评论区、友情链接以及后台用户数据统计。

在下篇中，我将带大家一步步完成这三大进阶配置。敬请期待！

个人博客搭建 on Jiangwan's Blog