styx — Hugo Blog Template

SHA-256: 0b530c7146e54b6778c2eb8551d535c447101c6083007ae2f826cfaf88a71453

2026-10-12T06:58:04.145Z

# Styx

Minimal Hugo blog theme with a sticky left rail, switchable ink palettes, and a reading column. Fonts and icons are self-hosted. No Google Fonts, no icon CDN.

Forked from [vividvilla/ezhil](https://github.com/vividvilla/ezhil).

## Demo

![Screenshot](images/screenshot-light.jpg "Styx light theme")
![Screenshot](images/screenshot-dark.jpg "Styx dark theme")

## Features

- Left rail: site title, menu, on-this-page TOC on posts, social, light/dark, palettes
- Palettes: Vermilion, Sepia, Shibui, Kabuki (independent of light/dark)
- iA Writer Quattro (regular body, bold titles) and IBM Plex Mono (code)
- [Giscus](https://giscus.app) comments (GitHub Discussions)
- Optional [PostHog](https://posthog.com) analytics
- Tags, RSS, Open Graph / Twitter cards
- Custom CSS / JS
- Wide layout opt-in per page (`wideContent: true`)

## Installation

```sh
cd themes
git clone https://github.com/vulkoingim/styx.git styx
```

Requires Hugo 0.111 or later. See the [Hugo install guide](https://gohugo.io/installation/).

## Configuration

```toml
baseURL = "https://example.com/"
languageCode = "en-us"
title = "My personal blog"
theme = "styx"

copyright = "© Copyright notice"

[markup.highlight]
    noClasses = false
    guessSyntax = true

[markup.tableOfContents]
    startLevel = 2
    endLevel = 3
    ordered = false

[params]
    # Subtitle under the site title. Supports markdown.
    subtitle = "stuff and things"

    mainSections = ["posts"]
    favicon = "icons/myicon.png"

    # "dark", "light", or "auto" (follow the OS).
    mode = "auto"

    # PostHog. Omit posthogKey to disable.
    # posthogKey = "phc_..."
    # posthogHost = "https://eu.i.posthog.com"   # default: https://us.i.posthog.com
    # posthogDefaults = "2026-05-30"

    # Giscus. Generate repo/category IDs at https://giscus.app
    # giscus = true
    # giscusRepo = "owner/repo"
    # giscusRepoId = "..."
    # giscusCategory = "Comments"
    # giscusCategoryId = "..."
    # Optional (defaults shown):
    # giscusMapping = "pathname"
    # giscusTheme = "preferred_color_scheme"
    # giscusLang = "en"
    disableGiscusTypes = ["page"]

    # customCSS = "css/custom.css"
    # customJS = ["js/extra.js"]

[[menu.main]]
name = "Home"
url = "/"
weight = 1

[[menu.main]]
name = "All posts"
url = "/posts"
weight = 2

[[menu.main]]
name = "About"
url = "/about/"
weight = 3

[[menu.main]]
name = "Tags"
url = "/tags"
weight = 4

# Supported icons: bluesky, mastodon, github, rss.
[[params.social]]
name = "BlueSky"
icon = "bluesky"
url = "https://bsky.app/profile/example"

[[params.social]]
name = "Mastodon"
icon = "mastodon"
url = "https://mastodon.social/@example"

[[params.social]]
name = "Github"
icon = "github"
url = "https://github.com/example"

[taxonomies]
    tag = "tags"
```

## Palettes

Readers can switch palettes in the rail. Choice is stored in `localStorage` and is independent of Auto / Light / Dark.

| Palette   | `data-palette` | Light paper     |
| --------- | -------------- | --------------- |
| Vermilion | _(default)_    | near-white, red |
| Sepia     | `sepia`        | parchment       |
| Shibui    | `shibui`       | dusty blue      |
| Kabuki    | `kabuki`       | green wash      |

## Giscus

Comments use [Giscus](https://giscus.app): GitHub Discussions, loaded only when `giscus = true` and the repo IDs are set.

Disable on one page:

```md
---
title: "No comments"
giscus: false
---
```

Disable for a content type with `disableGiscusTypes` (see config above).

## PostHog

Set `posthogKey` to enable. Use `posthogHost = "https://eu.i.posthog.com"` for EU cloud. `posthogDefaults` follows the [current snippet](https://posthog.com/docs/libraries/js/config) (`2026-05-30`). Omit the key to ship no tracker.

## Content types

Set `type` in front matter. `page` is a typical static page (about). Control home-page posts with `mainSections`.

```md
---
title: "About"
type: "page"
---
```

For a full-width tool (for example a calculator), set `wideContent: true`.

## Credits

- Original [ezhil](https://github.com/vividvilla/ezhil) by [Vivek R](https://vivekr.net)
- [iA Writer Quattro](https://github.com/iaolo/iA-Fonts) (SIL OFL 1.1)
- [IBM Plex Mono](https://github.com/IBM/plex) (SIL OFL 1.1)