1、什么是 Hugo
1.1、简介
Hugo 是一个由 Go 语言编写的静态网站生成器。它可以帮助用户快速构建高性能的静态网站，特别是博客、文档和个人网站等。与其他静态网站生成器相比，Hugo 的特点是速度快、易于使用、可扩展性强等。Hugo 使用简单的 Markdown 和 HTML 等标记语言来创建内容，并使用 Go 语言的模板引擎来自定义主题和布局。Hugo 的优点还包括其跨平台性、低资源消耗和易于维护等。
由于其快速编译和生成速度，Hugo 成为了流行的静态网站生成器之一。
Hugo 官网
1.2、框架对比
| 框架 | 静态/动态 | 托管 | 安全性 | 访问速度 | 在线编辑 | Markdown |
|---|---|---|---|---|---|---|
| hugo | 静态 | 简单 | 非常安全 | 非常快 | 不可以 | 支持 |
| hexo | 静态 | 简单 | 非常安全 | 快 | 不可以 | 支持 |
| wordpress | 动态 | 复杂 | 需要经常升级 | 快 | 可以 | 插件支持 |
编程语言、安装和使用
| 框架 | 编程语言 | seo支持 | 插件 | 主题 | 页面生成速度 | 安装和使用 |
|---|---|---|---|---|---|---|
| hugo | Go | 友好 | 不支持 | 多 | 非常快 | 简单 |
| hexo | NodeJS | 友好 | 很多 | 非常多 | 快 | 稍微复杂 |
| wordpress | PHP | 不友好 | 支持 | 非常多 | 不支持 | 复杂 |
2、安装 Hugo
2.1、MAC 环境
安装 Hugo 需要先安装 Homebrew，Homebrew 是 MacOS 上的包管理器，可以用来安装其他软件。
- 步骤一：安装 Homebrew 可以通过在终端执行以下命令完成：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
这个命令会自动下载 Homebrew 并安装到系统中。在安装过程中，可能会提示输入管理员密码，需要输入当前系统用户的密码。安装完成后，可以通过在终端输入 brew -v 命令来验证是否安装成功，如果安装成功，会显示当前 Homebrew 的版本信息。
- 步骤二：安装 Hugo 在终端执行以下命令完成：
# 查看 Homebrew 的版本
brew --version
# 安装 Hugo
brew install hugo
# 查看 Hugo 的版本
hugo version
3、第一个项目
3.1、创建工作空间
先创建一个新的文件夹，例如：csdn_hugo 用于存储我们学习过程中的 Hugo 项目，并通过终端访问此文件夹，示例如下：
# 切换到工作空间
cd /Users/woniu/Documents/csdn_hugo
3.2、创建 Hugo 项目
# 创建一个新的 Hugo 项目，项目名称：hugo_hello_world
hugo new site hugo_hello_world
3.3、开发工具
- 第一步：我们这里使用 VS Code 编辑器做为 Hugo 的开发工具。
- 第二步：选择我们刚才通过终端命令创建的 hugo_hello_world 项目文件夹，如下所示：
3.4、本地预览
# 启动本地项目
hugo server
# 浏览器输入 http://localhost:1313 访问地址
因为我们是一个新项目，会提示无页面，如下图所示：
4、安装主题
4.1、Hugo 官方主题
Hugo 官方主题
4.2、下载主题
我们从官方主题网站选择自己喜欢的主题点击到详情页面下载，这里随机举例下载，如下图：
点击下载按钮会跳转到 GitHub 网站，我们继续点击下载
4.3、安装主题
将下载的主题文件夹 hugo-theme-stack-master，复制到我们创建的hugo_hello_world 项目 themes 文件夹下，示例目录如下：
# 例如我的项目工作空间路径如下
cd /Users/woniu/Documents/csdn_hugo
# 项目名称如下
hugo_hello_world
# 最终将下载主题复制的完整路径如下
cd /Users/woniu/Documents/csdn_hugo/hugo_hello_world/themes
VS Code 项目结构，如下图所示
4.4、配置主题
我们在 VS Code 编辑器打开 config.toml ，文件内容如下：
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
配置我们下载的主题，最终完整代码如下：
# 网站的基本地址
baseURL = 'http://example.org/'
# 指定站点的默认语言
languageCode = 'en-us'
# 网站的标题
title = 'CSDN 蜗牛 Hugo 教程网站'
# 网站所使用的主题
theme = "hugo-theme-stack-master"
4.5、本地预览
# 启动本地项目
hugo server
# 浏览器输入 http://localhost:1313 访问地址
效果好像不是很理想，如下图所示：
5、WebStack-Hugo
5.1、简介
一个基于 Hugo 的静态响应式网址导航主题
5.1.1 开源地址
GitHub
Gitee
5.1.2 演示地址
官网示例
生信网址导航
搜搜化州
5.1.3 特色功能
这是 Hugo 版 WebStack 主题。可以借助 Github Pages 或者 Coding 直接托管部署，无需服务器。
总体说一下特点：
- 采用了一直以来最喜欢的 hugo 部署方式，方便高效。
- 主要的配置信息都集成到了 config.toml，一键完成各种自定义的配置。
- 导航的各个信息都集成在 data/webstack.yml 文件中，方便后续增删改动。
5.2 本地安装
5.2.1、创建项目
# 创建一个新的 Hugo 项目，项目名称：MyWebStack
hugo new site MyWebStack
并通过 VS Code 编辑器打开此项目
5.2.2、下载主题
浏览器访问 GitHub 开源地址，点击下载
5.2.3、安装主题
把下载的主题文件复制到 MyWebStack 项目 themes 文件下，并重命名：WebStack-Hugo，项目结构如下图所示：
5.2.4、配置主题
将 MyWebStack/themes/WebStack-Hugo/exampleSite/config.toml 的内容复制后，替换 MyWebStack/config.toml 的所有内容，具体操作可参考下图：
5.2.5、复制数据
将 /themes/WebStack-Hugo/exampleSite/data 文件夹下的所有文件复制到 MyWebStack/data 文件夹下，如下图所示：
5.2.6、本地预览
# 启动本地项目
hugo server
# 浏览器输入 http://localhost:1313 访问地址
5.2.7、项目截图
- 图例1
- 图例2
- 图例3
本文教程到此结束，小伙伴们可以愉快的开启编程之旅。
