Hugo 静态站点搭建从本地调试到上线部署实操指南Hugo高性能静态站点生成器打包输出纯静态资源无需后端数据库部署简单上传文件即可上线。页面加载速度快访问稳定。本地预览调试便捷支持主题定制可灵活配置 SEO 与备案信息适配多种部署平台适合个人博客、作品集、企业轻官网搭建。Hugo 和 VitePress 有什么差异Hugo 与 VitePress 的定位存在明显差异。VitePress 原生面向技术文档场景虽然也能改造实现博客或企业官网但缺少大量开箱即用的成熟模板自定义开发成本更高而 Hugo 主题生态丰富更适合快速搭建个人博客、作品集与企业轻官网。本文主要针对Hugo进行讲解。想要系统学习Hugo建站的小伙伴不妨跟随本文档一步步实操从零掌握完整搭建流程文中涉及主要官方网址如下Hugo 官方网站https://gohugo.io/Hugo 主题市场https://themes.gohugo.io/Hugo Github 仓库https://github.com/gohugoio/hugoHugo 客户端下载https://github.com/gohugoio/hugo/releases一、部署开发环境1.1、安装Hugo客户端Hugo 属于命令行工具无内置 GUI 可视化界面可前往 GitHub 项目发布页面下载对应安装包。访问下载https://github.com/gohugoio/hugo/releases1.2、验证Hugo环境终端执行命令hugo version星若生辉 ~/Desktop%hugo version hugo v0.167.0-3fff6fb5c267dacb26280c78dbe8c344054249c8extended darwin/amd64 BuildDate2026-09-28T14:50:38Z VendorInfogohugoio 星若生辉 ~/Desktop%星若生辉 ~/Desktop%有版本输出即安装成功二、创建调试项目2.1、创建项目终端执行命令hugo new site hugo-project创建hugo-project项目星若生辉 ~/Desktop%hugo new site hugo-project Congratulations! Your new Hugo project was created in ~/Desktop/hugo-project.星若生辉 ~/Desktop%2.2、启动项目进入到hugo-project目录执行命令hugo server -D --bind 0.0.0.0启动项目星若生辉 ~/Desktop/hugo-project%hugo server-D--bind 0.0.0.0 Watchingforchanges in Watchingforconfig changes inStartbuilding sites … hugo v0.167.0-3fff6fb5c267dacb26280c78dbe8c344054249c8extended darwin/amd64 BuildDate2026-09-28T14:50:38Z VendorInfogohugoio │ EN ──────────────────┼──── Pages │ 4 Paginator pages │ 0 Non-page files │ 0 Static files │ 0 Processed images │ 0 Aliases │ 0 Cleaned │ 0 Built in 29 ms Environment:developmentServing pagesfromdisk Running in Fast Render Mode.Forfull rebuilds on change: hugo server--disableFastRender Web Server is available at http://localhost:1313/(bind address 0.0.0.0)Press CtrlC to stop启动完成后打开浏览器访问http://localhost:1313/页面输出Page Not Found恭喜你项目启动成功了同一网络环境下手机访问http://电脑局域网IP:1313输出亦是如此2.3、主题模板配置与调试2.3.1、下载主题模板访问地址https://themes.gohugo.io/ 选择Universal模板下载下面以hugo-universal-theme-1.4.1.zip主题模板为例进行讲解2.3.2、安装主题模板①解压hugo-universal-theme-1.4.1.zip并拷贝文件夹到themes目录下②将hugo-project/themes/hugo-universal-theme-1.4.1/exampleSite目录下所有文件及文件夹拷贝到hugo-project/项目根目录下项目根目录下执行cp-r themes/hugo-universal-theme-1.4.1/exampleSite/*./此时hugo-project/content目录、hugo-project/data目录、hugo-project/static目录被填充③删除文件hugo-project/hugo.toml修改hugo-project/config.toml文件名为hugo.toml打开hugo.toml文件进行修改baseurl /#本地用 / 线上用域名title Universal#网站标题theme hugo-universal-theme-1.4.1#theme目录下文件夹名#themesDir ../.. #注销或删除该行④重新启动项目星若生辉 ~/Desktop/hugo-project%hugo server-D--bind 0.0.0.0重启后是下图效果则主题模板载入成功但是你大概率看到是下面的效果整个页面排版错乱主题模板载入失败2.3.3、调试主题模板出现样式错乱查看控制台网络面板可以发现是bootstrap资源加载失败。只需将资源替换为国内 CDN 地址即可解决。①打开文件themes/hugo-universal-theme-1.4.1/layouts/partials/headers.html进行如下修改用下面代码替换第 24 行 link relstylesheethrefhttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css②打开文件themes/hugo-universal-theme-1.4.1/layouts/partials/scripts.html进行如下修改用下面代码替换第 3 行 script srchttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js/script刷新页面Universal模板正常展示2.4、发布上线最后只需将hugo-project/public这一个文件夹发布上线即可三、在线预览我已部署好在线预览地址大家可以直接访问查看最终效果。点击预览线上效果线上预览地址 https://www.lyfdev.com