当前位置: 代码网 > 快讯>科技创新 > Hugo搭建静态网站教程

Hugo搭建静态网站教程

2026年09月26日 • 科技创新 •我要评论
之前我介绍了cloudflare pages,github pages等静态网站托管平台,那么,用户如果想搭建一个静态网站,还需要一个静态网站生成软件,在大量的同类工具里,例如hexo、jekyll等

之前我介绍了cloudflare pages,github pages等静态网站托管平台,那么,用户如果想搭建一个静态网站,还需要一个静态网站生成软件,在大量的同类工具里,例如hexo、jekyll等等,hugo是速度最快,而且上手也最容易的一个选择,由于hugo是go语言编写,速度极快,几千页的网站能在几秒钟生成完毕,这也是目前个人网站搭建平台最优的选择之一,下面我就介绍一下如何使用hugo搭建一个静态网站。

第一步:安装hugo

安装hugo之前,首先要先从下面的两个地址来安装git和go:

git下载地址:https://git-scm.com/install/

go下载地址:https://go.dev/dl/

安装完成之后,就可以从下面的地址来安装hugo:

hugo下载地址:https://github.com/gohugoio/hugo/releases/latest

地址里有很多个hugo版本,建议选择下载 hugo extended 这个版本,大多数包管理器默认安装的就是这个版本。

对于系统来说,hugo本身只有一个exe文件,下载后将其放在任意目录均可,但该目录需要在“系统变量”的path里才行,比如c:\windows目录。

之后,打开cmd或者powershell,输入hugo version可以查看当前hugo程序的版本号。

第二步:创建站点

安装好之后,就可以使用hugo来搭建网站了。

先创建一个目录,然后用一条命令就能生成一个新静态网站的基础目录结构:(本例创建的站点名为mysite,大家可以自定义):

hugo new site mysite

之后,我们会看到当前目录新增了一个mysite的文件夹,这个文件夹就是hugo的工作目录。

下面简单说明几个关键目录的作用:

content/:存放你的文章和页面内容(markdown 文件)

layouts/:网站模板文件

static/:静态资源,比如图片、字体,会原样复制到最终生成的网站中

themes/:主题存放目录

hugo.toml:站点的核心配置文件

修改 hugo.toml 文件,可以修改网站的语言、标题、网址、分页、permalinks等功能。

第三步:安装主题样式

hugo 本身不自带任何样式,需要单独安装主题。这里以轻量、简洁著称的 papermod 主题为例,用 git 子模块的方式引入:

git submodule add https://github.com/adityatelange/hugo-papermod.git themes/papermod

之后编辑 hugo.toml ,在文件中加入下面这一行,指定使用这个主题:

theme = "papermod"

如果不用git子模块,也可以直接从github仓库下载该主题的压缩包,解压到 themes/ 目录下即可,效果是一样的。

第四步:写文章

创建好了站点后,现在网站中还什么内容都没有,执行下方命令创建一篇markdown格式的文章:

hugo new posts/hello-world.md

生成的文件位于 content/posts/hello-world.md,打开后大致长这样:

---
title: "hello world"
date: 2026-08-30t10:00:00+08:00
draft: true
---

顶部用 --- 包裹起来的部分是文章的配置信息,用来定义标题、发布时间、是否为草稿、标签、目录等元信息。正文部分使用标准 markdown 语法编写就可以了,支持标题、列表、代码块、图片等常见格式。

在顶部加入 tags 和 categories 字段,配合主题自带的归档页面,可以自动生成标签云和分类列表。

默认新建文章为草稿状态,必须将 draft 改为 false,上线后才能正常展示。

把图片放进 static/images/ 目录,在文章中用 /images/xxx.png 的相对路径引用即可。

第五步:预览并生成静态文件

一切准备就绪后,可以使用下面的命令,启动本地开发服务器,实时预览效果:

hugo server

命令执行后,在浏览器打开 http://localhost:1313 就能看到网站了。修改任何文件保存后,页面会自动刷新,不需要手动重启服务。

确认内容和样式都没问题之后,执行下面的命令生成最终的静态网站:

hugo

hugo会把所有内容编译到 public/ 目录下,这里面的文件就是可以直接部署的完整网站,全是纯 html、css 和 js,不依赖任何后端服务。把这个目录发布到cloudflare pages或github pages等静态网站托管平台,即可完成部署上线,具体如何部署,可参考我之前的两篇文章。

如果对于页面不满意,可以修改模板,强烈建议使用目前的codex、antigravity或trae等ai编程工具来修改模板,效率非常高。

小结

总的来说,整个流程走下来其实并不复杂:安装 hugo、初始化站点、装主题、写 markdown、本地预览、生成静态文件、推送部署。相比传统的 cms 建站方式,hugo 的好处在于内容都是纯文本文件,可以用 git 做版本管理,也不用操心数据库和服务器安全问题,特别适合个人博客、文档站点这类以内容为主的场景。

hugo搭建静态网站教程

赞 (0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2026  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com