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

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.xdnf.cn/news/7174.html

相关文章:

  • 2025.05.17得物机考笔试真题第三题
  • UESplineThicken节点
  • Android开发-翻页类视图
  • 中文分词与数据可视化03
  • 【2025版】OpenFeign快速入门
  • Cursor:简单三步提高生成效率
  • HJ5 进制转换【牛客网】
  • 工作流介绍
  • TIMER免疫浸润分析
  • 谷歌地球引擎GEE将多个遥感影像作为多个波段合并成一张图像并下载的方法
  • C++ deque大小操作、deque数据插入、deque数据删除
  • Linux学习笔记|GCC编译指令基础|静动态库|makefile
  • KAG:通过知识增强生成提升专业领域的大型语言模型(五)
  • Python异常处理与OOP深度解析及实战案例
  • 软件调试纵横谈-18-页堆
  • Java程序员学AI(一)
  • [强化学习的数学原理—赵世钰老师]学习笔记02-贝尔曼方程-下
  • Python 从列表中删除值的多种实用方法详解
  • C++学习:六个月从基础到就业——C++17:std::optional/variant/any
  • 玄机-第一章 应急响应-Linux日志分析
  • LoRA微调的参数学习
  • 1-机器学习的基本概念
  • 浅入ES5、ES6(ES2015)、ES2023(ES14)版本对比,及使用建议---ES6就够用(个人觉得)
  • 电子电路:什么是电子电路中的噪声?为什么会产生噪声?噪声全部是负面影响吗?
  • React-Query使用react-testing-library进行测试
  • c/c++的opencv直方图初识
  • HarmonyOS:应用文件访问(ArkTS)
  • C++算法(23):memset原理、性能对比与替代策略
  • 数据共享的艺术
  • C++中的容器