一、为什么选择 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/
:打包生成的静态文件,用于部署。
六、注意事项
- 草稿机制:
- 草稿需手动设置
draft = true
,打包时用-D
包含。 - 未来日期(
date
)或过期日期(expiryDate
)的文章也会被视为草稿。
- 主题定制:
- 多数主题支持自定义配置(如侧边栏、菜单),需参考主题文档修改
hugo.toml
。
- 性能优势:
- 数万篇文章编译仅需秒级,适合大型博客或文档站点。