Hugo 是一款快速、灵活且安全的开源静态网站生成器，本文介绍如何使用 Hugo 创建一个网站，生成静态文件并发布到 Nginx。
操作系统：Ubuntu 24.04
使用 Hugo 创建网站的基本流程：
- 安装 Hugo
- 创建一个新的 Hugo 项目
- 选择并应用主题
- 创建内容（Markdown 文件）
- 生成网站
- 部署网站
安装 Hugo
准备
安装 hugo，需要先安装：
1
2
3
|
# 安装
sudo apt update -y
sudo apt install -y git golang-go
|
安装
建议使用snap安装，snap安装版本一般比apt安装版本新，并且snap包会自动更新。
apt 安装
1
2
3
4
5
|
# 安装
sudo apt install -y hugo
# 验证安装的版本
hugo version
# hugo v0.123.7+extended linux/amd64 BuildDate=2024-07-16T05:50:19Z VendorInfo=ubuntu:0.123.7-1ubuntu0.1
|
snap 安装
1
2
3
4
5
|
# 安装
sudo snap install hugo
# 验证安装的版本
hugo version
# hugo v0.135.0-f30603c47f5205e30ef83c70419f57d7eb7175ab+extended linux/amd64 BuildDate=2024-09-27T13:17:08Z VendorInfo=snap:0.135.0
|
创建一个新的 Hugo 项目
1
2
3
|
# 执行 hugo new site {your_project_name}
hugo new site quickstart
cd quickstart
|
生成的项目结构如下：
1
2
3
4
5
6
7
8
9
10
11
|
.
├── archetypes
│ └── default.md
├── assets
├── content
├── data
├── hugo.toml
├── i18n
├── layouts
├── static
└── themes
|
archetypes/default.md
1
2
3
4
5
|
+++
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
date = {{ .Date }}
draft = true
+++
|
hugo.toml
1
2
3
|
baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
|
选择并应用主题
添加 ananke 主题到 themes 目录下：
1
2
3
4
|
# 下载主题
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
# 设置主题
echo "theme = 'ananke'" >> hugo.toml
|
创建内容（Markdown 文件）
1
2
3
4
|
# 执行 hugo new content 创建markdown文件
hugo new content content/posts/my-first-post.md
# 查看
cat content/posts/my-first-post.md
|
content/posts/my-first-post.md
1
2
3
4
5
|
+++
title = 'My First Post'
date = 2024-09-20T15:46:13+08:00
draft = true
+++
|
执行 hugo new content 创建文件时，会根据 archetypes/default.md 文件生成文件初始内容，比如上述例子的 title 和 date。
然后，添加文件内容，示例如下：
1
2
3
4
5
6
7
8
9
10
11
|
+++
title = 'My First Post'
date = 2024-09-20T15:46:13+08:00
draft = true
+++
## Introduction
This is **bold** text, and this is *emphasized* text.
Visit the [Hugo](https://gohugo.io) website!
|
生成网站
执行以下命令之一，生成网站预览，
1
2
|
hugo server --buildDrafts
hugo server -D
|
如果执行报错：
1
|
execute of template failed: template: partials/func/style/GetMainCSS.html:69:23: executing "partials/func/style/GetMainCSS.html" at <css>: can't evaluate field Sass in type interface {}
|
原因可能是 hugo 版本为旧版本，可以尝试更新到最新版本。
浏览器访问：http://localhost:1313/ 即可预览网站。
部署网站
以通过 ssh 部署到远程服务器为例
编辑部署脚本 deploy.sh
1
2
3
4
5
6
7
8
|
#!/usr/bin/env bash
USER=<your_user_name>
HOST=<your_host_domain_or_ip_address>
DIR=/var/www/html/ # the directory where your website files should go
hugo && rsync -avz -e "ssh -p 22" --delete public/ ${USER}@${HOST}:/${DIR} # this will delete everything on the server that's not in the local public folder
exit 0
|
执行 deploy.sh
1
2
|
chmod +x deploy.sh
./deploy.sh
|
参考资料