一、为什么用「GitHub + Vercel」？搭建个人博客，很多人第一反应是买服务器、装 WordPress。但对只想记录、分享、沉淀内容的人来说，那既费钱又费心。更轻的方案是静态博客： GitHub 免费托管你的博客源码（文章就是 Markdown 文件，存在仓库里，天然可版本管理、可回滚）； Vercel 免费把源码自动构建并部署到全球 CDN，每次 git push 自动更新线上站点。两者结合，你拥有的是：免费、无需运维、秒级部署、自带全球加速的个人站点。这套方案的核心优势维度说明成本完全免费，Vercel Hobby 免费档足够个人博客使用部署 Git 集成，push 即部署，全自动速度静态站点 + CDN 全球加速，秒开维护零服务器、零运维、无安全补丁负担内容用 Markdown 写作，纯文本、可版本控制、永不丢失扩展可免费绑定自定义域名、接评论 / 统计 / 搜索

Vercel 免费档（Hobby）主要限额项目限额带宽 / 流量 100 GB / 月构建时长 6000 分钟 / 月构建次数无限并发构建 1 个域名免费子域名 xxx.vercel.app，可免费绑定自定义域名

对个人博客来说，这些额度基本用不完。

二、原理：GitHub 管代码，Vercel 管上线一句话理解这套体系：你在 GitHub 仓库里写文章 → git push → Vercel 监听到推送 → 自动拉取、构建、部署到 CDN → 全网可见。本地写文章 → git push → GitHub 仓库 → Vercel 检测到更新 → 自动构建(生成静态页面) → 部署到全球 CDN → 访问 https://你的项目名.vercel.app

这样写文章就像「提交一次代码」，发布是自动完成的。

三、先选一个静态站点生成器（SSG）「静态博客」一般需要一个静态站点生成器（Static Site Generator），它把 Markdown 文章编译成纯 HTML 页面。主流选择如下：生成器语言 / 技术适合人群特点 Astro JavaScript/Node 想紧跟前端趋势、页面极致轻量现代、快、组件化，本文主示例 Hexo Node.js 中文社区资料最多、最省事主题丰富、上手快，适合纯写作 Hugo Go 追求构建极速、喜欢极简单二进制、构建秒级 Next.js React 想要博客 + 全栈能力 Vercel 同厂，体验最佳 VitePress Vue 想要文档型 / 极客风博客基于 Vite，快且简洁 Jekyll Ruby 老牌、GitHub Pages 原生默认无需 Vercel，静态为主

怎么选？只想快速写博客、不爱折腾 → 推荐 Hexo 或 Astro；想要最现代、最快 → Astro；以后可能做复杂网站 / 应用 → Next.js。本文以 Astro 为主示例走完整流程（步骤对所有生成器通用，只需替换构建命令），并在文末附 Hexo 等替换说明。

四、开始前的准备一个 GitHub 账号 —— 在 github.com 注册（免费）。安装 Git —— 从 git-scm.com 下载安装，终端输入 git --version 验证。安装 Node.js（推荐 LTS 版本） —— 从 nodejs.org 下载，终端输入 node -v 和 npm -v 验证。如果只做「纯静态 HTML」而非框架项目，第 3 步可省略。

五、完整步骤（以 Astro 为例）第 1 步：在 GitHub 创建仓库登录 GitHub，点右上角 + → New repository；仓库名随意，如 my-blog；选择 Public（Vercel 免费部署需要）；不要勾选 "Add a README"（空仓库即可），点击 Create repository；复制页面上出现的远程地址（https://github.com/你的用户名/my-blog.git），备用。第 2 步：本地初始化博客项目打开终端，运行：

用 Astro 官方博客模板初始化项目

npm create astro@latest -- --template blog

按提示给项目起名（如 my-blog），进入目录并启动本地预览： cd my-blog npm install npm run dev

浏览器打开 http://localhost:4321，能看到博客本地跑起来了。第 3 步：配置 Git 并推送到 GitHub 在项目根目录执行：

关联远程仓库（换成你自己的地址）

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

