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

野性酷女 2024-03-26 16:39 31阅读 0赞

## 1、什么是 Hugo ##

### 1.1、简介 ###

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

由于其快速编译和生成速度，Hugo 成为了流行的静态网站生成器之一。

[Hugo 官网][Hugo]  
[Hugo 中文网][Hugo 1]

![在这里插入图片描述][ccdee5d9de934abb9cb8b79e25f8938d.png]  
中文网截图  
![在这里插入图片描述][d9b703a92e024d0ab28edef33b1c935d.png]

### 1.2、框架对比 ###

<table> 
 <thead> 
  <tr> 
   <th>框架</th> 
   <th>静态/动态</th> 
   <th>托管</th> 
   <th>安全性</th> 
   <th>访问速度</th> 
   <th>在线编辑</th> 
   <th>Markdown</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hugo</td> 
   <td>静态</td> 
   <td>简单</td> 
   <td>非常安全</td> 
   <td>非常快</td> 
   <td>不可以</td> 
   <td>支持</td> 
  </tr> 
  <tr> 
   <td>hexo</td> 
   <td>静态</td> 
   <td>简单</td> 
   <td>非常安全</td> 
   <td>快</td> 
   <td>不可以</td> 
   <td>支持</td> 
  </tr> 
  <tr> 
   <td>wordpress</td> 
   <td>动态</td> 
   <td>复杂</td> 
   <td>需要经常升级</td> 
   <td>快</td> 
   <td>可以</td> 
   <td>插件支持</td> 
  </tr> 
 </tbody> 
</table>

编程语言、安装和使用

<table> 
 <thead> 
  <tr> 
   <th>框架</th> 
   <th>编程语言</th> 
   <th>seo支持</th> 
   <th>插件</th> 
   <th>主题</th> 
   <th>页面生成速度</th> 
   <th>安装和使用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hugo</td> 
   <td>Go</td> 
   <td>友好</td> 
   <td>不支持</td> 
   <td>多</td> 
   <td>非常快</td> 
   <td>简单</td> 
  </tr> 
  <tr> 
   <td>hexo</td> 
   <td>NodeJS</td> 
   <td>友好</td> 
   <td>很多</td> 
   <td>非常多</td> 
   <td>快</td> 
   <td>稍微复杂</td> 
  </tr> 
  <tr> 
   <td>wordpress</td> 
   <td>PHP</td> 
   <td>不友好</td> 
   <td>支持</td> 
   <td>非常多</td> 
   <td>不支持</td> 
   <td>复杂</td> 
  </tr> 
 </tbody> 
</table>

## 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 的开发工具。

![在这里插入图片描述][683987988b634fb7a5eb9346307e077d.png]

*  第二步：选择我们刚才通过终端命令创建的 hugo\_hello\_world 项目文件夹，如下所示：

![在这里插入图片描述][de91271d88a44af6839ed9cfbbedd93f.png]

### 3.4、本地预览 ###

# 启动本地项目
    hugo server
    
    # 浏览器输入 http://localhost:1313 访问地址

因为我们是一个新项目，会提示无页面，如下图所示：

![在这里插入图片描述][36f015432943431592c60ffce2d0881a.png]

## 4、安装主题 ##

### 4.1、Hugo 官方主题 ###

[Hugo 官方主题][Hugo 2]

![在这里插入图片描述][6a22bab90e8e45a38fe4b569519099b9.png]

### 4.2、下载主题 ###

我们从官方主题网站选择自己喜欢的主题点击到详情页面下载，这里随机举例下载，如下图：

![在这里插入图片描述][9d9be9cd115f4632a984cfada704bd05.png]

点击下载按钮会跳转到 GitHub 网站，我们继续点击下载

![在这里插入图片描述][d1649ed771254d2e90d98767045c296d.png]

### 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 项目结构，如下图所示

![在这里插入图片描述][7ad80fc7143e4056b6e940fba527ba7b.png]

### 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 访问地址

效果好像不是很理想，如下图所示：

![在这里插入图片描述][5694ce9893384e69a0e6158c49ec9b8c.png]

## 5、WebStack-Hugo ##

### 5.1、简介 ###

##### 一个基于 Hugo 的静态响应式网址导航主题 #####

#### 5.1.1 开源地址 ####

[GitHub][]

[Gitee][]

#### 5.1.2 演示地址 ####

