HUGO官方网站文章内容的简介大部分来自官网的翻译官网是纯英文描述英语好的可以前往官方网站博主在这里简介中简单翻译处理包括一些链接的引用主要是讲解一下如何安装和使用。这里再粘贴一个三方网站opendocs.io的HUGO官方网站英文版的翻译网站简介取自HUGO官网一个快速灵活的静态站点生成器由bep、spf13和Go的friends精心构建。Hugo 是一个用Go编写的静态网页生成器可以在几秒钟内通常更短呈现完整的网站。由于其灵活的框架、多语言支持和强大的分类系统Hugo 被广泛用于创建企业、政府、非营利组织、教育、新闻、活动和项目网站文档站点图片集登陆页面商业、专业和个人博客简历和履历在开发过程中使用 Hugo 的嵌入式 Web 服务器可以即时查看内容、结构、行为和演示的更改。然后将网站部署到您的主机或将更改推送到您的 Git 提供程序以进行自动构建和部署。Hugo 的快速资产管道包括图像处理——转换、调整大小、裁剪、旋转、调整颜色、应用过滤器、叠加文本和图像以及提取 EXIF 数据JavaScript 捆绑——将 TypeScript 和 JSX 转换为 JavaScript、捆绑、树形摇动、最小化、创建源映射并执行 SRI 散列。Sass 处理 - 将 Sass 转换为 CSS、捆绑、树摇、最小化、创建源映射、执行 SRI 哈希以及与 PostCSS 集成Tailwind CSS 处理 - 将 Tailwind CSS 实用程序类编译为标准 CSS、捆绑、树摇、优化、最小化、执行 SRI 哈希并与 PostCSS 集成使用Hugo 模块您可以通过公共或私有 Git 存储库与其他项目共享内容、资产、数据、翻译、主题、模板和配置。请参阅文档的功能部分以获得 Hugo 功能的全面摘要。一、版本介绍hugo有三个版本标准版、拓展版、拓展/部署版推荐安装拓展版本1、Hugo 标准版适合一般的 Hugo 站点如果不需要 SCSS/SASS 处理可以使用。仅支持纯 HTML/CSS/JS不能编译 SASS/SCSS也不支持 PostCSS。运行速度快适用于轻量级博客或文档站点。适用场景纯 Markdown 转 HTML个人博客、技术文档网站没有复杂的前端需求执行命令hugo version显示类似 hugo v0.145.0 linux/amd64 BuildDateunknown2、Hugo 拓展版Extended支持 SCSS/SASS 编译Hugo Pipes支持 PostCSS 处理适用于需要前端优化、CSS 预处理、优化静态资源的站点是标准版的超集包含标准版的所有功能适用场景需要使用 SCSS/SASS 预处理 CSS需要 Tailwind CSS、Autoprefixer希望 Hugo 直接优化 CSS/JS 资源执行命令hugo version显示类似 hugo v0.145.0extended linux/amd64 BuildDateunknown3、Hugo 开发版Dev/HEAD最新 Hugo 开发中的版本包含 Hugo 团队最新的功能和改进可能有新特性但不稳定不推荐用于生产环境适合 Hugo 主题和插件开发者测试最新功能适用场景需要 Hugo 的最新功能参与 Hugo 社区贡献主题开发者或高级用户执行命令hugo version显示类似 hugo v0.145.0extended,withdeploy linux/amd64 BuildDateunknown4、比对表版本适合谁是否支持 SCSS/SASS是否支持 Hugo Pipes是否支持hugo deployStandard标准版轻量级 Hugo 用户❌ 否❌ 否❌ 否Extended拓展版推荐大多数用户使用✅ 是✅ 是❌ 否With Deploy带部署版需要 Hugo 直接部署的用户✅ 是✅ 是✅ 是二、安装Linux、Windows、Mac再强调一遍推荐安装拓展版因为大部分模板都需要Sass等其他处理1、源代码构建通用于任何平台**注意**源代码构建可以忽略GCC这个点一般情况下源代码构建是一些较低的版本不支持像hugo0.56.0这种远古版本新版本都没什么问题。前置条件Linux、Windows、Mac中必须安装go编译器参照如下标准版Go 1.23.0 或更高版本扩展版Go 1.23.0 或更高版本以及 GCC扩展/部署版本Go 1.23.0 或更高版本以及 GCC构建标准版goinstall github.com/gohugoio/hugolatest构建扩展版本CGO_ENABLED1goinstall-tags extended github.com/gohugoio/hugolatest构建扩展/部署版本CGO_ENABLED1goinstall-tags extended,withdeploy github.com/gohugoio/hugolatest检查是否安装成功hugo version # 显示版本信息即安装成功类似如下内容 hugo v0.145.0extended,withdeploy linux/amd64 BuildDateunknown2、二进制文件安装通用于任何平台推荐使用最新版本下载链接1.Linux安装要区分arm和amdamd架构**x86_64 (AMD64)**适用于基于Intel和AMD的 64位处理器arm架构aarch64适用于ARM64架构的处理器例如树莓派或其他 ARM 设备使用命令uname -m 即可查看架构如下CentOS/Ubuntu比较常用的其它也是按照这两种方式CentOSLinux下载类似这种名称extended代表扩展版本amd架构hugo_extended_0.145.0_linux-amd64.tar.gzarm架构hugo_extended_withdeploy_0.145.0_linux-arm64.tar.gz下载命令wget https://github.com/gohugoio/hugo/releases/download/v0.145.0/hugo_extended_0.145.0_linux-amd64.tar.gz解压tar -zxvf hugo_extended_0.145.0_linux-amd64.tar.gz切换路径cd hugo_extended_0.145.0_linux-amd64移动到目录/usr/local/bin/下sudo mv hugo /usr/local/bin/检查安装终端输入hugo version显示版本信息成功即安装完成显示信息类似如下hugo v0.145.0extended linux/amd64 BuildDateunknownUbuntuLinux下载类似这种名称extended代表扩展版本amd架构hugo_extended_withdeploy_0.145.0_linux-amd64.debarm架构hugo_extended_withdeploy_0.145.0_linux-arm64.deb下载命令wget https://github.com/gohugoio/hugo/releases/download/v0.145.0/hugo_extended_withdeploy_0.145.0_linux-amd64.deb下载安装dpkg如果存在可省略此步骤-左侧是Ubuntu命令sudo apt-get updatesudo apt-get install dpkg安装命令sudo dpkg -i hugo_extended_withdeploy_0.145.0_linux-amd64.deb检查安装终端输入hugo version显示版本信息成功即安装完成显示信息类似如下hugo v0.145.0extended linux/amd64 BuildDateunknown2.Windows安装Windows下载类似这种名称extended代表扩展版本hugo_extended_withdeploy_0.145.0_windows-amd64.zip官网下载下载后解压压缩包进入到目录hugo_extended_withdeploy_0.145.0_windows-amd64复制hugo文件所在的路径例如D:\SoftFile\hugo_extended_0.145.0_Windows-64bit\配置环境变量**Win11位置**系统 系统信息 高级系统设置 环境变量(N)… 系统变量(S)找到Path变量添加新的环境变量D:\SoftFile\hugo_extended_0.145.0_Windows-64bit\检查安装终端输入hugo versiion显示版本信息成功即安装完成显示信息类似如下hugo v0.145.0extended linux/amd64 BuildDateunknown3.Mac安装Mac下载类似这种名称extended代表扩展版本hugo_extended_withdeploy_0.145.0_darwin-universal.tar.gz直接下载或者命令下载下载命令wget https://github.com/gohugoio/hugo/releases/download/v0.145.0/hugo_extended_withdeploy_0.145.0_darwin-universal.tar.gz或curl -LO https://github.com/gohugoio/hugo/releases/download/v0.145.0/hugo_extended_withdeploy_0.145.0_darwin-universal.tar.gz解压tar -xvzf hugo_extended_withdeploy_0.145.0_darwin-universal.tar.gz切换路径cd hugo_extended_withdeploy_0.145.0_darwin-universal移动到目录/usr/local/bin/下sudo mv hugo /usr/local/bin/检查安装终端输入hugo version显示版本信息成功即安装完成显示信息类似如下hugo v0.145.0extended linux/amd64 BuildDateunknown3、系统命令安装除了Mac强烈建议使用上面两种方式安装至于为什么因为有坑而且是大坑这里就涉及到文章开头提到的GCC再就是版本问题下面会讲解到。例如centos的yumUbuntu的apt-getMac常用的Homebrew1.CentOS安装启用 EPEL 仓库Hugo 需要从EPELExtra Packages for Enterprise Linux仓库安装因此如果系统没有启用 EPEL先运行以下命令sudo yum install epel-release -y更新仓库sudo yum update -y下载安装默认标准版sudo yum install hugo -y检查安装终端输入hugo version显示版本信息成功即安装完成显示信息类似如下hugo v0.145.0 linux/amd64 BuildDateunknown**注意**如果是CentOS 7百分百会报错因为官网下载的CentOS 7版本的GCC 都在 5 以下版本太低了这时候就需要手动安装GCC了是不支持直接命令升级的由此会引发一堆必要的不必要的问题。2.Ubuntu更新apt-getsudo apt-get update下载安装默认标准版sudo apt-get install hugo -y检查 Hugo 版本hugo version显示版本信息成功即安装完成显示信息类似如下hugo v0.145.0 linux/amd64 BuildDateunknown**注意**使用apt-get install方式安装的 Hugo 版本通常较旧并且是标准版不支持 SCSS/SASS。3.Mac在macOS上使用Homebrew安装 Hugo 是最简单的方法。Homebrew 默认安装的是Extended 版本支持 SCSS/SASS 处理非常推荐更新 Homebrewbrew update下载安装**默认拓展版Extended**brew install hugo检查 Hugo 版本hugo version显示版本信息成功即安装完成显示信息类似如下hugo v0.145.0 linux/amd64 BuildDateunknown三、使用1、创建站点切换到需要创建站点的目录下执行hugo new site 站点名即可创建一个站点出来站点的目录结构demo ├─archetypes ├─config.toml 配置文件(hugo.toml/hugo.yaml) ├─content 存放MD文件的目录 ├─data ├─layouts ├─static └─themes 模板目录配置文件config.toml常用参数theme docport 模板 baseURL http://example.org/ 访问路径 languageCode zh-cn 语言 title My New Hugo Site html页面的title标题 publishDir demo html静态资源生成的路径默认是public下2、模板老版本配置文件一般config.toml新版本的配置文件一般叫hugo.toml或者hugo.yamltheme主题模板地址此处以book模板为例book的theme模板地址3、安装模板和运行的三种方式1.方式一git submodulegit 子模块安装需要安装git工具创建站点命令是hugo new site 站点名如上就切换到cd 站点名目录下执行命令初始化项目git init执行命令git submodule add https://github.com/alex-shpak/hugo-book themes/hugo-book执行命令复制md文件cp -R themes/hugo-book/exampleSite/content.en/* ./content复制配置文件进入到示例demo项目的themes/hugo-book/exampleSite/目录下复制hugo.yaml内容到demo目录下的config.toml或者hugo.toml就是创建站点时默认生成的配置文件里面。执行命令本地运行站点示例1hugo server --bind 0.0.0.0 --port 1313 --theme hugo-book默认运行端口是1313可以–port指定运行端口–bind指定运行ip–theme指定运行模板执行命令本地运行站点示例2hugo server --minify --theme hugo-book这个命令的作用是启动 Hugo 本地开发服务器并使用hugo-book主题同时进行HTML 代码压缩minify以提高性能。运行后即可浏览器访问默认访问地址http://localhost:1313/打包生成html打包生成静态文件命令hugo或hugo -t hugo-book等参数打包后的静态文件可以直接使用nginx配置访问文件目录结构会发生变化demo ├─archetypes ├─config.toml 配置文件(hugo.toml/hugo.yaml) ├─content 存放MD文件的目录 ├─data ├─demo 会增加的新目录配置里面配置的生成的静态资源都存储在这里 ├─layouts ├─resources 这个也是生成的目录 ├─static └─themes 模板目录resources文件夹是 Hugo 资源管理 机制的存储目录它主要用于缓存 处理过的静态资源包括 图片、SCSS、JS、字体 等。2.方式二hugo modulehugo 模块安装前提条件是需要安装go编译器通过go编译器安装hugo初始化hugo模块hugo mod init github.com/repo/path进入示例hugo项目demo的根目录并将[module]部分添加到hugo.toml中[module][[module.imports]]path github.com/alex-shpak/hugo-book加载/更新主题模块hugo mod get -u执行命令本地运行站点运行命令如上hugo server --minify运行后即可浏览器访问默认访问地址http://localhost:1313/打包生成html打包生成静态文件命令hugo或hugo -t hugo-book等参数打包后的静态文件可以直接使用nginx配置访问文件目录结构会发生变化demo ├─archetypes ├─config.toml 配置文件(hugo.toml/hugo.yaml) ├─content 存放MD文件的目录 ├─data ├─demo 会增加的新目录配置里面配置的生成的静态资源都存储在这里 ├─layouts ├─resources 这个也是生成的目录 ├─static └─themes 模板目录resources文件夹是 Hugo 资源管理 机制的存储目录它主要用于缓存 处理过的静态资源包括 图片、SCSS、JS、字体 等。3.压缩文件安装下载压缩包解压压缩包放到demo下的themes目录下统一模板名称一般下载下来的压缩包解压后的目录名称都会携带-master等内容例如hugo-book-master打开themes/hugo-book-master/exampleSite下的配置文件hugo.yaml查看theme的值修改目录名称保持和theme值一致。一句话概括就是找到exampleSite下的配置文件的theme修改其父级目录文件夹名称执行命令复制md文件cp -R themes/hugo-book/exampleSite/content.en/* ./content复制配置文件进入到示例demo项目的themes/hugo-book/exampleSite/目录下复制hugo.yaml内容到demo目录下的config.toml或者hugo.toml就是创建站点时默认生成的配置文件里面。执行命令本地运行站点示例1hugo server --bind 0.0.0.0 --port 1313 --theme hugo-book默认运行端口是1313可以–port指定运行端口–bind指定运行ip–theme指定运行模板执行命令本地运行站点示例2hugo server --minify --theme hugo-book这个命令的作用是启动 Hugo 本地开发服务器并使用hugo-book主题同时进行HTML 代码压缩minify以提高性能。运行后即可浏览器访问默认访问地址http://localhost:1313/打包生成html打包生成静态文件命令hugo或hugo -t hugo-book等参数打包后的静态文件可以直接使用nginx配置访问文件目录结构会发生变化demo ├─archetypes ├─config.toml 配置文件(hugo.toml/hugo.yaml) ├─content 存放MD文件的目录 ├─data ├─demo 会增加的新目录配置里面配置的生成的静态资源都存储在这里 ├─layouts ├─resources 这个也是生成的目录 ├─static └─themes 模板目录resources文件夹是 Hugo 资源管理 机制的存储目录它主要用于缓存 处理过的静态资源包括 图片、SCSS、JS、字体 等。**注意**模板越复杂功能越多越容易出现如下这几类问题情况一有些时候只复制content下的文件是会有问题的这时候就要看exampleSite下还有那些和demo下同名的文件夹把内容拷贝过去即可情况二theme主题模板地址中的某些主题比较特殊可能引用第三方链接之类的东西在运行时可能会因为网络问题导致报错或者其它问题这种情况需要自行查找问题。情况三hugo的版本问题有些时候hugo的版本会导致出现一些样式之类的问题当配置没有问题文件没有问题的时候出现样式错乱和示例demo不一样的情况可以尝试更换hugo版本四、避坑指南使用注意事项在使用hugo命令生成静态文件的时候确认hugo server运行没问题而出现以下情况出现一些没有修改的地方样式或者内容莫名其妙的错乱了页面链接错乱跳转错乱等相关或不相关的莫名其妙的问题这种情况可以使用以下方式解决第一步cd到项目目录下第二步执行缓存清楚命令hugo --gc第三步忽略缓存强制重新构建所有页面执行命令hugo --ignoreCache注意第二、三步可以合并到一起执行hugo --gc --ignoreCache