Hugo dead simple theme | Hugo dead simple example

Simple hugo theme to be dead easy on the reader.

Installation

Initialize go module
```
hugo mod init <module_path>
```

Add theme to your config.yml

module:
  imports:
    - path: github.com/barklan/hugo-dead-simple

Fetch theme
```
hugo mod get -u
```

Configuration

Site parameters

This site’s config can be found here .

Section parameters

1---
2title: "Section title"
3weight: 1
4nodate: false # display date next to post title
5---

Page parameters

 1---
 2title: "Post/Page title"
 3subtitle: "...example subtitle"
 4date: "2023-08-11"
 5toc: true # table of contents (only h2 and h3 added to toc)
 6bold: true # display post title in bold in posts list
 7math: true # load katex
 8categories:
 9  - ...
10tags:
11  - ...
12next: true # show link to next post in footer
13nomenu: true # hide site menu
14notitle: true # hide title
15---

Deployment

Generate and add favicons to /static

Deploy your site to Netlify with this netlify.toml

1[build]
2publish = "public"
3command = "hugo --gc --minify"
4
5[context.production]
6environment = { HUGO_VERSION = "0.114.1" }

Post features

Hugo shortcodes

In all examples you’ll need to adjust code so the % or < are touching the { like this: {%.

Footnotes

Here's a sentence with a footnote.[^1]

[^1]: This is unnamed footnote.

Here’s a sentence with a footnote.¹

Mark

<mark>Marked text</mark>

Marked text

Boxes

{{ < box info >}}
**This is a bold line**

Hello there, and have a nice day
{{ < /box >}}

info, tip, warning, important

This is a bold line

Hello there, and have a nice day

Collapsible

<details>
  <summary>Collapsible</summary>

  ![rose](./pinkrose.avif)
</details>

Collapsible

rose

some code

Tables

Use table generator .

Code

Code blocks support usual Hugo highlighting features. Additionally “copy” button is added to each code block automatically.

```go {linenos=inline,hl_lines=[2, "6-9"],linenostart=19}
// ... code
```

Produces:

19func randPass(n uint8, extraChars string) (string, error) {
20	const base = "0123456789abcdefghijklmnopqrstuvwxyz-"
21	letters := base + extraChars
22	ret := make([]byte, n)
23	var i uint8
24	for i = 0; i < n; i++ {
25		num, err := rand.Int(rand.Reader, big.NewInt(int64(len(letters))))
26		if err != nil {
27			return "", err
28		}
29		ret[i] = letters[num.Int64()]
30	}
31
32	return string(ret), nil
33}

Smaller code

```go {.fs90}
num, err := rand.Int(rand.Reader, big.NewInt(int64(len(letters))))
```

Produces:

num, err := rand.Int(rand.Reader, big.NewInt(int64(len(letters))))

Available classes: fs95, fs90, fs85, fs80, fs75, fs70 and fs50.

Katex

Inline

\\(\pi = 3.14\\)

$\pi = 3.14$

Block

$$
\begin{align}
\sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}} \\\
 & = \sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \\\
 & = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \\\
 & \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right)
\end{align}
$$

$$ \begin{align} \sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}} \\ & = \sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \\ & = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \\ & \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right) \end{align} $$

Note that using Hugo you need \\\ to break the line instead of usual \\. If you don’t want automatic numbering you can use \begin{align*}.

Use supported functions and support table for reference.

File trees

Use tree.nathanfriend.io to make beautiful file tree structures like this one:

.
├── tmp/
│   ├── __init__.py
│   └── temp.py
├── src/
│   ├── __init__.py
│   └── main.py
└── Dockerfile

Images

General

All images are lazy-loaded. You can use the usual ![image](./image.png) to insert images.

pinkrose

Internally it uses imgp class. You can customize images like this:

<p class="imgp">
  <img
    style="max-height: 50vh; border: 6px solid var(--complimentary);"
    src="./pinkrose.avif"
  />
</p>

Figure element

{{ < figure src="./pinkrose.avif" title=">An elephant at sunset" >}}

As with images, you can customize figure:

<figure>
  <img loading="lazy" style="max-height: 50vh;" src="./pinkrose.avif" />
  <figcaption>Pink rose</figcaption>
</figure>

Plots

To make the charts look good use this context manager:

import matplotlib.pyplot as plt
import matplotlib as mpl
import numpy as np
import seaborn as sns


class Blog:

    def __init__(self, filename, figsize=(6, 6), axis=True):
        self.filename = filename
        self.figsize = figsize
        self.axis = axis

    def set_plot(self, figsize=(6, 6)):
        sns.set()
        sns.set_theme(style="white", palette="bright")
        COLOR = "grey"
        mpl.rcParams["text.color"] = COLOR
        mpl.rcParams["axes.labelcolor"] = COLOR
        mpl.rcParams["xtick.color"] = COLOR
        mpl.rcParams["ytick.color"] = COLOR
        plt.figure(figsize=self.figsize)
        sns.set_context("paper")

    def save_plot(self):
        if self.axis:
            plt.axis("on")
        else:
            plt.axis("off")
        plt.savefig(self.filename, format="svg",
                    bbox_inches="tight", pad_inches=0.3,
                    transparent=True)

    def __enter__(self):
        self.set_plot()
        return self

    def __exit__(self, exc_type, exc_value, exc_traceback):
        self.save_plot()

Then you can use it like this

x = np.arange(0, 10, 0.00001)
y = x * np.sin(2 * np.pi * x)
fmri = sns.load_dataset("fmri")

with Blog("fmri.svg", figsize=(7, 7), axis=True):
    sns.lineplot(x="timepoint", y="signal",
                 hue="region", style="event",
                 data=fmri)

fmri

Looks good in light and dark mode!

subplots

Image galleries

You can create image galleries with this:

<ul class="image-gallery">
    <li><figure>
          <img loading="lazy" src="./pinkrose.avif" />
          <figcaption>Pink rose</figcaption>
    </figure></li>
    <li><figure>
          <img loading="lazy" src="./flower.avif" />
          <figcaption>Pink rose</figcaption>
    </figure></li>
</ul>

Pink rose
Not a rose

If you want three images in a row additionally add three-image-gallery class to ul.

Two images

{{ < twoimg "./pinkrose.avif" "./flower.avif" >}}

Three images

{{ < threeimg "./pinkrose.avif" "./flower.avif" "./pinkrose.avif" >}}

YouTube

{{ < youtube w7Ft2ymGmfc >}}

Attachments

{{ < attachments folder="temp" title="Boom" caption="example" >}}

title and caption can be omitted.

Boom (example)

temp.py 🔗
(783b)

Columns

{{ % columns %}}

#### Title 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

<--->

#### Title 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

{{ % /columns %}}

Title 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.

Title 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s

Tabs

{{ < tabs >}}
{{ < tab "MacOS" >}}

This is tab **MacOS** content.

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter!
{{ < /tab >}}

{{ < tab "Linux" >}}

This is tab **Linux** content.

{{ < /tab >}}

{{ < tab "Windows" >}}

This is tab **Windows** content.

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter!
{{ < /tab >}}
{{ < /tabs >}}

MacOS

This is tab MacOS content.

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!

Linux

This is tab Linux content.

Windows

This is tab Windows content.

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!

Dev update notes

Update Iosevka font
Update Inter font
Update jquery in footer
Update Katex

This is unnamed footnote. ↩︎