私有博客搭建指南：Hugo + GitHub + Vercel

Wed, 16 Sep 2026 08:30:00 +0800

我想搭建一个私有博客，本地编辑 Markdown，git 提交后自动更新，代码托管到 GitHub + Vercel。

结论先行：推荐 Hugo —— 它单文件安装、零依赖、构建极快，和你"本地 Markdown + git 推送 + 自动部署"的工作流匹配度最高；如果想要更现代的前端定制能力，备选 Astro。

一、为什么选 Hugo（对比）

维度	Hugo（推荐）	Astro（备选）	Hexo
底层	Go，单二进制，无运行时依赖	Node.js 前端框架	Node.js
构建速度	最快：实测 1 万页约 2.95 秒	快，构建期零 JS 输出	较慢：1000 页约 45 秒
上手门槛	低（装一个程序即可）	中（需前端基础）	低，中文资料最多
主题生态	丰富（PaperMod、Stack、DoIt 等）	增长快	丰富但维护热度下降
适合人群	文章多、技术向、追求极简工作流	想深度定制 UI 的前端开发者	新手、纯中文生态偏好

选 Hugo 的核心理由：你的需求是"本地写 Markdown → git 提交 → 自动更新"，Hugo 不需要任何构建环境（不用装 Node），Vercel 上一条命令搞定，日常维护成本最低。

二、整体架构

每次 git push 后，Vercel 自动拉取代码、执行构建、发布到 CDN，全程无需手动上传：

本地编辑 Markdown → git commit / push → GitHub 仓库
 │
 ▼
 Vercel 自动拉取并构建（hugo）
 │
 ▼
 发布到 CDN → https://xxx.vercel.app

三、详细搭建步骤（Hugo 主线）

第 1 步：本地安装 Hugo

Windows：winget install Hugo.Hugo.Extended（或去 GitHub Releases 下载 hugo_extended_*_windows-amd64.zip，解压后把目录加进 PATH）
macOS：brew install hugo
验证：hugo version

第 2 步：初始化站点并选主题

hugo new site myblog # 创建站点骨架
cd myblog
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod # 下载主题（以 PaperMod 为例）

编辑 hugo.toml，启用主题并写基本信息：

baseURL = "https://你的vercel域名.vercel.app/" # 部署拿到域名后回填，也可先留默认
languageCode = "zh-cn"
title = "我的博客"
theme = "PaperMod"

第 3 步：写第一篇文章并本地预览

hugo new posts/hello.md # 创建文章，正文是标准 Markdown
hugo server -D # 本地预览，浏览器打开 http://localhost:1313

文章头部有 front matter，记得把 draft: true 删掉或改 false，否则发布时不会输出。

第 4 步：Git 初始化并推送 GitHub

echo "/public/" > .gitignore # 构建产物不入库
git init
git add . && git commit -m "init blog"
git branch -M main
git remote add origin https://github.com/你的用户名/仓库名.git
git push -u origin main

GitHub 上先建一个空仓库（不勾选 README，避免和本地冲突）；仓库建 private 也没问题，Vercel 授权后照样能部署。

第 5 步：接入 Vercel 自动部署

打开 vercel.com，用 GitHub 账号登录（授权时会要求安装 Vercel GitHub App，勾选允许访问你的博客仓库）
Add New → Project → Import 选刚才的仓库
Framework Preset 选 Hugo（Vercel 会自动识别）；确认 Build Command 为 hugo、Output Directory 为 public
点 Deploy，一两分钟后访问生成的 https://xxx.vercel.app 即可

之后每次 git push 都会自动触发重新构建，只需导入一次。

第 6 步：日常更新流程（之后每天都一样）

hugo new posts/新文章.md # 写 Markdown
git add . && git commit -m "add: 新文章" && git push

推完等 1～2 分钟，Vercel 自动部署完成，这就是"git 提交后自动更新"的全部日常。

四、几点提醒

“私有博客"的含义：Vercel 部署出的站点是公开可访问的（知道链接即可访问）。如果指"私人内容”，需要额外加访问控制（如部署后前端加密码页或 Basic Auth）；如果只是"个人专属的公开博客"，现在的方案就够了。
国内访问：Vercel 默认域名在国内一般可访问但速度一般，GitHub push 偶有波动。介意的话可以：绑定自己的域名（Vercel → Settings → Domains），或改用 Cloudflare Pages（步骤几乎一致）。
想选 Astro：安装 Node.js 后 npm create astro@latest，用官方博客模板（含 Content Collections），Vercel 会识别 Astro 框架，其余流程完全相同。

