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

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

好了成功了!

相关文章:

  • 软件架构设计--期末复习
  • HiTool机顶盒刷机提示:网络下载TFTP超时,可能的原因如下
  • volatile
  • DeepSeek 赋能太空探索:从轨道优化到星际开拓的 AI 革命
  • DAY 29 复习日:类的装饰器
  • tauri2项目动态添加 Sidecar可行性方案(运行时配置)
  • 高能数造闪耀 CIBF 2025,以创新技术引领新能源智造新征程
  • 基于MCP的AI Agent应用开发实践
  • 【ComfyUI】关于ComfyUI的一些基础知识和入门设置以及快捷键小技巧【简单易懂】
  • 通过串口设备的VID PID动态获取串口号(C# C++)
  • Java基于数组的阻塞队列实现详解
  • 算法-js-柱状图中最大的矩形
  • Qt如何设置图标
  • 【PyQt5实战】五大对话框控件详解:从文件选择到消息弹窗
  • 等于和绝对等于的区别
  • CHAIN-OF-TABLE: 推理链中的演化表格用于表格理解
  • 智慧园区数据大脑管理平台整体解决方案
  • USB学习【11】STM32 USB初始化过程详解
  • 有源晶振与无源晶振 旁路模式与非旁路模式 深度剖析
  • 2009-2025计算机408统考真题及解析
  • 三人在共享单车上印小广告被拘,北京警方专项打击非法小广告
  • 慢品巴陵,看总编辑眼中的岳阳如何书写“山水人文答卷”
  • 曾毓群说未来三年重卡新能源渗透率将突破50%,宁德时代如何打好换电这张牌
  • 纽约市长称墨海军帆船撞桥已致2人死亡,撞桥前船只疑似失去动力
  • 长三角体育节回归“上海时间”,首次发布赛事旅游推荐线路
  • 上百家单位展示AI+教育的实践与成果,上海教育博览会开幕