Hugo 入门

一、为什么选择 Hugo?

我频繁更换博客架构(从 Hexo、VuePress、VitePress 到 Next.js,最终尝试 Hugo),核心原因在于对速度与易用性的追求。Hugo 的最大亮点是极速编译,其底层基于 Go 语言开发,生成静态站点的速度远超同类工具,且配置简单,适合追求效率的开发者。

二、主流静态站点生成器对比

框架优势劣势适用场景
Hexo主题丰富、中文资料齐全编译速度慢(内容多时需数分钟)个性化博客、技术分享
VuePress集成 Vue 生态依赖 Vue,未来发展受限Vue 项目文档、轻量级博客
VitePress基于 Vite,编译速度快博客主题少,偏文档风格技术文档、简洁博客
Next.js强大多端支持,生态活跃上手难度较高,博客主题较少全栈项目、复杂博客
Hugo编译速度极快,配置简单主题定制需一定学习成本高性能博客、静态站点

三、Hugo 安装指南

1. MacOS

通过 Homebrew

brew install hugo  

通过 MacPorts

sudo port install hugo  


版本说明:默认安装为「扩展/部署版」,包含高级功能(如 Sass 支持)。

2. Linux

通过 Snap(推荐)

sudo snap install hugo  

通过 Homebrew

brew install hugo  # Linux 同样适用  

3. Windows

直接从 Hugo 官方仓库 下载对应安装包,解压后配置环境变量即可。

四、快速上手命令

1. 基础操作

  • 查看版本
  hugo version  
  • 创建站点
  hugo new site myBlog  # 创建名为 myBlog 的站点  

2. 主题配置(以 Ananke 主题为例)

cd myBlog  
git init  # 初始化 Git 仓库(可选)  
# 添加主题作为子模块  
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke  
# 配置主题:修改 hugo.toml  
echo "theme = 'ananke'" >> hugo.toml  

3. 本地开发

启动服务器(含草稿预览):

hugo server -D  # -D 包含草稿内容  


访问 http://localhost:1313 查看站点。

4. 创建文章

# 在 content/posts 目录生成新文章  
hugo new content/posts/my-first-post.md  


文章元数据示例(位于 .md 文件顶部):

+++  
title = "My First Post"  
date = "2024-01-14T07:07:07+01:00"  
draft = true  # 设为 false 发布文章  
+++  
  • draft = true:文章为草稿,默认不发布(需加 -D 打包)。
  • date:发布日期,未来日期的文章不会发布。

5. 打包生成静态文件

hugo  # 生成正式环境文件(不含草稿)  
hugo -D  # 包含草稿一起打包  


生成的静态文件位于 public/ 目录,可直接部署到服务器或 CDN。

五、目录结构说明

  • content/:存放文章内容,按主题要求创建子目录(如 posts/about/categories/)。
  • themes/:主题目录,通过 Git 子模块管理。
  • hugo.toml:站点配置文件,配置主题、菜单、参数等。
  • public/:打包生成的静态文件,用于部署。

六、注意事项

  1. 草稿机制
  • 草稿需手动设置 draft = true,打包时用 -D 包含。
  • 未来日期(date)或过期日期(expiryDate)的文章也会被视为草稿。
  1. 主题定制
  • 多数主题支持自定义配置(如侧边栏、菜单),需参考主题文档修改 hugo.toml
  1. 性能优势
  • 数万篇文章编译仅需秒级,适合大型博客或文档站点。

留下评论

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