Hugo 快速上手:从零搭建极速静态网站

Hugo 是基于 Go 语言的高性能静态网站生成器,特点是构建速度极快、单文件可执行、无需额外依赖,适合快速搭建博客、文档或个人网站。

安装环境

请确保你的电脑已安装以下工具:

  1. Hugo(Extended/Deploy 版本)
  2. Git:用于主题管理和版本控制。
  3. 终端选择:Windows 推荐 PowerShell,macOS/Linux 使用原生终端。

创建站点

快速初始化站点结构并配置基础主题:

# 1. 创建项目目录
hugo new site qixinlee
cd qixinlee

# 2. 初始化 Git 仓库
git init

# 3. 添加 Ananke 主题为子模块
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

# 4. 配置主题
echo "theme = 'ananke'" >> hugo.toml

创建文章

Hugo 使用 Markdown 编写内容。执行 hugo new 命令会自动根据模板生成带有 Front Matter(元数据)的文件。

hugo new content content/posts/my-first-post.md

使用编辑器(如 VS Code)打开该文件,编辑内容:

+++
date = '2026-01-18T14:18:17+08:00'
draft = true
title = '我的第一篇文章'
+++

## Hello World

这是我的 Hugo 站点首篇文章。

* 个人站点:[启鑫的黑板报](https://www.qixinlee.com)

draft = true 表示草稿状态,默认不会生成到静态站点。

本地预览

hugo server -D
  • -D:渲染包含 draft: true 的草稿文件。
  • 默认访问地址:http://localhost:1313/
  • 在本地预览模式下,修改文件保存后,浏览器会自动刷新。

配置你的站点

打开根目录下的 hugo.toml 文件修改基本信息:

配置项说明示例
baseURL你的正式域名https://www.qixinlee.com/
languageCode网站语言zh-cn
title网站标题启鑫的黑板报
theme当前使用的主题ananke

构建与发布

当内容确认无误后,执行静态化编译:

  1. 将文章头部的 draft = true 改为 draft = false
  2. 在项目根目录运行构建命令:
hugo
  • 构建完成后,根目录下会生成 public/ 文件夹。
  • 该文件夹包含纯静态的 HTML、CSS 和 JS 资源。
  • 直接将 public/ 目录内容上传至 GitHub Pages、Vercel、Netlify 或私有 Nginx 即可完成上线。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注