教程

Hugo + Stack 主题快速上手

从零开始用 Hugo 与 Stack 主题搭建本地博客的完整流程。

概述

本文记录从零开始用 Hugo + Stack 主题搭建本地博客的完整流程，涵盖安装、配置、写作与预览。

一、安装 Hugo extended

Stack 主题使用 SCSS 编译，必须安装 extended 版本：

# Windows (PowerShell)
Invoke-WebRequest -Uri 'https://github.com/gohugoio/hugo/releases/latest/download/hugo_extended_0.167.0_windows-amd64.zip' -OutFile hugo.zip
Expand-Archive hugo.zip -DestinationPath C:\Hugo
$env:Path += ';C:\Hugo'
hugo version

二、新建站点

hugo new site blog
cd blog

三、引入主题

下载 Stack 主题 v4 解压到 themes/hugo-theme-stack/，然后在 hugo.toml 中启用：

theme = "hugo-theme-stack"

四、新建文章

hugo new posts/hello-world.md

文章 front matter 示例：

---
title: "你好，世界"
date: 2026-09-28T10:00:00+08:00
draft: false
tags: ["开篇"]
categories: ["随笔"]
---

五、本地预览

hugo server -D

浏览器访问 http://localhost:1313/ 即可看到效果。

常见问题

⚠️ 警告

启动报 TOCSS: failed to transform 错误？说明安装的是非 extended 版本，请重新下载。

💡 提示

修改 hugo.toml 后无需重启 hugo server，会自动热重载。

小结

  • Hugo + Stack 的组合上手成本低、视觉效果好
  • 配置文件 hugo.toml 是定制的核心
  • 文章统一放在 content/posts/ 下，前置 YAML 控制元信息

下一篇将分享 Stack 主题的进阶玩法与定制技巧。