Hugo 博客建站笔记

Hugo

简介

Hugo是一个用 Go 语言编写的开源静态网站生成器,具有以下核心特点:

  • 极速构建:平均构建速度 < 1秒/千页
  • 📂 内容优先:支持 Markdown 格式内容管理
  • 🎨 主题生态:丰富的主题库
  • 🖥️ 跨平台 :支持 Windows/macOS/Linux
  • 🌍 多语言:内置国际化(i18n)支持

典型应用场景:

  • 个人/技术博客
  • 项目文档网站
  • 企业官网
  • 作品集展示

架构图

image-20250506100941592

软件下载

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
收录于 合集・博客 1
请作者喝杯咖啡 ☕
贾 支付宝支付宝
贾 微信微信
0%