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
scoop install hugo

Linux

1
2
3
4
5
6
7

# Debian / Ubuntu
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:

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
30
31
32
33
34
35
36
37
38

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

自动生成的模板:

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

---
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
# 打开浏览器访问 http://localhost:1313

常用参数:

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

第四步:自定义页面

About 页面

1

hugo new about.md

1
2
3
4
5
6
7
8
9

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

## 我是谁

技术爱好者 / 终身学习者

友情链接

content/links.md:

1
2
3
4
5

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

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

评论系统

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

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

1
2
3
4
5
6
7
8
9
10

[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(免费,推荐)

准备工作

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

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

# 在项目根目录
echo "public/" >> .gitignore
echo "resources/" >> .gitignore

# 创建部署脚本 deploy.sh
#!/bin/bash
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:

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

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(国内访问更友好)

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

方案 3:自己的服务器

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

# 在服务器上(以 Nginx 为例)
server {
    listen 80;
    server_name blog.example.com;
    root /var/www/blog/public;
    index index.html;

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

    # 开启 gzip
    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

1
2
3
4
5

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

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

3. RSS 订阅

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

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

使用 JSON-LD:

1
2
3
4
5
6
7
8
9
10
11
12

<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

第八步:数据迁移与备份

备份

1
2
3
4
5

# 整个项目打包
tar czf blog_backup_$(date +%Y%m%d).tar.gz \
  --exclude='public' \
  --exclude='resources' \
  .

从 Hexo 迁移

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

常见问题

文章不显示?

检查:

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

主题切换后样式乱了?

清缓存重建:

1

hugo --gc --minify

中文 URL 404?

1
2
3

# config.toml
[permalinks]
  posts = "/:year/:month/:day/:slug/"

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

推荐插件与扩展

• Hugo Shortcodes:内置很多,可以用 {{< youtube ID >}} 嵌入视频
• Lighthouse:检查 SEO 和性能分数
• Algolia DocSearch:站内搜索
• Twikoo:替代 Giscus 的评论系统

总结

Hugo 的工作流非常简洁:

1

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

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