[官网示例][Link 1]

[生信网址导航][Link 2]

[搜搜化州][Link 3]

#### 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 编辑器打开此项目

![在这里插入图片描述][1d2542eebdb34733b3dd0ab60aaabb9d.png]

#### 5.2.2、下载主题 ####

浏览器访问 [GitHub][] 开源地址，点击下载

![在这里插入图片描述][63288aad36df4aeb83d048bfaf4552dc.png]

#### 5.2.3、安装主题 ####

把下载的主题文件复制到 MyWebStack 项目 themes 文件下，并重命名：WebStack-Hugo，项目结构如下图所示：

![在这里插入图片描述][ea2cca9cea454f06a62c9528e865305d.png]

#### 5.2.4、配置主题 ####

将 MyWebStack/themes/WebStack-Hugo/exampleSite/config.toml 的内容复制后，替换 MyWebStack/config.toml 的所有内容，具体操作可参考下图：

![在这里插入图片描述][7075e663763c4398ba610068516eeb53.png]

#### 5.2.5、复制数据 ####

将 /themes/WebStack-Hugo/exampleSite/data 文件夹下的所有文件复制到 MyWebStack/data 文件夹下，如下图所示：

![在这里插入图片描述][da57ab05edee4460b985b00700b6ec3e.png]

#### 5.2.6、本地预览 ####

# 启动本地项目
    hugo server
    
    # 浏览器输入 http://localhost:1313 访问地址

#### 5.2.7、项目截图 ####

*  图例1

![在这里插入图片描述][fd90b28cdf4544e18dd373ba03e4dbd4.png]

*  图例2

![在这里插入图片描述][777d63ab80a94d1bace0112fd4a80e8d.png]

*  图例3

![在这里插入图片描述][3ac54fb346b14734861b51ccc98fa253.png]

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

[Hugo]: https://gohugo.io
[Hugo 1]: https://www.gohugo.cn
[ccdee5d9de934abb9cb8b79e25f8938d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a62bc9d21314414e9eab4a5f4c221593.png
[d9b703a92e024d0ab28edef33b1c935d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b1ee288703fc4f44b7a7299ea605720d.png
[683987988b634fb7a5eb9346307e077d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5d8ad46f3af648a7b937ed1d802dd2cc.png
[de91271d88a44af6839ed9cfbbedd93f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/34be0742192a4aa38adfac2ba7d03aa5.png
[36f015432943431592c60ffce2d0881a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2ba009f8693a4cb895a0bd1edc9194a6.png
[Hugo 2]: https://themes.gohugo.io
[6a22bab90e8e45a38fe4b569519099b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/462437baa8ce4332986a8a141a36d9fe.png
[9d9be9cd115f4632a984cfada704bd05.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/99c34300a92a4e619ff645e9b1cb735a.png
[d1649ed771254d2e90d98767045c296d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ca8a0c375b75408bb679525a784a65d7.png
[7ad80fc7143e4056b6e940fba527ba7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/799615db592e4f2f9659383941661201.png
[5694ce9893384e69a0e6158c49ec9b8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/7fe5db42c0964606b766e3923c9fb5fb.png
[GitHub]: https://github.com/shenweiyan/WebStack-Hugo
[Gitee]: https://gitee.com/shenweiyan/WebStack-Hugo
[Link 1]: https://nav.bioitee.com
[Link 2]: https://bioit.top
[Link 3]: https://so.gd.cn
[1d2542eebdb34733b3dd0ab60aaabb9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f8d44fe669274789b85a92c7b35a1ff2.png
[63288aad36df4aeb83d048bfaf4552dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d92cb69fa7704fdbbbd764960de68acb.png
[ea2cca9cea454f06a62c9528e865305d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4f729a9511f94f6b8c5ae52102a4f360.png
[7075e663763c4398ba610068516eeb53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4e1171d4e1164778985138c30613262a.png
[da57ab05edee4460b985b00700b6ec3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8da43d5a3a48446bb782f12dcd9869cd.png
[fd90b28cdf4544e18dd373ba03e4dbd4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/05b8102fa5004650a8c4702f0fef2273.png
[777d63ab80a94d1bace0112fd4a80e8d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/024d5086c8744ff2b1d054c160b97520.png
[3ac54fb346b14734861b51ccc98fa253.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/414b6e8506da492fa4cf3137447ba237.png