Site Configuration

This theme supports the standard Hugo site configuration as well as additional configuration options.

Markdown Styling

In order to have hugo use CSS styling for code blocks, you must configure the highlighting engine to generate CSS classes. You can inherit the theme properties by adding the following to your config.toml:

[markup]
  _merge = 'shallow'

Note that _merge = 'deep' would also work or you can include the configuration directly which is:

[markup]
  [markup.highlight]
    noClasses = false

Theme Colors

You may want to change the default theme colors. The easiest way to do this is by changing parameters in your config.toml file. Below you can see the default values:

[params.colors]
  text            = "#111"      # text color
  background      = "#fffff8"   # contains main
  main-background = "#fffff8"   # main content area
  link            = "#406782"   # hyperlink
  link-highlight  = "#1a374d"   # hovering over a link
  draft           = "#dfa194"   # draft designation

[params.dark-colors]
  text            = "#ddd"                 # text color
  background      = "#151515"              # contains main
  main-background = "#151515"              # main content area
  link            = "hsl(200, 50%, 77%)"   # hyperlink
  link-highlight  = "hsl(200, 50%, 60%)"   # hovering over a link
  draft           = "#dfa194"              # draft designation

If you would like you can read more details on the CSS realization of the colors.

Favicon

Favicon treatment is a complex topic, and changes over time¹. Today (2022) most browsers support PNG favicons while SVG favicons are sadly not supported by Safari.

The theme expects favicons to live in the static/ folder and will take advantage of any favicons available. In an ideal world you would simply supply a SVG favicon and have the theme derive all other formats, but that is currently not possible with Hugo.

To cover all of your bases you will want to have:

favicon.svg

SVG favicon, this format will likely have the best display characteristics when not viewed on Safari.

favicon.ico

Traditional favicon, this is the format with the most widespread support.

apple-touch-icon.png

This file is poorly documented (somewhat by Apple) and sets the icon used when saving the webpage on iOS and iPadOS devices.

favicon-16x16.png

A small PNG favicon.

favicon-32x32.png

A slightly larger PNG favicon.

android-chrome-192x192.png

A moderately sized PNG favicon used on Android devices, served through the web manifest.

android-chrome-512x512.png

A large PNG favicon used on Android devices, served through the web manifest.

robots.txt

We recommend you generate a robots.txt file for your site by adding the following line in your config.toml:

enableRobotsTXT = true

The theme’s robots.txt file will disable all robots when the blog is not being built for production to reduce the chance of any unwanted crawling. You can read more about how to customize the contents of a robots.txt file here.

Social Images and Social Sharing

Web sites today can be shared on many platforms. The metadata at the start of a web page can set the image used for sharing and an RSS feed can have an image. This theme allows you to set the social image used in a number of ways.

Across the entire site you can set the default social image by configuring the socialImage site parameter. You can also override this parameter on a per page basis by setting the socialImage parameter in the page’s front matter.

As a convenience, placing an image which matches the glob social.{gif,jpg,jpeg,png,svg,webp} in a place accessable to the page will override any set socialImage parameter. You can change the glob pattern by setting the socialGlob site paramter.

If the rssImageTitle parameter is configured it will set the title of the social image in the RSS feed. This parameter has no effect if there is no social image.

Social Links

The social links at the bottom of every page can be configured by supplying your connection parameters for each service. Only configured services are displayed. To minimize page load times only configured services have CSS generated.

The supported social services with icons are:

discord

The Discord channel.

dribbble

Your Dribbble user name.

email

Your email address like person@example.com.

facebook

Facebook person or page name.

github

Your Github user name.

gitlab

Your GitLab user name.

instagram

Your Instagram account name.

linkedin

Your LinkedIn account name.

pinterest

Your Pinterest account name.

reddit

Your Reddit user name.

rss

Set this to true to enable RSS feeds for the blog.

snapchat

Your Snapchat user name.

soundcloud

Your SoundCloud user name.

tiktok

Your TikTok user name.

twitch

Your Twitch user name.

twitter

Your Twitter user name.

vimeo

Your Vimeo account name.

youtube

Your YouTube channel.