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

选型对比、整体架构与完整搭建步骤:本地编辑 Markdown,git 提交后 Vercel 自动更新

我想搭建一个私有博客,本地编辑 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

  • Windowswinget install Hugo.Hugo.Extended(或去 GitHub Releases 下载 hugo_extended_*_windows-amd64.zip,解压后把目录加进 PATH)
  • macOSbrew 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 自动部署

  1. 打开 vercel.com,用 GitHub 账号登录(授权时会要求安装 Vercel GitHub App,勾选允许访问你的博客仓库)
  2. Add New → Project → Import 选刚才的仓库
  3. Framework Preset 选 Hugo(Vercel 会自动识别);确认 Build Command 为 hugo、Output Directory 为 public
  4. 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 框架,其余流程完全相同。