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

Hugo是一个用Go语言编写的快速静态网站生成器,适合构建博客和文档网站。文章介绍了Hugo的特性、与其他框架的对比,以及在MAC环境下如何安装和创建首个项目。通过VSCode作为开发工具,文章详细讲解了如何下载和配置主题,以及本地预览网站的过程。最后,文章还提到了WebStack-Hugo这一响应式网址导航主题的安装和使用。
摘要由CSDN通过智能技术生成

1、什么是 Hugo

1.1、简介

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

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

Hugo 官网
Hugo 中文网

在这里插入图片描述
中文网截图
在这里插入图片描述

1.2、框架对比

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

编程语言、安装和使用

框架编程语言seo支持插件主题页面生成速度安装和使用
hugoGo友好不支持非常快简单
hexoNodeJS友好很多非常多稍微复杂
wordpressPHP不友好支持非常多不支持复杂

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

在这里插入图片描述

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

  • 2
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值