跳过正文
  1. 文章/

Hugo静态网站入门指南

 Author
文森的科技小站
目录

Hugo 快速入门指南(Mac平台)
#

简介
#

Hugo 是一个流行的静态网站生成器,能够帮助用户快速创建高性能的网站。本文将引导你在几分钟内搭建一个 Hugo 网站。


前提条件
#

安装 Homebrew
#

打开 Terminal(终端),输入以下命令:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

验证 Homebrew 安装成功

brew --version

输出类似:

Homebrew 4.x.x

安装 Git
#

brew install git

安装 Hugo Extended 版
#

brew install hugo

注意(Windows 用户):

  • 请避免使用命令提示符(Command Prompt)和 Windows PowerShell。
  • 推荐使用 PowerShell(最新版)或 Linux 终端(如 WSL 或 Git Bash)。

创建站点
#

主要命令
#

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

执行以上命令后,你可以在终端显示的地址访问你的网站。

命令详解
#

  • hugo new site quickstart:创建名为 quickstart 的项目目录及基本目录结构。
  • cd quickstart:进入项目根目录。
  • git init:初始化一个空的 Git 仓库。
  • git submodule add https: //github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke:将 Ananke 主题作为子模块添加到项目中。
  • echo "theme = 'ananke'" >> hugo.toml:在配置文件中指定主题。
  • hugo server:启动 Hugo 开发服务器,实时预览网站。

按 Ctrl + C 停止开发服务器。

添加内容
#

创建新内容页面:

hugo new content/posts/my-first-post.md

此命令会在 content/posts 文件夹下生成一个 Markdown 文件,默认带有如下 Front Matter:

+++
title = "My First Post"
date = 2024-01-14T07:07:07+01:00
draft = true
+++
  • draft = true 表示该内容为草稿,默认不会被发布。
  • 你可以编辑正文部分,使用 Markdown 语法,例如:
## 介绍

这是**加粗**文本,和*斜体*文本。

访问 [Hugo 官网](<https://gohugo.io>)

启动开发服务器时,使用 --buildDrafts-D 参数可以包含草稿内容:

hugo server --buildDrafts
# 或
hugo server -D

编辑完成并准备发布时,请将 draft 设置为 false

Hugo 支持 CommonMark 标准的 Markdown,官方提供了在线测试工具

配置站点
#

在项目根目录打开 hugo.toml 配置文件,示例如下:

baseURL = '<https://example.org/>'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'

需要根据实际情况修改:

  1. baseURL:生产环境下网站的基础 URL,需以协议开头并以斜杠结尾。
  2. languageCode:语言和地区代码,如 zh-cn
  3. title:网站标题。

保存后重新启动服务器查看效果:

hugo server -D

不同主题可能有额外的配置项,建议查看主题的官方文档。例如,Ananke 主题的配置和使用指南见其GitHub 仓库演示站点

发布站点
#

执行以下命令生成完整的静态网站文件:

hugo

生成的文件位于 public 文件夹内,包含 HTML、图片、CSS 和 JavaScript 等资源。

注意:默认不包含草稿、未来或过期内容。

部署网站到服务器或托管平台请参考 Hugo 的托管与部署指南

重新部署
#

删掉旧站点,用第三方 trash-cli(程序员最爱,它会把文件移到废纸篓,还支持 trash-list、trash-restore 恢复。)

# 安装Homebrew
brew install trash

# 以后永远用 trash 代替 rm
trash ~/my-site # 删除my-site整个文件夹
trash *.log     # 清理 Hugo 运行时产生的日志文件.log
trash public/ themes/  # 典型清理 Hugo 站点时的核弹命令
一次性把生成文件和主题全扔废纸篓

实际使用示例(你在 Hugo 项目根目录下)

# 你现在在 ~/Projects/my-blog 目录里
cd ~/Projects/my-blog

# 1. 先把 Hugo 生成的完整站点删掉最常用
trash public

# 2. 把所有主题删掉换新主题前常用
trash themes

# 3. 把运行日志删掉
trash *.log

# 4. 实在不想玩了连源码一起删整个站点拜拜
trash ~/Projects/my-blog
# 或者直接
trash .
# 点表示当前目录慎用!)

主题安装、切换和更新
#

添加主题
#

在您的 Hugo 站点根目录下(例如 cd mysite),使用 git submodule 命令添加新主题:

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

说明:

  1. 新的主题仓库会被克隆到您站点的 themes/ananke 文件夹中。
  2. 您的 themes 文件夹中现在有两个主题文件夹:LoveItananke

主题切换
#

Hugo 站点使用 配置文件hugo.toml )来决定使用哪个主题。

要切换主题,您只需要修改配置文件中的 theme 这一行配置即可。

方式一:修改 hugo.toml 文件

打开您站点根目录下的 hugo.toml 文件(或 config.toml):

如果要切换到 Ananke 主题,将配置改为:

# hugo.toml
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = 'ananke'  # <-- 切换主题,主题名必须与文件夹名一致

方式二:使用命令行参数(临时切换)

如果您只是想临时预览某个主题而不想永久修改配置文件,可以在运行 hugo server 时加上 --theme 参数:

hugo server -D --theme ananke

更新主题并提交
#

要更新您已安装的主题(以主题LoveIt为例),在项目根目录下运行以下命令:

git submodule update --remote themes/LoveIt

回到根目录,提交更新:

git add themes/LoveIt

提交更改信息

git commit -m "更新主题子模块到最新版本"
git push

从远程拉取到本地(一键拉取包括子模块!!)

git pull --recurse-submodules

修改主题子模块
#

先把主题fork到自己的GitHub仓库(这一步很重要)

把fork的主题作为子模块添加到Hugo项目

git submodule add https://github.com/你的用户名/主题名 themes/主题名

直接在子模块里修改 + 推送

cd themes/主题名
# 修改文件…
git add .
git commit -m "修改主题..."
git push origin main   # 直接推到原仓库
或者 git push origin feature/new  # 推送到new的分支
# 回到主项目
cd ../..
git add themes/主题名
git commit -m "更新主题..."
git push

相关链接
#



📖 阅读量: