Featured image of post BlogToHugo

BlogToHugo

Hugo博客搭建

前言

Hugo 搭建其实和hexo差不多,但是介于作者有幸尝试过hexo编译大量文章的经历,可以说hexo的性能已经无法满足我对个人博客的向往,于是乎转Hugo,Hugo 基于Go开发,效率方面毋庸置疑,但是由于该工具出现时间短暂,目前参考资料少,所以笔者在这通过搭建做一些总结

Hugo 安装

  • Hugo 下载 Hugogithub 主页找到Releases,根据个人喜好安装Hugo对应版本,建议 hugo_extended 版本的安装,有额外功能(虽然读者可能根本用不上),但因笔者安装使用此,固推荐,具体异同可以参考这个Issues

  • Hugo 安装 安装时选择任意文件夹,但基于程序员的严谨,不建议安装在含有中文的路径上。之后读者需自行配置安装路径到系统变量(Path)中,如果cmd中Hugo 命令成功识别,此步即完成

1
2
PS D:\Home\Hugo_Blog> hugo version
hugo v0.123.7-312735366b20d64bd61bff8627f593749f86c964+extended windows/amd64 BuildDate=2024-03-01T16:16:06Z VendorInfo=gohugoio
  • Hugo test

参照官方start文档逐步操作,即可初见成效,建议读者尝试跟踪操作,方便后续理解

  • Hugo 目录结构理解
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.
├─archetypes
├─assets
├─content
├─data
├─i18n
├─layouts
├─public
├─resources
├─static
└─themes

有文章写的不错,笔者偷懒:

  1. archetypes 目录

默认,通过 hugo new 创建的内容会添加 date, title, draft = true 等扉页 front matter 设置信息,它们就是从archetypes 模板文件中拷贝的。这可以节省时间,同时保证统一性。

拓展: Hugo中的md文件分为两种类型,简单的文章md文件和page页面md文件,在读者使用中非强需求自定义美化者,否则不需要去理解page页面,使用theme自带的即可

简单理解即是执行hugo new post/test.md时,新创建文章的基本模版是参照 archetypes 目录下的 defult.md 如果对后续有更改默认创建文件的读者可以打开defult.md尝试理解如何使用

  1. assets 目录

不是默认创建的资源目录,保存所有需要通过 Hugo Pipes 处理的资源,只有那些 .Permalink 和 .RelPermalink 引用的文件会发布到 public 目录中,参考 Hugo 管道处理。

默认即可,无需过多在意

  1. content 目录

所有内容页面存放目录,content 下的一级子目录看作一个对应的 section 内容分类区 content section。比如,为博客设置一个 blog 目录,为文章设置一个 articles 目录,为教程设置一个 tutorials 目录等,Hugo 使用内容分类区分作为默认内容类型 content type,如果在扉页 front matter 设置了 type 则以具体设置的类型为准。

该目录中的post目录即为之后文章存放地址,content/post下可以存在子目录,对Hugo渲染不产生大的影响

  1. layouts 目录

布局模板文件目录,存放 .html 布局模板文件,对应不同的内容,模板有多种,data-templates、homepage、lists、menu-templates、partials、section-templates 等等。

站点的首页模板在主题目录中 layouts/index.html,除首页外,Hugo 有两类基本页面: Single page 单体页面,如 hugo new demo.md 创建的 Post 页面; List page 列表页面,如 tags 或 categories 页面; 这两种页面的默认模板都在主题目录中 layouts/_default,分别对应着 single.html 和 list.html。参考单页面内容模板 single-page-templates.> md 和 lists.md 文档。

此目录与data目录,static目录一样,若非初次使用时无需理解

  1. public 目录

默认输出目录,可以通过 -d 参数修改输出路径

  1. theme 目录

用于存放主题文件的目录,且主题文件名与配置文件使用主题相关

  1. config 目录

config目录根据hugo创建的流程不同,有些读者有有些读者没有,不过本质只是把本应该处于 theme 目录中的config.yaml 拆开放入 config目录下,按照设置类型分类

默认根目录下的配置文件在Hugo早期是config.toml文件(config.yaml也可以 Hugo支持多种文件类型)现在统一改为了hugo.toml(hugo.yaml)

  • Hugo 主题

深度自定义患者需要使用酷炫的主题,有多种方式下载与安装Theme,理解本质其实并不复杂(笔者的主题为Stack,以此为基础阐述,若非特别说明均为通用)

  • 下载方式多种,git clone | git submoudle | 手动下载 均可,将下载的压缩包放入theme目录下,解压(注意,如主题名为aaa,则theme/aaa目录下应有 config.yaml)
  • 安装,在主题根目录下的hugo.toml中添加theme = '主题文件夹名'即可完成配置,此时配置完毕,主题已更换

之后可以hugo server在本地端查看博客目前的情况,并且可以在不关闭本地服务端的情况下编辑博客,实时查看博客情况

注意: hugo new 出来的博客默认可能不展示,建议在新文件头中加入或者修改字段draft值为false,即可出现

(读者如果没有隐藏文章的计划,可以尝试修改 archetypes 目录中的defult.md文件中相应字段值,修改默认模版)

Licensed under CC BY-NC-SA 4.0
Dan❤Anan
Built with Hugo
主题 StackJimmy 设计