Hugo搭建静态网站完整教程：打造极速轻量的个人站点

Hugo 是目前最流行的静态网站生成器之一，基于 Go 语言开发，构建速度极快，一个包含数千页面的站点只需几秒就能完成生成。它不依赖数据库，生成的纯静态文件可以部署到任何静态托管平台，安全性高、运维成本几乎为零，非常适合搭建个人博客、技术文档、企业官网等内容型站点。

本教程将带你从零开始，一步步完成 Hugo 站点的搭建、内容创作和上线部署，全程无需复杂的编程基础，跟着操作即可。

一、环境准备

搭建 Hugo 站点只需要安装两个基础工具：Git 和 Hugo，部分平台还需要配置环境变量。

1. 安装 Git

Git 是版本控制工具，用于管理站点源码和主题安装。

访问 Git 官网的下载页面，选择对应操作系统的安装包下载。
安装过程保持默认设置，一路点击下一步即可。
安装完成后，打开终端（Windows 用户建议使用 PowerShell 或 Git Bash，不要使用 CMD 或 Windows PowerShell），输入 git --version，看到版本号输出即代表安装成功。

2. 安装 Hugo

Hugo 的安装方式因操作系统不同有所差异，推荐安装 Extended 版本，支持 SCSS/SASS 样式预处理，兼容绝大多数主题。

macOS：打开终端，输入 brew install hugo，等待安装完成。
Windows：
- 方式一：使用 Scoop 包管理器，输入 scoop install hugo-extended。
- 方式二：手动安装。访问 Hugo 的 GitHub Releases 页面，下载 hugo_extended_xxx_windows-amd64.zip 压缩包，解压后将 hugo.exe 放到任意目录，将该目录路径添加到系统环境变量的 Path 中。
Linux：根据发行版不同，使用对应的包管理器安装，比如 Ubuntu 可以用 sudo snap install hugo。

安装完成后，在终端输入 hugo version，看到版本号输出即代表安装成功。

二、创建 Hugo 站点

环境准备完成后，就可以创建站点了。

打开终端，进入你想要存放站点文件的目录，比如 D:\projects 或 ~/Documents。
输入命令 hugo new site myblog，其中 myblog 是你的站点名称，可以自定义。
命令执行完成后，当前目录下会生成一个 myblog 文件夹，这就是你的站点目录，内部结构如下：
- archetypes/：内容模板目录，用于定义新建文章的默认配置。
- content/：内容目录，所有 Markdown 格式的文章和页面都存放在这里。
- data/：数据目录，可以存放 JSON、YAML 等格式的配置文件。
- layouts/：模板目录，用于自定义站点页面布局。
- static/：静态资源目录，图片、字体、CSS 等文件会原样复制到最终生成的站点中。
- themes/：主题目录，存放下载的主题文件。
- hugo.toml：站点核心配置文件，用于设置标题、语言、主题等全局参数。

接下来进入站点目录：cd myblog，后续所有操作都在这个目录下进行。

三、安装并配置主题

Hugo 本身不包含默认主题，需要单独安装。这里以简洁轻量、广受欢迎的 PaperMod 主题为例。

在站点目录下初始化 Git 仓库：git init。
使用 Git 子模块的方式安装主题：git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod。
打开站点根目录的 hugo.toml 文件，在末尾添加一行：theme = "PaperMod"，指定当前使用的主题。

如果你不想使用 Git 子模块，也可以直接从主题的 GitHub 页面下载压缩包，解压后将文件夹放到 themes/ 目录下，同样在 hugo.toml 中指定主题名称即可。

四、站点基础配置

打开 hugo.toml 文件，根据你的需求修改基础配置，常见的配置项如下：

baseURL = "https://yourdomain.com/"  # 你的站点域名
languageCode = "zh-cn"  # 站点语言，中文设置为 zh-cn
title = "我的个人博客"  # 站点标题
theme = "PaperMod"  # 使用的主题

[params]
    author = "你的名字"  # 作者名称
    description = "一个记录技术与生活的博客"  # 站点描述

[params.homeInfoParams]
    Title = "欢迎来到我的博客"  # 首页标题
    Content = "这里记录我的技术笔记和生活随笔"  # 首页简介

