📊 Hugo 与其他静态网站生成器对比表

特性 / 工具 Hugo💎 Jekyll 🐹 Hexo 🧙‍♂️ Next.js (SSG) ⚛️ VuePress 🐉
编写语言 Go Ruby Node.js JavaScript / React JavaScript / Vue
构建速度 🚀 超快（毫秒级） 🐢 慢 🚀 快 ⚡ 快 ⚡ 快
学习曲线 中（偏技术） 简单（但依赖 Ruby） 简单 中等偏上 中等
安装依赖 单文件（无需依赖） Ruby + Gems Node.js + npm Node.js + npm Node.js + npm
主题生态 丰富（支持自定义模板） 很多（GitHub Pages原生） 极多 极多（但偏开发者） 一般（偏文档类）
Markdown 支持 ✅ 强（可自定义渲染） ✅ 强 ✅ 强 ✅ 强 ✅ 强
自定义模板能力 🔧 灵活（Go 模板语法） 一般（Liquid） 中等（EJS等） 极强（JSX/React） 强（Vue组件）
多语言支持 ✅ 内置多语言、多站点 ❌ 手动配置复杂 ❌ 限制较多 ❌ 需手动配置 ❌ 需插件支持
用于博客 ✅ 优 ✅ 优 ✅ 优 ✅ 可 ✅ 可
用于简历 / 展示页 ✅ 非常合适 ✅ 合适 ✅ 合适 ✅ 也可 ✅
文档 / 知识库 ✅ 支持强目录和分区 一般 一般 ✅ 配合 CMS 使用效果好 ✅ 原生定位
CMS 集成 ✅ 与 Netlify CMS/Headless CMS 很兼容 ✅ GitHub Pages兼容 ✅ 兼容多个 CMS ✅ 多种方式集成 ✅ 可与 Vue 插件集成
开发者生态 活跃 稳定（经典） 中国社区多 极活跃 偏 Vue 用户
官方文档质量 📚 非常详尽 📚 一般 📚 一般 📚 强（偏开发者） 📚 Vue 用户友好
支持部署平台 全平台 GitHub Pages GitHub/Netlify/Vercel 全平台 全平台

✅ 推荐使用场景简表

使用场景 推荐工具 说明
个人博客 Hugo / Hexo 快速、简洁
简历/介绍页 Hugo / Jekyll 结构灵活，部署简单
技术文档 VuePress / Hugo VuePress 适合 Vue 用户，Hugo 更通用
多语言网站 Hugo 原生支持，配置最简单
企业官网 Hugo / Next.js Hugo 快速构建，Next.js 更现代动态
高级定制/交互 Next.js React 开发者首选，功能强大

🧩 第 1 步：下载并安装 Hugo（Windows 系统）

我们使用的是官方的 Hugo 扩展版（支持 SASS/SCSS），适合做简历、美化页面等。

✅ 下载 Hugo 扩展版

  1. 打开官网 Releases 页面：
    👉 https://github.com/gohugoio/hugo/releases

  2. 找到版本：
    hugo_extended_0.147.8_windows-amd64.zip

  3. 解压后，得到一个 hugo.exe 文件。

✅ 配置系统环境变量（推荐）

把 hugo.exe 放在一个文件夹中，比如：

C:\Hugo\

然后：

  1. 按 Win + S 搜索“环境变量”
  2. 点击“编辑系统环境变量”
  3. 在系统变量中找到 Path，点“编辑”
  4. 添加路径：C:\Hugo\
  5. 保存后打开终端（CMD/PowerShell），输入：
hugo version

能显示 Hugo 版本信息说明安装成功 ✅

🏗 第 2 步：创建一个 Hugo 网站

打开终端（CMD 或 PowerShell），运行以下命令：

hugo new site mysite
cd mysite

你会得到这样的目录结构：

mysite/
├── archetypes/
├── content/
├── layouts/
├── static/
├── config.toml
└── ...其他文件

这就是一个空 Hugo 网站，还没有页面或模板。

🧱 第 3 步：手写模板（完全不使用主题）

我们将手动写页面模板放在 layouts/ 中：

✨ 创建基础布局模板：layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>{{ block "title" . }}{{ .Title }}{{ end }}</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <header>
    <h1><a href="/">{{ .Site.Title }}</a></h1>
    <hr>
  </header>

  <main>
    {{ block "main" . }}{{ end }}
  </main>

  <footer>
    <hr>
    <p>&copy; {{ now.Year }} My Hugo Site</p>
  </footer>
</body>
</html>

✨ 创建主页模板：layouts/index.html

{{ define "main" }}
  <h2>欢迎访问 {{ .Site.Title }}</h2>
  <p>以下是最新文章：</p>
  <ul>
    {{ range .Site.RegularPages }}
      <li><a href="{{ .RelPermalink }}">{{ .Title }}</a> ({{ .Date.Format "2006-01-02" }})</li>
    {{ end }}
  </ul>
{{ end }}
{{ template "_default/baseof.html" . }}

✨ 创建文章页模板：layouts/_default/single.html

{{ define "main" }}
  <h2>{{ .Title }}</h2>
  <p>发布时间：{{ .Date.Format "2006-01-02" }}</p>
  <div>
    {{ .Content }}
  </div>
{{ end }}
{{ template "_default/baseof.html" . }}

📄 第 4 步：写一篇文章

hugo new post/hello-hugo.md

编辑 content/post/hello-hugo.md 文件：

---
title: "你好 Hugo"
date: 2025-06-20
draft: false
---

这是我写的第一篇 Hugo 文章，不用任何主题，完全手工编写页面模板。

🎨 第 5 步：添加样式（可选）

创建文件：static/css/style.css，写入：

body {
  font-family: "Segoe UI", sans-serif;
  max-width: 800px;
  margin: 2rem auto;
  background: #f9f9f9;
  color: #333;
  padding: 2rem;
}
a {
  color: #0077cc;
  text-decoration: none;
}

🔍 第 6 步：本地预览

启动本地开发服务器：

hugo server -D

打开浏览器访问：http://localhost:1313
你就能看到网站首页和文章内容！

📦 第 7 步：生成静态站点（用于部署）

hugo

构建后的文件都在 public/ 目录下，可以部署到：

  • GitHub Pages
  • Netlify
  • Vercel
  • 本地服务器 / 云主机

✅ 总结

你现在拥有了一个：

  • 无需主题的 Hugo 网站
  • 自定义 HTML 模板结构
  • 使用 Markdown 编写文章
  • 可快速预览与发布的静态站点