1.Hugo是什么？

Hugo是一个用Go语言编写的静态网站生成器，它快速、高效且易于使用。Hugo支持多种主题和自定义配置，非常适合构建个人博客、企业网站等静态内容站点。

安装Hugo

以Mac为例，通过Homebrew安装Hugo：

brew install hugo

创建Hugo项目

下一步，利用hugo new site命令创建项目。

hugo new site blog_demo
cd blog_demo
git init

还需要选择一个主题。https://themes.gohugo.io提供了很多主题可供选择。

选择Hugo主题

在Hugo官方主题库中，这里选择 Ananke 主题作为示例。这是 Hugo 官方推荐的入门主题，配置简单、开箱即用，非常适合快速搭建个人博客。

通过 git submodule 方式安装主题：

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

配置Hugo站点

编辑 hugo.toml 文件，添加基本配置：

baseURL = 'https://your-site.vercel.app/'
languageCode = 'zh-cn'
title = '我的博客'
theme = 'ananke'

[params]
  description = '欢迎来到我的博客'
  recent_posts_number = 5

配置非常简洁，Ananke 主题会自动处理大部分功能。

创建第一篇文章

使用Hugo命令创建新文章：

hugo new content/posts/my-first-post.md

编辑生成的markdown文件，将draft设置为false以发布文章：

+++
date = '2026-02-06T00:35:43+08:00'
draft = false
title = '我的第一篇文章'
+++

这是文章内容...

本地预览

在本地启动开发服务器预览网站：

hugo server -D

访问http://localhost:1313即可看到你的博客。效果如下： Blog demo

2.代码托管到GitHub

将项目推送到GitHub仓库：

git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

3.在Vercel部署

Vercel是一个现代化的云平台，专为前端开发者设计。它提供了零配置的部署体验，支持自动构建、全球CDN加速、HTTPS证书等功能。Vercel与GitHub深度集成，可以实现代码推送后自动部署。

创建Vercel项目

  1. 访问Vercel官网，使用GitHub账号登录
  2. 点击"Add New Project"，选择你的Hugo博客仓库

配置部署设置

  1. Vercel会自动检测到这是Hugo项目，配置如下：
    • Framework Preset: Hugo
    • Build Command: hugo --gc --minify
    • Output Directory: public
  2. 点击"Deploy"开始部署

几分钟后，你的博客就会部署完成，Vercel会提供一个.vercel.app域名供访问。

自动部署

配置完成后，每次你向GitHub推送代码，Vercel都会自动触发构建和部署。这意味着你只需要：

  1. 本地编写文章
  2. git add . 和 git commit
  3. git push

你的博客就会自动更新！

Vercel Analytics与Speed Insights

Vercel提供了强大的分析工具，帮助你了解网站的访问情况和性能表现：

Web Analytics（网站分析）：

  • 实时访问数据统计
  • 页面浏览量、访客来源分析
  • 设备和地理位置分布
  • 完全符合隐私保护标准（无需Cookie）

Speed Insights（速度洞察）：

  • 真实用户体验监控（Real User Monitoring）
  • Core Web Vitals指标追踪（LCP、FID、CLS）
  • 性能评分和优化建议
  • 帮助提升SEO排名

在Vercel项目中，可以启用这些功能（利用Agent，它会提交一个PR，你需要手动Merge），完全免费且无需额外配置。

4.绑定自定义域名

如果你有自己的域名，这里推荐Spaceship（价格便宜），可以在Vercel项目设置中添加：

  1. 进入项目的Settings → Domains
  2. 输入你的域名
  3. 按照提示在域名服务商处添加DNS记录
  4. 等待DNS生效，Vercel会自动配置HTTPS证书

5.总结

通过Hugo + Vercel + GitHub的组合，可以实现：

  • ✅ 快速的静态网站生成
  • ✅ 免费的托管和CDN加速
  • ✅ 自动化的部署流程
  • ✅ 免费的HTTPS证书
  • ✅ 版本控制和备份

这套方案低成本、高性能，非常适合个人博客使用。