Hugo 主题推荐速查

Wed, 16 Sep 2026 08:00:00 +0800

数据截至 2026-09 · ⭐为 GitHub Stars（约值）· 全部有在线演示

风格标尺：极简 ——→ 功能丰富

① 博客主流（社区热度最高）

PaperMod

简介：最流行的极简博客主题，开箱即用、几乎零配置
特色：3 种首页布局 · 站内搜索 · 暗色模式 · 多语言
风格：极简 ●————— 丰富
信息：⭐ 13k · MIT · 活跃维护
演示：https://adityatelange.github.io/hugo-PaperMod/

Stack

简介：卡片式杂志风，图片/封面展示效果出众
特色：卡片布局 · 侧边栏 · 搜索 · 图片灯箱 · 暗色模式
风格：极简 ————●— 丰富
信息：⭐ 6.2k · GPL-3.0 · 活跃维护
演示：https://demo.stack.jimmycai.com/

Blowfish

简介：Tailwind 现代风全能主题，2026 最活跃之一，中文文档完善
特色：16 种配色 · 阅读量/点赞 · 画廊 · Mermaid/图表 · 多语言
风格：极简 —————● 丰富
信息：⭐ 2.6k · MIT · 非常活跃
演示：https://blowfish.page/

FixIt

简介：经典 LoveIt 的继任者，功能堆料天花板
特色：PWA · 内容加密 · AI 摘要 · 27+ 分享 · KaTeX/Mermaid
风格：极简 ——————● 丰富
信息：⭐ 1.1k · MIT · 活跃维护
演示：https://fixit.lruihao.cn/

② 文档 / 知识库

Hextra

简介：现代文档站 + 博客一体，Nextra 风格，零 Node 依赖
特色：FlexSearch 全文检索 · 暗色模式 · 多语言 · 目录/面包屑
风格：极简 ————●— 丰富
信息：⭐ 1.9k · MIT · 活跃维护
演示：https://imfing.github.io/hextra/

Docsy

简介：Google 出品，K8s/gRPC 等大项目同款，适合大型技术文档
特色：多级导航 · 版本化文档 · API 参考布局 · 多语言
风格：极简 ————●— 丰富
信息：⭐ 2.9k · Apache-2.0 · 活跃维护
演示：https://www.docsy.dev/

③ 作品集 / 个人主页

Hugo Blox

简介：模块化建站框架（原 Academic/Wowchemy），学术研究者首选
特色：论文/BibTeX 管理 · Jupyter 渲染 · 课程 · 多语言（多套模板演示）
风格：极简 —————● 丰富
信息：⭐ 10k · MIT · 活跃维护
演示：https://hugoblox.com/templates/

Toha

简介：开发者简历/作品集专用，时间线式经历展示
特色：技能/经历/项目模块化开关 · GitHub 联动 · 22+ 语言 · 暗色模式
风格：极简 ———●—— 丰富
信息：⭐ 1.2k · MIT · 活跃维护
演示：https://toha-guides.netlify.app/

④ 特色风格（回头率高）

Terminal

简介：复古终端风，等宽字体 + 双色调配色，程序员专属气质
特色：5 种双色调 · 在线配色器 · 代码高亮 · 多语言
风格：极简 —●———— 丰富
信息：⭐ 2.8k · MIT · 维护中
演示：https://panr.github.io/hugo-theme-terminal-demo/

Prism

简介：2026 新锐：极简但灵动，Hero 自动从封面取色生成渐变
特色：暗色模式 · PhotoSwipe 灯箱 · 搜索 · 目录 · i18n
风格：极简 ●————— 丰富
信息：新锐 · MIT · 2026-01 发布
演示：https://prism.cai.im/

💡 更多高分备选

主题	一句话点评	演示
Congo	Blowfish 姊妹篇，Lighthouse 满分	https://jpanther.github.io/congo
Coder	极简开发者名片	https://hugo-coder.netlify.app
Paper	比 PaperMod 更纯粹的写作风	https://github.com/nanxiaobei/hugo-paper

建站 on 我的博客