本文章没有找到对应的语言版本

为什么选择 Hugo 搭建博客

在众多静态博客生成器中，Hugo 凭借极致的构建速度、零依赖部署和丰富的主题生态脱颖而出，是个人技术博客的首选方案之一。

Hugo 的核心优势

  • 构建速度极快：基于 Go 语言开发，即使上千篇文章也能在毫秒级完成构建
  • 零运行时依赖：编译后就是纯静态 HTML/CSS/JS 文件，不需要 PHP、MySQL 等后端环境
  • 部署成本极低：可以免费托管在 GitHub Pages、Vercel、Cloudflare Pages 等平台
  • Markdown 写作：全程使用 Markdown 写文章，专注内容创作，无需维护复杂的后台

第一步：安装 Hugo 环境

Windows 系统安装（推荐）

Windows 10/11 用户直接使用自带的 winget 包管理器一键安装扩展版（Extended），这是使用大多数主题的前提：

winget install Hugo.Hugo.Extended

安装完成后重启终端，执行以下命令验证安装是否成功：

hugo version

正常会输出类似 hugo v0.169.0+extended windows/amd64 BuildDate=... 的信息，带有 extended 字样即为正确安装。

macOS / Linux 安装

# macOS
brew install hugo

# Debian/Ubuntu
sudo apt update && sudo apt install hugo

第二步：创建你的第一个站点

打开终端，进入你想存放网站的目录，执行以下命令创建站点：

hugo new site my-blog

执行完成后会生成如下目录结构：

my-blog/
├── archetypes/    # 文章模板
├── content/       # 文章内容目录
├── layouts/       # 自定义页面模板
├── static/        # 静态资源（图片、字体等）
├── themes/        # 主题存放目录
└── hugo.toml      # 站点核心配置文件

第三步：安装与配置主题

Hugo 本身不自带主题，我们以人气很高的 Reimu 主题为例进行安装：

1. 克隆主题到 themes 目录

进入站点根目录，执行克隆命令：

cd my-blog
git submodule add https://github.com/D-Sketon/hugo-theme-reimu.git themes/reimu

推荐使用 Git 子模块方式安装，方便后续一键更新主题。

2. 基础站点配置

打开根目录下的 hugo.toml，修改为你的基础配置：

baseURL = 'https://你的域名.com/'
languageCode = 'zh-cn'
title = '我的技术博客'
theme = 'reimu'

# 开启代码高亮
pygmentsUseClasses = true
pygmentsCodeFences = true

3. 主题自定义配置

新建 config/_default/ 目录，将主题自带的 params.yml 复制到该目录下，所有主题功能修改都在这个文件里进行，例如：

# 站点基础参数
author: "你的昵称"
bio: "热爱技术的开发者"
avatar: "/avatar/avatar.webp"

# 功能开关
showToc: true          # 显示文章目录
showReadingTime: true  # 显示阅读时长
showWordCount: true    # 显示文章字数
darkMode: true         # 支持暗黑模式

第四步：创建你的第一篇文章

在站点根目录执行命令创建文章：

hugo new posts/我的第一篇文章.md

打开生成的文件，顶部 --- 包裹的部分是文章元数据，下面是正文内容：

---
title: "我的第一篇文章"
date: 2026-10-29T10:00:00+08:00
draft: false  # 改为false才会正式发布
tags: ["随笔"]
categories: ["日常"]
---

这里开始写正文内容，支持完整的 Markdown 语法，包括标题、列表、代码块、图片等。

⚠️ 注意：draft: true 表示草稿状态，默认不会在站点中显示，发布时一定要改成 false。

第五步：本地预览与调试

执行以下命令启动本地预览服务，会自动加载草稿文章：

hugo server -D

启动成功后终端会显示：

Web Server is available at http://localhost:1313/

在浏览器打开这个地址，你就能实时看到你的博客效果，修改文件后浏览器会自动刷新，无需重启服务。

第六步：构建与部署

内容编写完成后，执行构建命令生成静态文件：

hugo --minify

--minify 参数会自动压缩 HTML/CSS/JS 文件，减小体积提升加载速度。构建完成后会在根目录生成 public 文件夹，里面就是完整的静态网站文件。

免费部署方案推荐

  1. Vercel / Netlify：连接 Git 仓库后自动部署，支持自定义域名，完全免费
  2. GitHub Pages：适合纯静态博客，配合 GitHub Actions 实现自动构建
  3. Cloudflare Pages：全球 CDN 加速，国内访问速度相对更快

常用 Hugo 命令速查

命令作用
hugo new site 站点名创建新站点
hugo new posts/文章名.md新建文章
hugo server -D启动本地预览（含草稿）
hugo --minify构建生产环境静态文件
hugo clean清理构建缓存

常见问题排查

  1. 页面样式错乱：确认安装的是 Hugo Extended 版本，且 hugo.toml 中主题名称与 themes 目录下的文件夹名完全一致
  2. 新建文章看不到：检查文章元数据中 draft 是否为 true，改为 false 或预览时加 -D 参数
  3. 图片不显示：将图片放在 static/images/ 目录下，文章中使用 /images/图片名.jpg 路径引用

按照以上步骤操作，你就能在半小时内拥有一个属于自己的极速技术博客了。后续可以根据需要慢慢调整主题样式、添加评论系统、配置RSS订阅等功能。

说些什么吧！

giscus