published on 29.08.2020
edited on 17.01.2022

In Hugo and generally other static website generators, we are using data files to store data. These files can be in YAML, TOML, or JSON formats. You can always read more about data template in the original documentation. Yet, I want to give some examples from my blog. First of all, converting dates into your language is a good example. Besides that, I’ve 3 data files. All three of them help me to customize sections. You can keep any info you want in these files. For example, you may have different authors on your site and you may want to store author information or you can be a small store and you may keep product information, book information, discography, any metadata you can think of…

Example 1

I keep my blog posts in different sections. You can think of them as folders. I wanted to set different banner images for each section. To do that, I’ve created a partial get_banner_image.html and set banner info in a data file /data/banner.yaml.

default: /link/to/default/image
hugo: /link/to/a/local/image/under/static/folder
jekyll: https://unsplash.com/...
linear programming: ...
{{ $bannerImage := "" }}

{{ if .Params.image }}
    {{ $bannerImage = .Params.image }}
{{ else if and (ne .Section "") (index $.Site.Data.banner .Section) }}
    {{ $bannerImage = index $.Site.Data.banner .Section }}
{{ else }}
    {{ $bannerImage = index $.Site.Data.banner "default" }}
{{ end }}

{{ return $bannerImage }}

Then, I use this partial in another partial banner.html, <img src="{{ partial "get_data/get_banner_image.html" . }}" alt="header-picture">. So, each page can get it’s own banner image if it’s set in the page’s front-matter. If not, it’ll get the default image from the YAML file.

Example 2

The next example is pretty much the same as the “banner image” example. I’ve created themes in sass with different color schemes and section_themes.yaml data file to map section names to a specific theme. Then, I created a partial template called get_theme.html and used it to set theme class by section name.

Values on the right-hand side are corresponding CSS classes while the left side is section (folder) names.

default: paper-theme
hugo": paper-theme
statistics: almost-white-theme
operations-research: eflatun-theme

get_theme.html:

{{ $theme := index $.Site.Data.section_themes "default" }}

{{ if and (ne .Section "") (index $.Site.Data.section_themes .Section) }}
    {{ $theme = index $.Site.Data.section_themes .Section }}
{{ end }}

{{ if .Params.theme }}
    {{ $theme = .Params.theme }}
{{ end }}

{{ return $theme }}

Related html line:

<div class="container {{ partial "get_data/get_theme.html" . }}">

Example 3

Another good example is a Hugo Theme called Resume A4 I’ve created. The theme highly utilizes data files, in fact it’s nothing but yaml files and a little css.

Lastly, you should be aware of that front-matters in markdown files are metadata. Even though these are separate files, the logic is the same. Config file in your hugo project also has the same logic. You can define variables in the config file and re-use them in partial files. So that you can change the variable later. Hard-coded elements will be harder to maintain when you want to change something.

You are reading the 11st of 19 episodes in Hugo.
Published on 29.08.2020 by Mert Bakır. Last update on 17.01.2022 with commit 7dfab23.
hugo
#data.yml #hugo #static-site
Next episode:
How To Pass Arguments in Hugo Partials
published on 30.08.2020

The question is clear. We need to pass variables or arguments in Hugo’s partials. We usually use only the dot when calling partials. {{ partial "foo.html" . }}. The dot means the current page’s context. All it’s variables like .Title, .Permalink, .Content and all others …

published on 23.08.2020

In Hugo, to loop through list of items we use Range function which comes from go language. range, iterates over a map, slice or array. […] {{ range .Site.RegularPages }} {{ .Title }} {{ end }} Also, notice inside range the scope is different. .Title refers to the page in current iteration. If …

published on 30.08.2020
edited on 15.07.2022

Mainly there are two ways of syntax highlighting. One is server-side and the other is client-side. Names are already self-explanatory, client-side highlighting occurs on the user’s browser via javascript. Highlight.js is one of the popular libraries which covers crazy amount of languages. On …

published on 10.07.2022

Previously, I’ve published a blog post about deploying static content on heroku with basic authentication. You can find the link here. In that post, we hosted the source code on GitLab and configured a CI/CD pipeline to render the static content a.k.a html files and push these files to Heroku. …

published on 28.05.2022

Each git commit has a field called Author which consists ‘user.name’ and ‘user.email’. We usually set these variables once, after installing git, with git config --global so that each repo gets the variables from the global definition. We can also set them locally for a …

published on 25.05.2022

In this post, I’ll first walk through hosting static content with basic authentication. Then, we’ll look into deploying to Heroku using GitLab Pipelines, more specifically deploying a certain sub-directory within the project instead of pushing the whole project. Also, I’ll share …

published on 17.04.2022
edited on 15.07.2022

Önceki bölümde, markdown formatını LaTeX formatına dönüştürmek için kullanılan Pandoc yazılımından bahsetmiştik. Şimdi konuyu bir adım daha ileri taşıyıp ve bookdown’a geçiyoruz. Bookdown; Rmarkdown kullanarak teknik dökümanlar, kitaplar yazabilmemizi sağlayan, Yihui Xie tarafından yazılmış …

published on 10.04.2022

I’ve been using WSL-2 on Windows for over a year. It’s very useful because some Python packages are just a headache to install on Windows. Also, docker. It’s just better on Linux. Yet, WSL-2 can also be problematic. I remember trying a dual-boot setup when things just went way too …

published on 03.03.2022

In this post, I’ll share how to install geopandas and some other gis related packages on Windows. If you are on Mac or Linux you can probably just pip install those without any issue. I usually had to do a google search every time I wanted to install these packages on Windows environment. Of …