This post exercises the full range of text and code rendering. Everything here is drawn from the actual configuration files used to build and style this blog — no contrived examples.

Typography

Regular paragraph text at 1.05rem / Inter. The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo, urna vel gravida scelerisque, neque velit aliquam nunc, nec sodales risus libero at dolor.

Bold text for emphasis. Italic for terminology. inline code for commands, flags, and identifiers. bold inline code when both apply.

“Simple systems fail less and recover faster than complex ones — complexity must be justified.” — Platform engineering principle

Ordered list:

  1. Write the post in Markdown
  2. Preview locally with hugo server -D
  3. Set draft: false when ready
  4. Push to main — GitHub Actions builds and deploys
  5. Verify at https://teerakarna.github.io/

Unordered list:

  • Hugo (static site generator)
  • PaperMod (theme via Hugo modules)
  • GitHub Actions (CI/CD)
  • teerakarna.github.io (published output repo)

Headings scale

H4 — section detail

H5 — fine-grained annotation

Code: CSS

The custom palette override — Molokai colours applied to PaperMod’s CSS variables:

/* ─── Molokai-inspired terminal palette ─────────────────────── */
[data-theme="dark"] {
    --theme:          #1b1d1e;   /* molokai background         */
    --entry:          #272822;   /* molokai current-line       */
    --primary:        #f8f8f2;   /* molokai foreground         */
    --secondary:      #75715e;   /* molokai comments           */
    --tertiary:       #3e3d32;   /* slightly elevated bg       */
    --border:         #465457;   /* molokai line-number column */
}

/* Accent: tmuxline colour190 — active pane border in tmux */
.post-content a,
.post-tags a,
.logo a:hover {
    color: #d7ff00;
}

/* H2 — left accent marker */
.post-content h2 {
    border-left: 3px solid #d7ff00;
    padding-left: 0.6rem;
}

Code: TOML

Hugo config.toml — the full site configuration:

baseURL = "https://teerakarna.github.io/"
languageCode = "en-gb"
title = "Bertie's Blog"

enableGitInfo     = true
enableRobotsTXT   = true

[minify]
  disableXML    = true
  minifyOutput  = true

[params]
  author          = "Albert Asawaroengchai"
  defaultTheme    = "auto"
  ShowReadingTime = true
  ShowCodeCopyButtons = true

[params.homeInfoParams]
  Title   = "Bertie's [Experimental] Blog"
  Content = "DevOps / Kubernetes / AIOps - technical ramblings & more"

[markup]
  [markup.highlight]
    style     = "monokai"
    codeFences = true
    lineNos   = false

[module]
  [[module.imports]]
    path = "github.com/adityatelange/hugo-PaperMod"

Code: Shell

GitHub Actions deploy workflow — build Hugo, push output to teerakarna.github.io:

# Build step (runs on ubuntu-latest)
hugo mod tidy
hugo --minify

# peaceiris/actions-gh-pages then force-pushes public/ to:
#   external_repository: teerakarna/teerakarna.github.io
#   publish_branch: main

# Verify the deployed commit
gh api repos/teerakarna/teerakarna.github.io/contents/index.html \
  --jq '.content' | base64 -d | grep -i canonical

Code: YAML

The GitHub Actions deploy workflow — builds Hugo and pushes the output to the published repo:

name: deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - uses: actions/setup-go@v5
        with:
          go-version: ">=1.21"

      - uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: latest
          extended: true

      - run: hugo --minify

      - uses: peaceiris/actions-gh-pages@v4
        with:
          personal_token: ${{ secrets.GH_PAGES_TOKEN }}
          external_repository: teerakarna/teerakarna.github.io
          publish_branch: main
          publish_dir: ./public

Code: HTML

The layouts/partials/extend_head.html partial — PaperMod loads this automatically, injecting the Google Fonts for JetBrains Mono and Inter into every page’s <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;1,14..32,400&display=swap" rel="stylesheet">

Table

ElementFontAccent applied
Body textInter 1.05rem—
HeadingsJetBrains MonoH2 left border
Nav / logoJetBrains MonoHover
Post tagsPaperMod defaultBorder + text
Content linksInterAlways #d7ff00
BlockquoteInter italicLeft border
Back-to-top—Fill #d7ff00
Code blocksMonospaceMonokai theme

Published output: teerakarna/teerakarna.github.io

PaperMod theme: adityatelange/hugo-PaperMod