published on 02.08.2020

Introduction

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 Hugo’s directory structure. Then simply copy-pasted files. The hardest part was the templates.

If you don’t have anything custom, and displaying blog posts is enough for you, migrating from Jekyll should take nothing but a few minutes. Yet, if you are going to make something custom, you have to learn about the Hugo templates. By custom, I mean listing the posts the way you wanted to list them, loop through them, group them by some property, and so on. The object here doesn’t have to be blog posts, it can be movies, actors, games, players, authors, books, genres, musicians; depending on the context of your site. You probably won’t need to play with Hugo templates if you are going to create a simple portfolio, project showcase, or blog site. Yet, I usually waste my time figuring out how things work. If you can call it a waste.

Why ?

Why I migrated from Jekyll? Jekyll probably is the most popular static site generator. In 2018, when I first decided to create a blog, I met Jekyll. Popularity is important here, it means a strong community. In consequence, popularity helps you find solutions to your problems quickly. Because someone else already faced the same problem and asked about it in the community. To be honest, I didn’t make good research about static site generators. I read that Jekyll is the most popular and well-documented one. Also that it’s fairly easy.

Before starting with Jekyll, I had considered to learn Django. I knew some Python already then I figured, it would be an overkill for a static site. Anyway, I chose Jekyll and went down the rabbit hole. Learned the templating language Jekyll using called Liquid and learned a bit of CSS.

  1. With my weird and unnecessary templating fantasy Jekyll started to being slow. I made a quick search about other static site generators and found Hugo is faster and very popular like Jekyll. Yet, I wasn’t ready to learn another templating language. Note that, Hugo is a little bit more complex than Jekyll.

  2. Someday, I wanted to develop my blog on a different computer and I realized how cumbersome is to install the ruby environment and all that dependency hell Jekyll required, especially on windows. Hugo works with a single binary. Still, I can not re-build all that to just get rid of dependencies.

  3. Recently, I took a machine learning class. We were using the R language in class. I chose to play cool with Rmarkdown files then I thought “what if I can host Rmarkdown files using Jekyll”. Turns out Blogdown does it and it supports Hugo mainly.

Besides all that, in times of covid-19 quarantine, I had enough time to learn Hugo. So, I migrated to Hugo.

You are reading the 1st of 19 episodes in Hugo.
Published on 02.08.2020 by Mert Bakır with commit 017b782.
hugo
#hugo #web-dev
Next episode:
Understanding Hugo
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" . }} …

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 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 …