前言
Hugo 搭建其实和hexo差不多,但是介于作者有幸尝试过hexo编译大量文章的经历,可以说hexo的性能已经无法满足我对个人博客的向往,于是乎转Hugo,Hugo 基于Go开发,效率方面毋庸置疑,但是由于该工具出现时间短暂,目前参考资料少,所以笔者在这通过搭建做一些总结
Hugo 安装
-
Hugo 下载
Hugo
的github
主页找到Releases,根据个人喜好安装Hugo对应版本,建议hugo_extended
版本的安装,有额外功能(虽然读者可能根本用不上),但因笔者安装使用此,固推荐,具体异同可以参考这个Issues -
Hugo 安装 安装时选择任意文件夹,但基于程序员的严谨,不建议安装在含有中文的路径上。之后读者需自行配置安装路径到系统变量(Path)中,如果cmd中Hugo 命令成功识别,此步即完成
|
|
- Hugo test
参照官方start文档逐步操作,即可初见成效,建议读者尝试跟踪操作,方便后续理解
- Hugo 目录结构理解
|
|
有文章写的不错,笔者偷懒:
- 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
尝试理解如何使用
- assets 目录
不是默认创建的资源目录,保存所有需要通过 Hugo Pipes 处理的资源,只有那些 .Permalink 和 .RelPermalink 引用的文件会发布到 public 目录中,参考 Hugo 管道处理。
默认即可,无需过多在意
- content 目录
所有内容页面存放目录,content 下的一级子目录看作一个对应的 section 内容分类区 content section。比如,为博客设置一个 blog 目录,为文章设置一个 articles 目录,为教程设置一个 tutorials 目录等,Hugo 使用内容分类区分作为默认内容类型 content type,如果在扉页 front matter 设置了 type 则以具体设置的类型为准。
该目录中的post目录即为之后文章存放地址,content/post
下可以存在子目录,对Hugo渲染不产生大的影响
- 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目录一样,若非初次使用时无需理解
- public 目录
默认输出目录,可以通过 -d 参数修改输出路径
- theme 目录
用于存放主题文件的目录,且主题文件名与配置文件使用主题相关
- 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文件中相应字段值,修改默认模版)