Web开发

Hugo云服务器部署

零基础也能轻松上手的Hugo建站指南，从安装到部署，手把手教你搭建自己的知识库

整体思路

想把Hugo生成的网站部署到服务端，让更多人浏览，有很多种方法，但本质上都是把网站文件上传或生成到服务器指定目录后，通过web服务器（如Nginx），供用户远程访问。这里介绍两个比较简单的思路：

  • 一是把Hugo在本地电脑生成的静态网站文件（public文件夹内的全部文件）直接上传到服务器指定目录，然后用Nginx代理；
  • 二是在服务器上安装Hugo（参考使用Hugo快速搭建本地知识库、博客或项目展示站，把服务器理解成一台你能远程控制的电脑），通过更新网站源文件后触发Hugo自动运行的方式，让Hugo在服务器上自动生成静态网站文件到指定位置，然后用Nginx代理。

方法一容易理解，但频繁更新时稍麻烦些，并且文章的更新日期也会受到影响，只要更新一个文章，其它文章也会随着更新修改日期。更新不频繁的展示类站点，可以用这种方法部署。
方法二稍微复杂些，但更新时更方便，文章的更新日期不会受到影响。一般情况下，推荐使用方法二。

这里主要介绍Hugo在云服务器上的部署，但也会涉及到服务器维护、Nginx的配置、SSL证书的部署等。Hugo之外的内容，也许有说的不详细的地方，请自行查阅相关资料，一般问题都能解决。如果在哪步被卡了很长时间，也可以联系我。

方法一：在云服务器部署Nginx，手动上传网站文件

按以下步骤，可以把你本地用Hugo生成的静态网站部署到云服务器，让互联网上的其它用户访问到。

准备工作

  1. 买一台云服务器（阿里云、腾讯云、华为云等都可以）
  2. 购买一个域名（可选，没有域名也可以用IP访问）
  3. 服务器系统推荐用Ubuntu或CentOS

生成网站文件

在你已配置好hugo的本地电脑上，运行：

1

hugo

这会自动在你网站根目录下生成一个 public 文件夹，里面就是你的网站文件。

上传到服务器

有很多方法上传文件，这里推荐使用FTP工具：

  • 下载FileZilla或WinSCP等FTP工具
  • 填写服务器IP、用户名、密码连接
  • 把 public 文件夹里的所有文件上传到服务器

在服务器上安装Nginx

Nginx 是一个高性能的 Web 服务器和反向代理服务器。在这套部署方案中，它扮演以下角色：

  1. 静态文件服务器：Hugo 生成的是纯静态文件（HTML/CSS/JS），Nginx 专门擅长高效地提供这类静态资源
  2. 接收 HTTP 请求：当用户访问你的网站域名时，Nginx 接收请求并返回对应的网页文件
  3. 域名绑定：通过配置 server_name，让你的网站可以通过域名访问（而不是仅通过 IP）
  4. 负载均衡/反向代理（进阶）：未来如需部署多个服务，Nginx 可以作为统一入口

简单说：Nginx 是网站的"门卫"，负责接收访问请求并把 Hugo 生成的网页文件交给用户浏览器。

登录你的服务器，运行：

1
2

sudo apt update
sudo apt install Nginx -y

配置Nginx

这里只说方法，因为即使粘贴了Nginx配置文件代码，也很可能有问题，需要你根据实际情况修改。

如果没有Nginx配置基础，建议可以充分使用AI工具，如CodeBuddy，来辅助配置。 把你服务器的情况清楚的告诉CodeBuddy，它会帮你生成Nginx配置文件(以下是提示词示范)。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

我的服务器信息
- 域名：(填写你的域名，如 example.com)
- 网站根目录：(默认 /var/www/html，如有不同请填写)
- 是否需要 HTTPS：(是/否，建议选是)
- 邮箱地址：(用于申请 SSL 证书，如 admin@example.com)

- 这是全新云服务器，没有其他 Nginx 站点
- 使用 Ubuntu 系统
- Hugo 已编译完成，文件在网站根目录
- 不需要复杂的反向代理

你要做的就是把AI生成的配置文件上传到服务器，然后测试是否能正常访问。 测试过程一定不是一帆风顺的，可能需要你不断的反馈AI你遇到的问题、报错信息等，然后根据AI建议，修改配置文件，直到能正常访问为止。

云服务器安全组配置

