Hugo 静态博客从零部署:5 分钟搭建自己的个人网站

想拥有一个属于自己的个人博客,但又嫌 WordPress 臃肿、Typecho 功能太少?Hugo 是你的最佳选择:用 Markdown 写文章,一键生成纯静态 HTML,部署到 GitHub Pages 完全免费。本文从环境准备到上线运营,手把手教你搭建一个高性能、可定制的个人博客。

为什么选择 Hugo

市面上流行的静态博客生成器对比:

Hugo 的最大优势是快——文章多了之后,Hexo 构建可能要几分钟,Hugo 几秒搞定。

第一步:安装 Hugo

macOS

1	brew install hugo

Windows

1
2
3

choco install hugo -confirm

scoop install hugo

Linux


sudo apt install hugo


wget https://github.com/gohugoio/hugo/releases/download/v0.124.0/hugo_extended_0.124.0_linux-amd64.tar.gz
tar -xzf hugo_extended_0.124.0_linux-amd64.tar.gz
sudo mv hugo /usr/local/bin/

验证安装

1	hugo version

第二步:创建博客

初始化站点

1 2	hugo new site myblog cd myblog

选择主题

Hugo 官方主题站 themes.gohugo.io 有 300+ 主题可选。推荐几个:

PaperMod:简洁优雅,适合技术博客
Stack:卡片式布局,视觉冲击强
LoveIt:功能丰富,中文友好
Even:极简风格

安装主题(以 PaperMod 为例)

1 2	git init git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

配置主题

编辑 config.toml:

baseURL = "https://yourdomain.com/"
languageCode = "zh-cn"
defaultContentLanguage = "zh-cn"
title = "我的技术博客"
theme = "PaperMod"


[params]
  env = "production"
  description = "分享技术与生活"
  author = "你的名字"
  DateFormat = "2006-01-02"
  defaultTheme = "auto"  


[[menu.main]]
  identifier = "posts"
  name = "文章"
  url = "/posts/"
  weight = 1

[[menu.main]]
  identifier = "archives"
  name = "归档"
  url = "/archives/"
  weight = 2

[[menu.main]]
  identifier = "about"
  name = "关于"
  url = "/about/"
  weight = 3


[taxonomies]
  category = "categories"
  tag = "tags"
  series = "series"

第三步:写第一篇文章

1	hugo new posts/hello-world.md

自动生成的模板:

---
title: "Hello World"
date: 2026-09-07T12:00:00+08:00
draft: true
toc: true
tags:
  - 测试
categories:
  - 生活
---

## 这是我的第一篇文章

这是正文内容。

把 draft: true 改成 draft: false 就会在生成时被包含。

启动本地预览

1 2	hugo server -D

常用参数:

-D, --buildDrafts:包含草稿
--bind 0.0.0.0:允许局域网访问
--port 8080:修改端口
--navigateToChanged:文件变更自动刷新(默认开启)

第四步:自定义页面

About 页面

1	hugo new about.md

---
title: "关于我"
date: 2026-09-07T12:00:00+08:00
layout: "single"
---

## 我是谁

技术爱好者 / 终身学习者

友情链接

content/links.md:

---
title: "友情链接"
date: 2026-09-07T12:00:00+08:00
layout: "links"
---

主题文件夹下创建 layouts/links.html 自定义模板。

评论系统

推荐使用 Giscus(基于 GitHub Discussions):

打开 giscus.app 配置
在 config.toml 中添加:

[params]
  enableGiscus = true

  [params.giscus]
    repo = "yourname/yourname.github.io"
    repoId = "R_xxx"
    category = "General"
    categoryId = "DIC_xxx"
    mapping = "pathname"
    lang = "zh-CN"

第五步:部署

方案 1:GitHub Pages(免费,推荐)

准备工作

GitHub 创建仓库 <username>.github.io
本地配置:


echo "public/" >> .gitignore
echo "resources/" >> .gitignore



set -e

echo "Building site..."
hugo --minify

echo "Deploying to GitHub..."
cd public
git init
git remote add origin git@github.com:username/username.github.io.git
git add .
git commit -m "Deploy $(date +'%Y-%m-%d %H:%M:%S')"
git push -f origin main
cd ..

1 2	chmod +x deploy.sh ./deploy.sh

GitHub Actions 自动部署

创建 .github/workflows/deploy.yml:

name: Deploy Hugo

on:
  push:
    branches: [main]

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.124.0'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

之后只要 git push 就能自动部署。

方案 2:Vercel(国内访问更友好)

注册 vercel.com
导入 GitHub 仓库
框架预设选 Hugo
一键部署,自动 HTTPS

方案 3:自己的服务器


server {
    listen 80;
    server_name blog.example.com;
    root /var/www/blog/public;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    
    gzip on;
    gzip_types text/css application/javascript text/javascript;
}

同步:

1	rsync -avz --delete public/ user@server:/var/www/blog/public/

第六步:SEO 优化

1. sitemap.xml

Hugo 自动生成,无需配置。提交到 Google Search Console 和百度站长平台。

2. robots.txt

# static/robots.txt
User-agent: *
Allow: /

Sitemap: https://yourdomain.com/sitemap.xml

Hugo 自动生成 index.xml(RSS),在主题里启用即可。

4. 文章结构化数据(SEO 友好)

使用 JSON-LD:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{{ .Title }}",
  "datePublished": "{{ .Date }}",
  "author": {
    "@type": "Person",
    "name": "{{ .Site.Params.author }}"
  }
}
</script>

第七步:性能优化

1. 启用图片懒加载

主题里配置:

1 2	[params] lazyImage = true

2. 压缩资源

1	hugo --minify

自动压缩 HTML/CSS/JS。

3. CDN 加速

把静态资源(jsDelivr / Cloudflare / 腾讯云 CDN)加上:

1
2
3

[params]
  [params.assets]
    favicon = "https://cdn.jsdelivr.net/gh/username/repo/path/favicon.ico"

4. 配置 Service Worker(PWA)

PaperMod 主题内置支持,在 config.toml 里:

1 2	[params] enablePWA = true

第八步:数据迁移与备份

备份


tar czf blog_backup_$(date +%Y%m%d).tar.gz \
  --exclude='public' \
  --exclude='resources' \
  .

从 Hexo 迁移

可以用 hexo-hugo-migrate 工具,把 Hexo 的 source/_posts/*.md 转成 Hugo 格式。

常见问题

文章不显示?

检查:

draft: false?(草稿不显示)
日期是未来时间?(默认会过滤掉)
hugo.toml 里 buildFuture 和 buildExpired 设置

主题切换后样式乱了?

清缓存重建:

1	hugo --gc --minify

中文 URL 404?

1
2
3


[permalinks]
  posts = "/:year/:month/:day/:slug/"

或者干脆用拼音/英文 slug。

总结

Hugo 的工作流非常简洁:

1	写 Markdown → hugo server 本地预览 → git push 触发 CI → 自动部署

一旦配好,你就可以专注于内容创作,而不是折腾环境。这就是静态博客的魅力。