published on 26.07.2020

This post contains nothing but notes that I took while experimenting Hugo templates. To understand each page and it’s variables (properties) I’ve created a partial called hugo_debug.html and used it in baseof.html, simply by adding this line: {{ partial "hugo_debug.html" . }}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div>
Title: {{.Title}} <br>
Kind: {{.Kind}} <br>
Section: {{.Section}} <br>
Type: {{.Type}} <br>
Layout: {{.Layout}}<br>
Site Author: {{.Site.Author.FullName}}<br>
Author: {{ .Params.Author }} <br>
Categories: {{ .Params.Categories }} <br>
Date: {{.Date.Format "2006-01-02 Monday"}}<br>
Params: {{.Params}}<br>
</div>

Section vs Type

  • Section is the first folder under content (content/blog => blog)
  • Section cannot be set in front matter
  • Type can be set in front matter
  • If Type isn’t set, the value of Section will be used

Example: for a file named “foo” from a section called “posts”.

1
/content/post/foo.md
1
2
3
Type: post
Section: post
Kind: page

Example: for a file named “bar” from a section called “foo”.

1
/content/foo/bar.md
1
2
3
Type: foo
Section: foo
Kind: page

Section Pages

Section pages are the index pages or home pages for that section. These pages are created auto-magically by Hugo and we can overwrite them by simply creating a file called _index.md in that section.

1
/content/foo/
1
2
3
Type: foo
Section: foo
Kind: section

Ordinary Pages (about.md)

1
/content/about.md

Normally, these pages have the following properties. Yet, I set Type: ordinary to be able to separate them from normal blog posts while listing content with Hugo templates. Explained here

1
2
3
Type: page
Section:
Kind: page

Taxonomy

Hugo lets us group content with taxonomies.

1
/categories
1
2
3
Type: categories
Section: categories
Kind: taxonomy

Term

1
/categories/foo
1
2
3
Type: categories
Section: categories
Kind: term
You are reading the 2nd of 19 episodes in Hugo.
Published on 26.07.2020 by Mert Bakır with commit 7d2e42f.
hugo
#hugo #web-dev
Next episode:
Hugo Templates: This is My Design
published on 03.08.2020

In this post, I aim to explain this website. Template by template… The main purpose here is to create a document to myself for future reference. Templates are complicated and not easy to read. That’s why I’ll probably forget what I did and why I coded this way. […] We are …

published on 21.08.2020

“Overwriting default landing page for Hugo taxonomies”. What do I mean by that? By default, Hugo will create a home page or a landing page for your taxonomies. /tags/ or /categories are good examples. If you don’t have any specific templates for tags /layouts/tags/list.html Hugo …

published on 05.08.2020

This post will be very short and precise. In Jekyll, we had to create an .xml file using liquid templates to tell Jekyll that we want an rss.xml or similarly sitemap.xml. Luckily, Hugo creates these files for us under the hood. You can check them by going to /index.xml and /sitemap.xml pages in your …

published on 24.01.2021
edited on 11.06.2021

Some time ago, I wanted to display image galleries on my Hugo website and searched for Hugo themes for photography and gallery. I can’t say I find much. Then, I met with a javascript library called nanogallery2 which is using another javascript library as an image viewer lightbox2. In this …

published on 23.01.2021
edited on 11.06.2021

Image processing may seem complicated at first but it’s actually easy and definitely worth implementing since it’ll help you decrease page load times. As you probably know, we don’t want to load raw images with huge sizes for small thumbnails or blog-posts. We want to load a small …

published on 29.11.2020
edited on 05.12.2020

Plotly is a visualization library that allows us to write code in Python, R, or Julia and generates interactive graphs using Javascript. So, we don’t have to deal with Javascript. You can checkout Plotly gallery, there are interesting works. Anyway, last week, I’ve started learning …

published on 18.09.2020
edited on 13.02.2021

First of all, if you don’t know about data files, you may want to start reading from data files in hugo. This post is about a solution for a very particular problem. How can we use “group by” for the data from data files? Let me clarify with an example. I was creating a single page …