为了确保你的网站能够被外部访问，需要配置云服务器的安全组规则，允许HTTP和HTTPS流量。

  1. 登录你的云服务器管理控制台

  2. 找到安全组设置

  3. 添加入站规则：

    • 允许端口80（HTTP）

    • 允许端口443（HTTPS）

这样配置后，你的网站才能通过公网IP和域名访问。

完成！现在在浏览器里输入你的服务器IP或域名，就能看到你的网站了。

💡 小贴士：

  • 如果有域名，记得在域名服务商那里配置DNS解析
  • 建议配置HTTPS（SSL证书），可以使用Let’s Encrypt免费证书
  • 定期备份你的网站文件

❓ 常见问题：访问网站显示404错误？

可能原因：

  • 文件上传路径不对，检查 /var/www/html/ 目录下是否有文件
  • Nginx配置错误，用 sudo Nginx -t 检查配置
  • 文件权限问题，运行 sudo chown -R www-data:www-data /var/www/html/

方法二：在云服务器部署Hugo，自动生成网站文件（推荐）

方法二的思路是：服务器上保存网站的原始文件（Markdown文章、主题、配置等），当你在本地更新文章并推送到服务器后，服务器自动运行 Hugo 生成网站文件。

这样做的好处是：

  • 更新方便，只需推送文章文件，不需要上传整个网站
  • 文章修改日期准确，不会批量变动
  • 可以在任何电脑上更新文章

准备工作

和方法一相同，你需要：

  • 一台云服务器（推荐 Ubuntu 22.04 或更高版本）
  • 一个域名（可选）
  • 本地电脑上已配置好的 Hugo 网站项目

连接到你的服务器

首先，你需要远程登录到服务器。最简单的方式是通过服务器厂商自带的远程工具进行连接。也可通过SSH工具连接，如Putty、MobaXterm等。

在服务器上安装 Hugo

连接成功后，你会看到服务器的命令行界面（显示为 # 或 $ 开头）。按顺序执行以下命令：

第一步：更新软件包列表

1

apt update

第二步：安装必要的依赖

1

apt install git golang-go -y

第三步：下载并安装 Hugo

1
2

wget https://github.com/gohugoio/hugo/releases/download/v0.140.2/hugo_extended_0.140.2_linux-amd64.deb
dpkg -i hugo_extended_0.140.2_linux-amd64.deb

第四步：验证安装

1

hugo version

如果显示版本号（如 hugo v0.140.2），说明安装成功。

⚠️ 注意：Hugo 版本要和本地一致或更高，否则可能编译出错。可以在本地运行 hugo version 查看当前版本，然后把上面命令中的 0.140.2 替换成你的版本号。

配置网站目录

第一步：创建网站存放目录

这里以myblog为例，创建网站根目录。可以替换为你喜欢的名字。

1
2

mkdir -p /var/www/myblog
cd /var/www/myblog

第二步：将本地网站上传到服务器

在本地电脑的命令行中，进入你的网站根目录（就是包含 config.toml 或 hugo.toml 的文件夹），然后执行：

1

