Hugo博客搭建完全指南

Mon, 15 Jan 2024 14:30:00 +0800

🚀 引言

Hugo是一个基于Go语言开发的静态网站生成器，以其极快的构建速度和丰富的功能而闻名。本文将带你从零开始搭建一个功能完整、设计精美的个人博客。

📋 准备工作

在开始之前，我们需要准备以下工具：

必需工具

Hugo: 静态网站生成器
Git: 版本控制工具
文本编辑器: VS Code, Sublime Text等
终端: 用于执行命令

可选工具

GitHub: 用于代码托管和部署
Netlify/Vercel: 用于网站部署
域名: 自定义域名（可选）

🔧 安装Hugo

macOS安装

使用Homebrew安装是最简单的方式：

1
2
3
4
5


# 安装Homebrew（如果还没有安装）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 安装Hugo
brew install hugo

验证安装

1

hugo version

🏗️ 创建新网站

1. 初始化项目

1
2


hugo new site my-blog
cd my-blog

2. 项目结构说明

my-blog/
├── archetypes/ # 内容模板
├── content/ # 文章内容
├── data/ # 数据文件
├── layouts/ # 页面布局
├── static/ # 静态资源
├── themes/ # 主题目录
└── hugo.toml # 配置文件

🎨 选择和配置主题

安装主题

1
2


# 以PaperMod为例
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

配置文件示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


baseURL = 'https://yourblog.com'
languageCode = 'zh-cn'
title = '我的个人博客'
theme = 'PaperMod'

[params]
 author = "你的名字"
 description = "个人博客描述"
 
[menu]
 [[menu.main]]
 name = "首页"
 url = "/"
 weight = 10
 [[menu.main]]
 name = "文章"
 url = "/posts/"
 weight = 20

✍️ 创建内容

创建新文章

1

hugo new posts/my-first-post.md

Markdown语法技巧

标题层级

1
2
3


# 一级标题
## 二级标题
### 三级标题

代码块

1
2
3
4


```python
def hello_world():
 print("Hello, World!")
```​

列表和表格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


### 无序列表
- 项目一
- 项目二
- 项目三

### 有序列表
1. 第一步
2. 第二步
3. 第三步

### 表格
| 功能 | Hugo | Jekyll | Hexo |
|------|------|--------|------|
| 速度 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |
| 易用性 | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |

🚀 部署上线

GitHub Pages部署

创建仓库

静态网站 on Zampo Blog

Hugo博客搭建完全指南

🚀 引言

📋 准备工作

必需工具

可选工具

🔧 安装Hugo

macOS安装

验证安装

🏗️ 创建新网站

1. 初始化项目

2. 项目结构说明

🎨 选择和配置主题

热门主题推荐

安装主题

配置文件示例

✍️ 创建内容

创建新文章

Markdown语法技巧

标题层级

代码块

列表和表格

🚀 部署上线

GitHub Pages部署