不同主题支持的配置项略有差异，具体可以参考主题自带的示例配置文件，通常在主题的 exampleSite/ 目录下。

五、创作内容

Hugo 使用 Markdown 格式撰写文章，所有文章都存放在 content/ 目录下。

创建文章：在终端输入 hugo new posts/hello-world.md，Hugo 会在 content/posts/ 目录下生成对应的 Markdown 文件。
打开生成的文件，顶部是 Front Matter 区域，用 --- 包裹，用于定义文章的元信息：

---
title: "Hello World"
date: 2026-09-05T10:00:00+08:00
draft: true
tags: ["技术", "教程"]
categories: ["建站"]
---

其中 draft: true 表示当前文章是草稿状态，发布前需要将其改为 draft: false，否则文章不会在站点中显示。

Front Matter 下方就是文章的正文内容，使用标准 Markdown 语法编写即可，支持标题、列表、代码块、图片等常见格式。

六、本地预览

内容创作完成后，可以在本地启动开发服务器实时预览效果。

在站点目录下输入命令：hugo server -D，其中 -D 参数表示同时渲染草稿文章。
命令执行完成后，终端会输出访问地址，通常是 http://localhost:1313。
打开浏览器访问该地址，即可看到站点效果。Hugo 的开发服务器支持热更新，修改任何文件保存后，页面会自动刷新，无需手动重启。

确认内容和样式都符合预期后，按 Ctrl + C 停止开发服务器。

七、生成静态文件

预览确认无误后，就可以生成最终的静态网站文件了。

在站点目录下输入命令：hugo，Hugo 会将所有内容编译为纯静态的 HTML、CSS、JS 文件，输出到 public/ 目录下。这个目录中的文件就是可以直接部署的完整站点，不依赖任何后端服务。

八、部署上线

生成的 public/ 目录可以部署到任何支持静态文件的托管平台，以下是几种常用的部署方式。

1. GitHub Pages

在 GitHub 上创建一个名为 你的用户名.github.io 的仓库。
将 public/ 目录下的所有文件推送到该仓库的主分支。
进入仓库的 Settings → Pages，将 Source 设置为对应的分支，保存后 GitHub 会自动部署站点，几分钟后就可以通过 https://你的用户名.github.io 访问。

2. Cloudflare Pages

将站点源码推送到 GitHub 仓库。
登录 Cloudflare Dashboard，进入 Pages 模块，选择连接 Git 仓库，选择对应的仓库。
构建设置中，构建命令填写 hugo，输出目录填写 public，保存后 Cloudflare 会自动构建并部署站点，同时提供免费的 CDN 加速和 HTTPS 支持。

3. Vercel

将站点源码推送到 GitHub 仓库。
登录 Vercel，选择导入 Git 仓库，Vercel 会自动检测 Hugo 项目并配置构建设置。
点击部署，几分钟后站点就会上线，同时会分配一个 .vercel.app 的默认域名，也可以绑定自定义域名。

4. 自动化部署

为了避免每次更新内容都需要手动构建和推送，可以配置 GitHub Actions 实现自动化部署。在站点根目录创建 .github/workflows/deploy.yml 文件，配置对应的构建和部署流程，之后每次推送代码到 GitHub，就会自动完成构建和部署。

九、日常更新流程

站点上线后，日常更新内容的流程非常简单：

在 content/ 目录下新建或修改 Markdown 文章。
本地运行 hugo server -D 预览效果，确认无误后停止服务。
执行 git add .、git commit -m "更新内容"、git push 将修改推送到远程仓库。
如果配置了自动化部署，托管平台会自动完成构建和上线；如果没有配置，手动执行 hugo 生成静态文件，再推送到对应的部署仓库即可。

十、常见问题排查

本地预览看不到文章内容：检查文章的 Front Matter 中 draft 是否设置为 false，或者启动开发服务器时是否添加了 -D 参数。
主题样式没有生效：检查 hugo.toml 中的 theme 字段是否与 themes/ 目录下的主题文件夹名称完全一致。
部署后页面空白：检查 hugo.toml 中的 baseURL 是否配置正确，是否和实际部署的域名一致。
图片无法显示：将图片放到 static/ 目录下，在文章中使用绝对路径引用，比如 ![](/images/xxx.png)。