Hugo
简介
Hugo是一个用 Go 语言编写的开源静态网站生成器,具有以下核心特点:
- ⚡ 极速构建:平均构建速度 < 1秒/千页
- 📂 内容优先:支持 Markdown 格式内容管理
- 🎨 主题生态:丰富的主题库
- 🖥️ 跨平台 :支持 Windows/macOS/Linux
- 🌍 多语言:内置国际化(i18n)支持
典型应用场景:
- 个人/技术博客
- 项目文档网站
- 企业官网
- 作品集展示
架构图

软件下载
1
2
|
## 下载地址
wget 'https://github.com/gohugoio/hugo/releases/download/v0.146.7/hugo_extended_0.146.7_linux-amd64.tar.gz' -P /data/soft/
|
解压&安装
1
2
3
4
5
6
7
8
9
10
|
mkdir -pv /data/hugo
tar xf /data/soft/hugo_extended_*_linux-amd64.tar.gz \
-C /usr/local/bin/ hugo
# 增加命令行自动补全
. /usr/share/bash-completion/bash_completion
. <(hugo completion bash)
echo ". <(hugo completion bash)" >> ~/.bashrc
|
配置项目
每个 Hugo 项目都是一个目录,其中的子目录贡献于站点的内容、结构、行为和呈现。在创建新站点时,Hugo 会生成一个项目骨架。例如,运行以下命令:
1
2
3
4
5
6
7
8
9
|
cd /data/hugo/
PROJECT_NAME='blog'
## 创建项目
hugo new site ${PROJECT_NAME}
## 新增默认配置
mkdir -pv ${PROJECT_NAME}/config/_default
|
目录结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
blog/
├── archetypes # 原型目录,用于定义各种类型的内容模板。原型匹配顺序是优先本站点内,其次再到主题内查找。
├── assets # 资产目录,用于放置 CSS,JavaScript 等全局资源库。
│ └── css
├── config # 配置文件目录,主配置文件 hugo.yaml,支持多文件配置、多环境配置。
│ └── _default
├── content # 内容目录,用于放置文章、分类、标签等内容页面。
│ └── posts
├── data # 数据目录,用于存取自定义配置数据。
├── i18n # 国际化目录,用于存放多语言配置文件和博客页面。
├── layouts # 布局目录,用于存放模板文件。
├── public # 部署目录,用于存放 Hugo 构建的静态站点文件。
├── resources # 资源目录,包含 Hugo 资产构建流水线产生的可缓存文件,如 CSS、图片等。
├── static # 静态资源目录,用于放置静态资源文件,如图片、CSS、JavaScript 等。该目录下的文件会被直接拷贝到站点部署目录。
└── themes # 主题目录,用于存放主题文件。
└── FixIt
|
安装主题
1
2
3
4
5
6
7
|
# 官方主题地址
https://themes.gohugo.io/
# 自用(主题)
git clone -b v0.3.19 --depth 1 https://mirrors.chenby.cn/https://github.com/hugo-fixit/FixIt.git
# git clone -b v0.4.2 --depth 1 https://mirrors.chenby.cn/https://github.com/HEIGE-PCloud/DoIt.git
|
使用 Git 管理博客资源
1
2
|
## 创建这些目录
mkdir -pv {.gitea/workflows,article,assets/{css,js},config/_default,content/{friends,site_domain},data,layouts/partials/custom,static/images}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
## 使用代码仓库来组织内容
├── .gitea
│ └── workflows # 工作流配置
│ └── rsync_blog.yaml
├── article # 文章目录
│ ├── Hugo.md
│ ├── xxx.md
│ ├── xxxx.md
│ ├── xxxxx.md
│ ├── xxxxxx.md
│ ├── xxxxxxx.md
│ └── xxxxxxxx.md
├── assets # 静态资源目录
│ ├── css
│ │ └── _custom.scss
│ └── js
│ └── custom.js
├── config # 博客配置
│ └── _default
│ ├── hugo.yaml
│ ├── markup.yaml
│ ├── menu.yaml
│ ├── outputs.yaml
│ └── params.yaml
├── content
│ ├── friends # 自定义页面内容
│ │ └── index.md
│ └── site_domain # 自定义页面内容
│ └── index.md
├── data # 数据目录
│ ├── friends.yaml
│ └── site_domain.yaml
├── layouts # 布局目录,用于存放模板文件。
│ └── partials
│ └── custom
│ └── toc.html
└── static # 静态资源目录
└── images
└── aimp.png
|
修改配置
1
2
|
# 官方配置文档
https://fixit.lruihao.cn/zh-cn/documentation/getting-started/configuration/
|
文章页面配置
1
2
|
## 参考官方配置
https://fixit.lruihao.cn/zh-cn/documentation/getting-started/configuration/#theme-configuration
|
导航页面配置
1
2
|
## 参考官方配置
https://fixit.lruihao.cn/zh-cn/documentation/getting-started/configuration/#menu-configuration
|
启动
1
2
3
4
5
|
## 临时启动(启动一个Web服务器)
hugo server \
--environment=production \
--bind=192.168.5.65 \
--port=80
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
## 博客主页(NGINX代理)
server {
listen 80;
server_name 0.0.0.0;
location / {
root /data/hugo/blog/public;
index index.html;
}
error_page 404 /404.html;
location = /404.html {
root /data/www/blog;
}
}
|
博客文章格式
1
2
|
## 参考官方文档
https://fixit.lruihao.cn/zh-cn/documentation/content-management/introduction/#front-matter
|