如果之前用过 Git 且已配置过用户名邮箱，可直接 git push。首次使用可能需要先配置：git config --global user.name "你的名字" 和 git config --global user.email "你的邮箱"。第 4 步：把仓库导入 Vercel 打开 vercel.com，用 GitHub 账号注册登录；点击 Add New → Project；选择 Git Provider 为 GitHub，授权 Vercel 访问你的仓库；在仓库列表中找到 my-blog，点击 Import； Vercel 会自动识别出这是 Astro 项目，并自动填好： Build Command：astro build Output Directory：dist 其余保持默认，点击 Deploy。等几十秒构建完成，你就得到一个线上地址：https://my-blog.vercel.app，打开即是你的博客。第 5 步：写第一篇文章并发布博客文章是放在 src/content/（或 content/）目录下的 Markdown 文件。新建一个：

title: "我的第一篇文章" description: "从今天开始记录" pubDate: 2026-09-27

欢迎来到我的博客！这是第一篇文章。

保存后提交并推送： git add -A git commit -m "add first post" git push

几十秒后，线上博客自动更新—— 文章已经出现在首页。以后写文章，重复这一步即可。

六、部署的两种方式（按需选）上面用的是图形界面（GUI）导入，推荐新手使用。资深用户也可用 Vercel CLI： npm install -g vercel vercel login # 登录 vercel link # 把本地项目关联到 Vercel 项目 vercel --prod # 构建并部署到生产环境

两种方式都会在每次 git push 时自动重新部署，效果一致。

七、（可选）绑定你自己的域名 Vercel 免费允许绑定自定义域名：在 Vercel 项目页进入 Settings → Domains；输入你的域名（如 blog.example.com），点击 Add；按提示到你的域名服务商（阿里云、腾讯云、Namecheap 等）添加 DNS 记录（CNAME 指向 cname.vercel.com，或 A 记录指向 Vercel 给的 IP）；等 DNS 生效后，即可通过你自己的域名访问。

八、进阶玩法博客上线只是开始，你可以继续增强：需求方案评论系统接入 Giscus、utterances（免费，基于 GitHub）阅读统计接入 umami、Plausible（免费档）站内搜索主题自带或接入 Pagefind RSS 订阅多数主题自带 rss.xml SEO 优化配置站点描述、sitemap、og 图自动发布已由 Git 集成自动完成多端预览每次 PR 都有独立预览 URL

九、常见问题与注意点为什么我的仓库导入后构建失败？多为 Node 版本或缺少依赖导致。可在 Vercel 项目 Settings → General 里指定 Node 版本，并确认 package.json 完整。纯静态 HTML 项目怎么部署？无需框架。GitHub 建仓库 → 把 HTML 文件放进去 push → Vercel 导入，不填任何构建命令，Output 选项目根目录即可。会不会收费？ Hobby 免费档对个人博客足够。注意不要勾选企业 / 团队付费计划，涉及敏感生产流量时留意免费档并发构建为 1 的限制。文章写错了 / 想删除怎么办？都是 Markdown 文本，直接改或删文件再 push 即可，Git 历史可回溯。担心免费域名被滥用？这是常识误区 —— 个人博客正常使用没有任何问题，只要不用于侵权、色情等违规内容即可。

十、成本与总结全部成本：0 元。需要付出的只是时间 ——10 分钟完成上线，之后每次发文约 1 分钟。能力是否免费代码托管（GitHub） ✅ 免费构建与部署（Vercel） ✅ 免费 CDN 加速 ✅ 免费自定义域名（若你有） ✅ 免费绑定评论 / 统计 ✅ 免费方案

适合谁？想拥有独立、可长期维护博客的写作者；学生、开发者、产品经理，想建立个人技术沉淀与作品集；不想花钱买服务器、又受够复杂部署的人。总结流程一句话： GitHub 建仓库存源码 → 本地用 SSG 写文章 → git push → Vercel 自动构建部署 → 全世界访问你的博客。现在就去动手吧 —— 第一篇「Hello, World」已经在等你了。