Hugo 安装保姆级教程(搭建个人blog)

Hugo 安装保姆级教程

友链

参考文章: https://blog.csdn.net/xianyun_0355/article/details/140261279

前言

Hugo 是 Go 编写的静态网站生成器,速度快,易用,可配置。作为一款跨平台开源建站系统,当前提供 Windows,Linux,FreeBSD,NetBSD 和 OS X (Darwin) 的 x 64, i 386 和 ARM 架构的二进制预构建包。

Hugo 依赖于 Markdown 文件,元数据字体。用户可以从任意的目录中运行 Hugo,支持共享主机和其他系统。只需要几分之一秒就可以渲染一个经典的中型网站,非常适合博客,文档等等网站的生成。

image-20240705134636543

步骤

1. 下载 Hugo

接下来教大家如何在 Windows 系统本地安装 HUGO

HUGO 项目地址:** https://github.com/gohugoio/hugo**

image-20250513211255778

image-20250513211351217

2. 创建博客文件夹

创建放博客的文件夹,这里叫 Obsidian-Hugo,并且进入文件夹后再创建一个名为 bin 的文件夹,我们专门放安装的脚本。

把上面下载的内容解压到这个 bin 文件夹中,主要是这个 hugo. exe 文件。hugo. exe 文件其实放哪都行。

image-20250513211651163

3. 配置环境变量

把这个 hugo 程序配置到环境变量去,这样我们才能在其他位置也使用 hugo. exe 提供的命令。

image-20250513212522891

查看是否生效:hugo version。我们在任意非 hugo. exe 所在目录执行这个命令,看到输出版本号就是生效了。

image-20250513212625294

4. 创建博客网站

首先,我们进入到要创建博客的文件夹内,执行 hugo new site 博客名 ,就可以创建博客了。注意,我们为什么要进入这个文件夹呢?因为博客会创建在我们执行这个命令时的目录中的,因为我想把博客放在 Obsidian-Hogo 文件夹内,所以我要 cd 进去。

image-20250513212937978

进入该文件夹后,就能看到刚刚创建的博客网站程序:

image-20250513213027359

5. 创建文章

创建好了站点后,现在网站中还什么内容都没有,我们可以创建一篇文章来进行一下测试。

现在我们进入站点目录,并且创建文章。

hugo new posts/Articles 01. md

image-20250513213515945

执行后可以看到提示已经创建了一篇名为 Articles 01 的文章与其所属路径。

进入这个路径,就能看到文章了。

image-20250513213615530

打开这篇文章后能看到这篇文章的标题,日期等相关信息:

image-20250513213708584

在这里我们需要把 draft(草稿) = true 修改为 draft = false 来表示这并不是一篇草稿。草稿的话,到时候启动博客的时候,你会看不到这个内容。

我们随便编辑点内容,到时候看看这些内容是否展示了:

image-20250513213846753

然后保存关闭即可。

4. 设置主题

Hugo 你要是不设置主题,你看不到内容。所以,我们先设置一下主题。

我们可以登录下方的 hugo 官网页面来挑选一个你喜欢的网站主题: 完整列表 |雨果主题 (gohugo.io)

image-20240705143135266

可以看到非常多各种各样漂亮的主题,我们来随便选择一个 m 10 c,点击进入页面后,可以看到 download 进行下载。

image-20250513214135870

image-20250513214206534

image-20250513214313783

然后我们把这个主题放到 hugo 的 themes 文件夹中。

image-20250513214407998

进入 hugo 的配置文件,把 theme = ‘m 10 c’ 这行代码加进去保存即可。

image-20250513214446186

image-20250513214624224

注意,themes 主题文件夹的名字叫什么,这里就应该叫什么。

5. 本地访问测试

我们在终端中执行下方代码启动本地网站进行测试:

hugo server

image-20250513214728829

image-20250513214744313

点进去看看:

image-20250513214809862

好了成功了!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值