当前位置: 首页 > article >正文

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

Hogo 安装保姆级教程

友链

参考文章: 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

好了成功了!

http://www.lryc.cn/news/2379230.html

相关文章:

  • tomcat查看状态页及调优信息
  • 从坏道扫描到错误修复:HD Tune实战指南
  • 将嵌入映射到 Elasticsearch 字段类型:semantic_text、dense_vector、sparse_vector
  • 【LeetCode 热题100】17:电话号码的字母组合(详细解析)(Go语言版)
  • 解决uni-app开发中的“TypeError: Cannot read property ‘0‘ of undefined“问题
  • 翻译:20250518
  • 西门子1200/1500博图(TIA Portal)寻址方式详解
  • 《Python星球日记》 第78天:CV 基础与图像处理
  • 踩坑:uiautomatorviewer.bat 打不开
  • Atcoder Beginner Contest 406
  • 记录一次win11本地部署deepseek的过程
  • 嵌入式STM32学习——外部中断EXTI与NVIC的基础练习⭐
  • 进程状态并详解S和D状态
  • 数据获取_Python
  • <前端小白> 前端网页知识点总结
  • 历史数据分析——宁波海运
  • 小结:jvm 类加载过程
  • OpenCv高阶(八)——摄像头调用、摄像头OCR
  • Java开发经验——阿里巴巴编码规范实践解析3
  • MySQL——6、内置函数
  • MySQL如何查看某个表所占空间大小?(表空间大小查看方法)
  • 软件架构之-论软件系统架构评估以及应用
  • 低延迟与高性能的技术优势解析:SmartPlayer VS VLC Media Player
  • pytorch小记(十九):深入理解 PyTorch 的 `torch.randint()` 与 `.long()` 转换
  • 深入解析Spring Boot与微服务架构:从入门到实践
  • 【交互 / 差分约束】
  • 宝塔面板部署前后端项目SpringBoot+Vue2
  • 现代生活健康养生新视角
  • 鸿蒙Next API17新特性学习之如何使用新增鼠标轴事件
  • 多模态大语言模型arxiv论文略读(八十一)