搬瓦工搭建 Hugo 静态网站生成器教程

Hugo 是目前最快的静态网站生成器之一，使用 Go 语言编写，能在毫秒级别完成数千页面的构建。它非常适合搭建博客、文档站和个人网站。静态网站的优势在于安全性高、速度快、资源占用极低，搬瓦工入门方案即可轻松承载大流量访问。本文将介绍如何在搬瓦工 VPS 上安装 Hugo 并部署静态网站。购买搬瓦工 VPS 请参考全部方案，使用优惠码 NODESEEK2026 可享受 6.77% 的折扣。

一、安装 Hugo

1.1 使用预编译二进制文件安装（推荐）

apt update && apt install wget -y

# 下载最新版 Hugo Extended（支持 SCSS）
wget https://github.com/gohugoio/hugo/releases/download/v0.139.0/hugo_extended_0.139.0_linux-amd64.deb
dpkg -i hugo_extended_0.139.0_linux-amd64.deb

# 验证安装
hugo version

1.2 使用 Snap 安装

snap install hugo --channel=extended

二、创建 Hugo 站点

2.1 初始化项目

cd /opt
hugo new site mysite
cd mysite

2.2 安装主题

Hugo 拥有丰富的主题生态，以下以 PaperMod 主题为例：

apt install git -y
git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

2.3 配置站点

cat > /opt/mysite/hugo.toml << 'EOF'
baseURL = "https://yourdomain.com/"
languageCode = "zh-cn"
title = "我的网站"
theme = "PaperMod"

[params]
  env = "production"
  description = "我的个人博客"
  author = "Your Name"
  ShowReadingTime = true
  ShowShareButtons = true
  ShowPostNavLinks = true
  ShowBreadCrumbs = true
  ShowCodeCopyButtons = true

[params.homeInfoParams]
  Title = "欢迎来到我的博客"
  Content = "在这里分享技术文章和生活感悟"

[[params.socialIcons]]
  name = "github"
  url = "https://github.com/yourusername"

[menu]
  [[menu.main]]
    identifier = "archives"
    name = "归档"
    url = "/archives/"
    weight = 10
  [[menu.main]]
    identifier = "tags"
    name = "标签"
    url = "/tags/"
    weight = 20
  [[menu.main]]
    identifier = "search"
    name = "搜索"
    url = "/search/"
    weight = 30

[outputs]
  home = ["HTML", "RSS", "JSON"]
EOF

三、创建内容

3.1 创建文章

hugo new posts/my-first-post.md

编辑生成的 Markdown 文件，文章使用 Front Matter 定义元数据：

cat > /opt/mysite/content/posts/my-first-post.md << 'EOF'
---
title: "我的第一篇文章"
date: 2026-03-28
draft: false
tags: ["教程", "Hugo"]
categories: ["技术"]
description: "这是使用 Hugo 创建的第一篇博客文章"
---

## 正文内容

这里写文章正文，支持标准 Markdown 语法。

### 代码示例

可以直接嵌入代码块展示各种编程语言的代码。
EOF

3.2 创建归档页面

cat > /opt/mysite/content/archives.md << 'EOF'
---
title: "归档"
layout: "archives"
url: "/archives/"
summary: "archives"
---
EOF

四、本地预览与构建

4.1 本地预览

cd /opt/mysite
hugo server --bind 0.0.0.0 --baseURL http://VPS的IP -D

访问 http://VPS的IP:1313 预览效果。确认满意后按 Ctrl+C 停止。

4.2 构建静态文件

hugo --minify

构建后的静态文件输出到 public/ 目录中。

五、Nginx 部署

5.1 安装 Nginx

apt install nginx -y

5.2 配置 Nginx

cat > /etc/nginx/sites-available/hugo.conf << 'EOF'
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    root /opt/mysite/public;
    index index.html;

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

    # 静态资源缓存
    location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    # 启用 Gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
    gzip_min_length 1000;

    error_page 404 /404.html;
}
EOF

ln -sf /etc/nginx/sites-available/hugo.conf /etc/nginx/sites-enabled/
rm -f /etc/nginx/sites-enabled/default
nginx -t && systemctl restart nginx

5.3 配置 SSL 证书

apt install certbot python3-certbot-nginx -y
certbot --nginx -d yourdomain.com -d www.yourdomain.com

六、自动化构建部署

6.1 使用 Git Webhook 自动部署

cat > /opt/mysite/deploy.sh << 'EOF'
#!/bin/bash
cd /opt/mysite
git pull origin main
hugo --minify
systemctl reload nginx
echo "[$(date)] Deploy completed"
EOF
chmod +x /opt/mysite/deploy.sh

6.2 使用定时任务自动构建

# 每小时从 Git 仓库拉取并重新构建
(crontab -l 2>/dev/null; echo "0 * * * * /opt/mysite/deploy.sh >> /var/log/hugo-deploy.log 2>&1") | crontab -

七、性能优化

Hugo 生成的静态文件本身就非常高效，配合 Nginx 优化可以获得极致性能：

# 构建时启用压缩
hugo --minify --gc

# Nginx 开启 Brotli 压缩（如已安装模块）
# 开启 HTTP/2 提升加载速度

八、常见问题

主题不显示

确认 hugo.toml 中的 theme 名称与 themes/ 目录下的文件夹名一致。使用 Git Submodule 安装主题时确保子模块已正确初始化。

文章不显示

检查 Front Matter 中 draft 是否设为 false。草稿状态的文章不会出现在正式构建中。

总结

Hugo 是搭建静态网站的极佳选择，构建速度极快、部署简单。在搬瓦工 VPS 上配合 Nginx 使用，即使是最基础的方案也能承载大量访问。如果你更喜欢 Node.js 生态的静态站点生成器，可以参考 Hexo 博客部署、VitePress 文档站等教程。购买搬瓦工 VPS 请访问 bwh81.net，使用优惠码 NODESEEK2026 可享受 6.77% 的折扣。