Setting up the Ananke hugo theme

I updated my content and had to re-install the latest version of the Ananke hugo theme.

Instructions

In my web-dev area, using a terminal command line program:

  • cd /path/to/folder/web-dev

Double check folder names: * ls -la

  • hugo new site ananke

In a web browser, go to ananke’s github site:

  • github.com/theNewDynamic/gohugo-theme-ananke

  • clicking on the green Code dropdown

  • select 'Download zip' file

  • copy the zip file from your download folder to the theme folder of the new site that you just created

    • /path/to/folder/ananke/themes/

  • double click on the zip file to extract it

  • rename the zip file folder to ananke

Test compile the new theme:

  • return to the sites route, i.e. web-dev/ananke:

    • cd ../..

  • type 'hugo server'

  • after hugo compiles the site, use the url to see the results

Modify the config file using the https://brobbio.github.io/ instructions to finish the theme install:

  • rename the original hugo.toml:

    • mv hugo.toml hugo-bk.toml

  • copy the ananke config.toml to modify:

    • cp themes/ananke/exampleSite/config.toml hugo.toml

Modify the ananke theme’s hugo.toml to your site’s requirements. This may take trial and error. Here is my final result adding the asciidoc compiler directives, etc.:

hugo.toml
title = "Marlon's Support Blog"
# the baseURL prevents the theme from rendering but then the next day it worked!
#baseURL = "http://localhost"
baseURL = "https://www.eng.uwaterloo.ca/~m3griffi"
theme = ["ananke"]
resourceDir = "../resources"

defaultContentLanguage = "en"
sectionPagesMenu = "main"
enableRobotsTXT = true

[sitemap]
changefreq = "monthly"
priority = 0.5
filename = "sitemap.xml"

[params]
text_color = ""
author = ""
favicon = ""
site_logo = ""
description = "Various computer support tips and discoveries."
# choose a background color from any on this page: https://tachyons.io/docs/themes/skins/ and preface it with "bg-"
background_color_class = "bg-black"
# choose fitting and alignment styles for the featured image using Tachyons classes such as "cover|contain" for fitting and "bg-top|bg-center|bg-bottom" for alignment, or add any other class space-separated to customize further
featured_image_class = "cover bg-top"
# choose a color dimming class for the page or site header from any on this page: https://tachyons.io/docs/themes/skins/, preface it with "bg-" and add the value such as "-X0" where X is in [1,9]
cover_dimming_class = "bg-black-60"
recent_posts_number = 3

# Added asciidoctor compilation reference in this section.
[security]
enableInlineShortcodes = false

[security.exec]
allow = ["^dart-sass-embedded$", "^go$", "^npx$", "^postcss$", "^asciidoctor$"]
osEnv = ["(?i)^(PATH|PATHEXT|APPDATA|TMP|TEMP|TERM|RUBYLIB)$"]

[security.funcs]
getenv = ["^HUGO_"]

[security.http]
methods = ["(?i)GET|POST"]
urls = [".*"]

  • hugo server

To compile permanently:

  • hugo

Caveat

  1. The section landing pages sometimes display summaries greater than 2 as a very narrow column. Why?!