scp -r ./* root@你的服务器IP:/var/www/myblog/

这需要输入服务器密码。上传完成后，回到服务器的命令行窗口。

第三步：初始化 Git 仓库（可选但推荐）

1
2
3
4

cd /var/www/myblog
git init
git add .
git commit -m "Initial commit"

第四步：首次生成网站

1

hugo

如果看到类似 Built in 1234 ms 的提示，说明生成成功。此时 /var/www/myblog/public/ 目录下就是你的网站文件。

安装和配置 Nginx

和方法一类似，我们需要 Nginx 来展示网站。在服务器上执行：

第一步：安装 Nginx

1

apt install nginx -y

第二步：创建 Nginx 配置文件

以下给出了一个配置Nginx的大概的流程和配置文件，由于服务器配置差异，很可能会报错，需要修改后才能正常运行。

执行以下命令创建并编辑配置文件：

1

nano /etc/nginx/sites-available/myblog

💡 小贴士：nano 是一个简单的文本编辑器。如果不能使用，可以先安装：apt install nano -y

把下面的内容粘贴进去（按鼠标右键即可粘贴）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

server {
    listen 80;
    server_name _;  # 使用下划线表示接受任何域名或IP访问
    
    root /var/www/myblog/public;
    index index.html index.htm;
    
    # 日志文件位置
    access_log /var/log/nginx/myblog-access.log;
    error_log /var/log/nginx/myblog-error.log;
    
    # 启用Gzip压缩，加快访问速度
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
    
    # 处理Hugo的路由
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 静态文件缓存（图片、CSS、JS等）
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2)$ {
        expires 1M;
        add_header Cache-Control "public, immutable";
    }
    
    # 404错误页面
    error_page 404 /404.html;
}

第三步：保存并退出

  • 按 Ctrl + X
  • 按 Y 确认保存
  • 按 Enter 确认文件名

第四步：启用配置

1
2
3
4

ln -s /etc/nginx/sites-available/myblog /etc/nginx/sites-enabled/
rm /etc/nginx/sites-enabled/default  # 删除默认配置
nginx -t  # 测试配置是否正确
systemctl restart nginx  # 重启Nginx

第五步：设置目录权限

1

chown -R www-data:www-data /var/www/myblog

现在，在浏览器中输入你的服务器IP地址，应该能看到网站了！如果有报错信息，请将你的配置文件和错误信息发送给AI，根据AI的建议修改配置文件。

配置 HTTPS（推荐）

为了让网站更安全，建议配置 HTTPS。我们将使用免费的 Let’s Encrypt 证书。

第一步：安装 Certbot

1

apt install certbot python3-certbot-nginx -y

第二步：申请证书

1

certbot --nginx -d 你的域名.com -d www.你的域名.com

⚠️ 注意：如果没有域名，这一步可以跳过。申请证书前，确保你的域名已经解析到服务器IP。

第三步：按提示操作

  • 输入你的邮箱地址
  • 同意服务条款（输入 A）
  • 是否分享邮箱（输入 N）
  • 选择是否强制 HTTPS（推荐选择 2 强制重定向）

第四步：验证自动续期

1

certbot renew --dry-run

如果显示成功，说明证书会自动续期，不用你操心。

配置自动构建（核心步骤）

现在我们来到最关键的部分：如何让服务器在收到你的文章更新后，自动重新生成网站？

这里介绍一个简单可靠的方法：使用 Git 钩子（Git Hook）。

整体思路：

  1. 你在本地写好文章，通过 Git 推送到服务器
  2. 服务器收到推送后，自动执行 Hugo 生成命令
  3. Nginx 立即展示新生成的网站

第一步：在服务器上创建裸仓库

1
2
3

mkdir -p /var/repo/myblog.git
cd /var/repo/myblog.git
git init --bare

第二步：创建自动部署脚本

1
2

mkdir -p /var/repo/myblog.git/hooks
nano /var/repo/myblog.git/hooks/post-receive

粘贴以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

#!/bin/bash

# 输出开始信息
echo "===== 开始部署 ====="

# 切换到网站目录并拉取最新代码
cd /var/www/myblog || exit
unset GIT_DIR
git pull origin main

# 运行 Hugo 生成网站
echo "正在生成网站..."
/usr/bin/hugo

# 设置文件权限
chown -R www-data:www-data /var/www/myblog/public

echo "===== 部署完成 ====="

保存并退出（Ctrl + X，Y，Enter）。

第三步：给脚本执行权限

1

chmod +x /var/repo/myblog.git/hooks/post-receive

第四步：配置网站目录使用这个裸仓库

1
2

cd /var/www/myblog
git remote add deploy /var/repo/myblog.git

第五步：在本地配置推送

回到你本地电脑的命令行，进入网站根目录：

1

git remote add server ssh://root@你的服务器IP/var/repo/myblog.git

这里介绍的是在你自己的云服务器上部署GIT仓库和Git钩子（Git Hook）的流程。有很多仓库会自带钩子，比如GitHub、GitLab，以及国内腾讯的工蜂。可以使用这些仓库，只需要在仓库中配置好钩子，然后在本地推送代码即可触发自动部署。

日常更新文章的流程

配置完成后，以后更新文章只需要：

第一步：在本地写新文章或修改

第二步：提交更改并推送到服务器

1
2
3

git add .
git commit -m "更新了某篇文章"
git push server main

第三步：等待自动部署完成

你会看到类似这样的输出：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

===== 开始部署 =====
Already up to date.
正在生成网站...

                   | EN  
-------------------+-----
  Pages            | 27
  Paginator pages  |  0
  Non-page files   |  0
  Static files     | 15
  Processed images |  0
  Aliases          |  0
  Cleaned          |  0

Total in 234 ms
===== 部署完成 =====

部署完成后，刷新浏览器就能看到更新了！

配置云服务器安全组

和方法一相同，需要开放 80 和 443 端口。如果你配置了 HTTPS，确保 443 端口是开放的。

方法二的完整工作流程总结

Hugo部署流程

💡 小贴士：

  • 第一次配置可能比较繁琐，但配置好后，更新文章非常方便
  • 如果遇到问题，可以查看部署日志：cat /var/log/nginx/myblog-error.log
  • 可以创建一个简单的部署脚本文件，以后双击运行即可推送更新

❓ 常见问题：推送时报权限错误？

可能原因：

  • 服务器目录权限问题，运行：chown -R root:root /var/repo
  • SSH 连接问题，检查是否能正常 ssh root@服务器IP

❓ 常见问题：Hugo 生成失败？

可能原因：

  • 主题没有上传，检查 themes/ 目录是否存在
  • Hugo 版本不兼容，确保服务器和本地版本一致
  • 配置文件格式错误，检查 hugo.toml 或 config.toml

手动修改文章的方法

有时候不想用命令行新建文章，直接用文本编辑器修改更直观。其实文章就是普通的文本文件，修改起来很灵活。

文章文件的位置

文章通常放在 content/posts/ 或 content/articles/ 目录下，文件名以 .md 结尾。

文章的结构

每篇文章的开头都有一些元数据（称为Front Matter），用三个横线分隔：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

---
title: "我的第一篇文章"
date: 2025-12-27T14:25:12+08:00
draft: false
tags: ["技术", "学习"]
categories: ["笔记"]
description: "这篇文章讲的是..."
keywords: ["Hugo", "建站"]
---

这里是文章正文内容...
  • title：文章标题
  • date：发布时间
  • draft：是否为草稿，true是草稿，false是已发布
  • tags：文章标签
  • categories：文章分类
  • description：文章描述
  • keywords：关键词

常用的Markdown语法

Markdown是一种简单的标记语言，用来给文本添加格式：

  • 标题：用 # 号，几个 # 就是几级标题

    1
2
3

    # 一级标题
## 二级标题
### 三级标题

  • 段落：直接写文字，空一行就是新段落

  • 加粗：用两个星号

    1

    **这是加粗**

  • 斜体：用一个星号

    1

    *这是斜体*

  • 列表：用短横线或数字

    1
2
3
4
5

    - 列表项1
- 列表项2

1. 有序列表1
2. 有序列表2

  • 链接：用中括号加圆括号

    1

    [链接文字](https://example.com)

  • 图片：类似链接，前面加感叹号

    1

    ![图片说明](/images/photo.jpg)

  • 引用：用大于号

    1

    > 这是一段引用

  • 代码：用反引号

    1

    `单行代码`

    多行代码块

图片的处理

把图片文件放在 static/images/ 目录下，然后这样引用：

1

![我的图片](/images/photo.jpg)

修改现有文章

  1. 用你喜欢的文本编辑器打开 .md 文件（推荐VS Code、Notepad++等）
  2. 直接修改内容，保存
  3. 如果在运行 hugo server -D，浏览器会自动刷新显示修改

发布草稿文章

把文章的 draft: true 改成 draft: false，或者删除这一行，文章就会发布。

💡 小贴士：

  • 用VS Code编辑Markdown文件，支持语法高亮和实时预览
  • 可以安装Markdown插件，让写作更方便
  • 文件名尽量用英文，避免中文编码问题

❓ 常见问题：修改后浏览器没变化？

可能原因：

  • 浏览器缓存，试试强制刷新（Ctrl+F5）
  • 如果是草稿文章，记得加 -D 参数启动服务器
  • 文件保存位置不对，确保在 content/ 目录下

❓ 常见问题：文章显示乱码？

可能原因：

  • 文件编码不是UTF-8，用编辑器打开时选择UTF-8编码保存
  • 特殊字符没有转义，比如 < 要写成 &lt;

持续学习，不会错。

延伸阅读：使用Hugo快速搭建本地知识库、博客或项目展示站

© 2025 - 2026 CoreV.cn
希望所有努力的人都能找到并提升自己的核心价值
使用 Hugo 构建
主题 Stack 由 Jimmy 设计