A few days ago, I decided to migrate my website from Jekyll to Hugo. Instead of using a theme from the Hugo community, I wanted to port my existing website. Converting, markdown content and SCSS wasn’t hard. I read a few articles, blogs, and the original documentation to learn about …
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" . }} …
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 …
“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 …
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 …
Search engine bots or crawlers, use two files to crawl a website more intelligently. These are robots.txt and sitemap.xml. A robots.txt file tells search engine crawlers which pages or files the crawler can or can’t request from the site. This is used mainly to avoid overloading your site with …
Math typesetting, or rendering LaTeX, in Hugo is not a hard task. We have two popular alternatives. First one is mathjax, I was using it before with jekyll. The other popular library for math typesetting is KaTeX. Since it’s faster, this time I’ll go with KaTeX. Implementing these …
Tags in Hugo is a default taxonomy and we don’t need any special configuration to use tags. We just enter the tags in the post’s front-matter. This can be YAML, TOML, or JSON. I’m using the YAML format, just a personal preference. […] tags: ["hugo", "tags"] …
I like to display “published date” and “last modified date” info for my posts. Date info comes from the date parameter and last modified info comes from the lastmod parameter, both defined in the front-matter. […] date: "2020-08-22" lastmod: …
We talked about rendering dates and the last modification date in the last post. Now, we’ll look into how can we convert month names into another language? I’ve had a similar experience last year with jekyll. The idea is the same, we need to map each month to their version of the …
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 …
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 …
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 …
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 …
My experience with Hugo has been pretty good so far. It’s fast and flexible. Ever since I started using Hugo, I’ve been improving my website with small tweaks. In this post, I am going to share some tricks and workarounds I’ve found online while working with Hugo. Besides that, …
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 …
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 …
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 …
Some time ago, I wanted to display images in a better way on my Hugo website. I searched for existing Hugo themes for photography and gallery tags. Can’t say I find much. Then, I met a javascript library called nanogallery2 which is using another javascript library as an image viewer …