从零开始：学习使用 Hugo 构建自己的静态网站

1、什么是 Hugo

1.1、简介

Hugo 是一个由 Go 语言编写的静态网站生成器。它可以帮助用户快速构建高性能的静态网站，特别是博客、文档和个人网站等。与其他静态网站生成器相比，Hugo 的特点是速度快、易于使用、可扩展性强等。Hugo 使用简单的 Markdown 和 HTML 等标记语言来创建内容，并使用 Go 语言的模板引擎来自定义主题和布局。Hugo 的优点还包括其跨平台性、低资源消耗和易于维护等。

由于其快速编译和生成速度，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

在这里插入图片描述

本文教程到此结束，小伙伴们可以愉快的开启编程之旅。