Blog on Hugo

Introduction

As I told before, in my CV, since 2017 I delved into BackEnd development and didn’t work with FrontEnd technologies for a while. I was always afraid that I would never have time to catch up with the knowledge that I had ignored for so long. Hugo gave me the opportunity to not worry about such things when I wanted to start blogging. Thanks to Aditya Telange it looks beautiful with PaperMod. It fast and easy to understand

I told already that I wanted to study Go language, but due to work I had no time for it. Now, with this blog I’m investigating how Go and Hugo works. I don’t know if shortcodes and templating are belong to Go development, but it’s supper intuitive and easy to understand. I’m already modified a lot in PaperMod for this blog, and it’s fantastic how easy it is

Four years ago I gained the belief that in the world of Electron and other huge technologies that doesn’t care about end user resources, there should be lightweight static HTML web-sites that not overloaded with tons of useless JS and animations. Simple and clear old-school pages still works great. For me, as BackEnd developer they are more preferred than mind-blown huge few MiB web pages, that loads several minutes and full of various animations. It’s great that their developers practice their programming skills so well and have achieved such amazing results, but personally it turns me off

Inspired on nikic’s blog, Robert Martin’s one and few more (eklitzke, simplifier, stitcher) I desired to write a blog too, but all my attempts in Twitter or Blogger have failed before so this was supposed to be my little hobby where I’m telling about my thoughts and another hobbies. Yes, currently I don’t have many things to write about, but I look ahead to travel, capture photos and writing about it. I thought to make something simple like simplifier’s blog and have style as IETF RFC (because I very like their plain design), but I also wanted to write it in Markdown only

Sphinx

Firstly, I found Sphinx, used MyST-Parser for Markdown and sphinx-material. In one evening I wrote few pages of Markdown, added simple Gitlab CI config and voilà, I have a blog:

image: sphinxdoc/sphinx:latest

pages:
    stage: deploy
    script:
        - apt-get -qq update && apt-get -qqy install git make
        # Markdown parser
        - pip3 install myst-parser
        # Material design theme
        - pip3 install git+https://github.com/bashtage/sphinx-material.git
        - make compile
    artifacts:
        paths:
            - public
    only:
        - master

Hugo

The initial idea was good, but now I can say that it looks ugly. The PaperMod provides the beautiful and simple style while Material design is a bunch of motley elements somehow put together without solid idea. Also, I used wrong tool – Sphinx doesn’t provide tags, categories and other tools out of the box. Of course, I may write it by myself, but I don’t like Python language, so I didn’t want to do it

Then I found Hugo, and it corresponded to all my needs and even more. Now I can easily extend my blog with custom shortcodes, layouts and styles, without creating a fork of original theme. Now I can do in my blog whatever I want and it’s awesome! For example, I added a completely new layout for photos, added few shortcodes to add a little meta in a nice view for photos, modified blog posts list, and it’s still approximately the 4-5% of possibilities that Hugo provides! This is how a shortcode looks as code:

<div class="image-container">
    <div class="image-meta">
        <p>{{ (i18n "image_title" | default "Title") }}&colon;&nbsp;&laquo;{{ .Inner }}&raquo;</p>

        {{ if or .Params.camera .Params.date }}
            {{ $photoMeta := (i18n "image_captured" | default "Captured on") }}
            {{ if .Params.camera }}
                {{ $photoMeta = printf "%s on %s" $photoMeta .Params.camera }}
            {{ end }}
            {{ if .Params.date }}
                {{ $photoMeta = printf "%s on %s" $photoMeta (time.Format ":date_long" .Params.date) }}
            {{ end }}
        <p>{{ $photoMeta }}</p>
        {{ end }}

        {{ if .Params.originalPath }}
            {{ $originalText := (i18n "download") }}
            {{ if .Params.originalType }}
                {{ $originalText = .Params.originalType }}
                {{ if .Params.originalSize }}
                    {{ $originalText = printf "%s (%s)" .Params.originalType .Params.originalSize }}
                {{ end }}
            {{ end }}
        <p>{{ i18n "image_original" | default "Original file" }}&colon;&nbsp;{{ partial "link" (dict
            "url" .Params.originalPath
            "text" $originalText
        ) }}</p>
        {{ end }}

        {{ $license := .Params.license }}
        {{ if $license }}
            {{ $licenseAnchor := partial "link" (dict
                "url" "https://creativecommons.org/licenses/by-sa/4.0/"
                "text" "CC BY-SA v4.0"
            ) }}
            {{- /* TODO: Add more licences in future if needed */ -}}
        <p>{{ i18n "image_license" | default "License" }}&colon;&nbsp;{{ $licenseAnchor | safeHTML }}</p>
        {{ end }}

        {{ $instagram := .Params.instagram }}
        {{ if $instagram }}
        <p>Instagram:&nbsp;{{ partial "link" (dict "url" $instagram "text" $instagram) }}</p>
        {{ end }}
    </div>
</div>

{{ < imagemeta
    camera="Samsung Galaxy A54"
    date="2024-01-06"
    license="cc-by-sa-4.0"
    instagram="https://www.instagram.com/p/C1wqalHIhdi/"
> }}Small river in the winter forest{{ < /imagemeta > }}

…and this is how it renders:

Wonderful! I like that it works like familiar to me Twig. It looks as if backend developer tries to make some frontend :D

P.S.

In my research I found blog of Jesse Wei I would like to recommend it for everybody interested in Hugo and PaperMod website customisation