Installing, configuring, and customizing the Hugo Zzo theme

calendar August 10, 2021 nav_categories Tech nav_tags Hugo nav_tags Zzo

My start-to-finish customization of the Zzo Hugo theme.

Reference for myself, in case I need to reinvent the wheel.

This is still a work in progress...

Install Hugo

I'm using the 0.88.1 extended version, which at this time, is also the latest version.

wget https://github.com/gohugoio/hugo/releases/download/v0.88.1/hugo_extended_0.88.1_Linux-64bit.deb

sudo dpkg -i hugo_extended_0.88.1_Linux-64bit.deb
Selecting previously unselected package hugo.
(Reading database ... 235513 files and directories currently installed.)
Preparing to unpack hugo_extended_0.88.1_Linux-64bit.deb ...
Unpacking hugo (0.88.1) ...
Setting up hugo (0.88.1) ...

If you want a different version of Hugo, find it by browsing: https://github.com/gohugoio/hugo/releases/

Install git:

sudo apt-get install git -y

Create site and download theme

hugo new site myblog

cd myblog

git init
Initialized empty Git repository in /home/tom/myblog/.git/

git clone https://github.com/zzossig/hugo-theme-zzo.git themes/zzo
Cloning into 'themes/zzo'...
remote: Enumerating objects: 8620, done.
remote: Counting objects: 100% (75/75), done.
remote: Compressing objects: 100% (59/59), done.
remote: Total 8620 (delta 31), reused 37 (delta 10), pack-reused 8545
Receiving objects: 100% (8620/8620), 10.18 MiB | 15.26 MiB/s, done.
Resolving deltas: 100% (5168/5168), done.

Change the config files to use the Zzo theme's config files

  • Delete the Hugo auto-created config.toml file

    rm config.toml

  • Copy the configuration files from the theme's example:

    cp -r themes/zzo/exampleSite/config .

  • In the config/_default/config.toml file, change the defaultContentLanguageInSubdir and hasCJKLanguage to false

  • In the config/_default/languages.toml file, remove the section for the Korean language support, and change the contendir to equal "content"

  • Delete the config/_default/menus.ko.toml file.

  • In the config/_default/menu.en.toml file, delete everything except about, archive, and posts.

Use the Hack font

  • Create, and add to layouts/partials/head/custom-head.html

    <link rel='stylesheet' href='//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'>

  • Create, and add to data/font.toml

    title_font = "\"Hack\", Monospace"
content_font = "\"Hack\", Monospace"

Edit the theme to remove reading time

  • Create a custom summary file

    cp themes/zzo/layouts/partials/summary/card.html layouts/partials/summary/

  • Edit the file in layouts/partials/summary/card.html, and remove line 9, which references the reading time:

    <span title="{{ i18n "tooltip-reading-time" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}"> &middot; {{ ($.Site.Para    ms.readingTimeIcon | safeHTML) | default "☕" }} {{ .ReadingTime }} {{ i18n "reading-time" }}</span>

  • Create a custom single post file:

    cp themes/zzo/layouts/partials/body/infos.html layouts/partials/body/

  • Edit layouts/partials/body/infos.html, and remove line 7, which references the reading time:

    &nbsp;&middot;&nbsp; <span class="single__info" title="{{ i18n "single-writtenBy" }}">{{if $params.AuthorEmoji }}{{ $params.AuthorEmoji }}{{ else }}{{ ($.Site.Params.authorIcon | safeHTML) | default "✍️" }}{{ end }}&nbsp;{{ . }}</span>

Change the summary size/format

I didn't want the summary of each post to basically concatenate the entire post, stripping out all of the HTML.

By default, Hugo automatically creates a content .Summary, strips out all of the HTML, and concatenates the summary together.

I wanted to display X number of characters, but have it formatted the way the actual post would read.

By replacing the .Summary, which would already have stripped out the HTML, and replacing it with a limited .Content, I was able to accomplish this task.

Edit the file layouts/partials/summary/card.html and replace (currently line 20)

{{ .Summary }}

with

{{ .Content | safeHTML | truncate 500 }}

Add a 'Read more' indicator

As I'm using a custom 'summary', I wanted an indicator that there was more to read beyond the snippet in the main page.

Hugo, as far as I'm aware, doesn't have a character count, only a word count. Due to the technical nature of this site, technical notes might not exceed a specified word count, but the character count might.

To get around this, I added a conditional statement if the .Plain Hugo variable exceeded a set number, which I set to same as the custom-summary (500).

Using the {{ .Content | safeHTML | truncate 500 }} for a guideline as to where to place this code in the layouts/partials/summary/card.html file:

{{ .Content | safeHTML | truncate 500 }}
{{ end }}
{{ if gt (len .Plain) 500 }}
<p style="text-align: center"><a href="{{ .Permalink }}" class="single__tag">Read more . . .</a></p>
{{ end }}

Change colors of the theme, using custom CSS

  • Edit the config/_default/params.toml file, and add the custom CSS file

    custom_css = ["css/custom.css"]

  • Create the nessessary directories/file(s)

    mkdir -p assets/css

    touch assets/css/custom.css

  • Add to the assets/css/custom.css file:

    a {
        color: #3399cc !important;
        text-decoration: none !important;
}
.theme__dark a:hover {
        color: #4ccc32 !important;
        text-decoration: none !important;
}
.theme__dark a:active {
        color: #4ccc32 !important;
}
.theme__light a:hover {
        color: #267299 !important;
        text-decoration: none !important
}
.theme__light a:active {
        color: #267299 !important;
        text-decoration: none !important
}
.theme__dark .navbar__menu-item.active {
        color: #4ccc32 !important;
}
.single__contents img {
        margin: 0px;
}
.list__main.mr {
        width: 100% !important;
}
.theme__light .highlight > .chroma {
        border-left: 5px solid #99cc32 !important;
}
.theme__dark .highlight > .chroma {
        border-left: 5px solid #cc6532 !important;
}

References

Zzo Hugo theme https://github.com/zzossig/hugo-theme-zzo

Hack | A typeface designed for sourcecode https://sourcefoundry.org/hack/

Hugo - Page Variables https://gohugo.io/variables/page/

Hugo - Content Summaries https://gohugo.io/content-management/summaries/