Hugo Test

With ToC

Mon, 01 Jan 0001 00:00:00 +0000

Caput vino delphine in tamen vias#

Cognita laeva illo fracta#

Lorem markdownum pavent auras, surgit nunc cingentibus libet Laomedonque que est. Pastor An arbor filia foedat, ne fugit aliter, per. Helicona illas et callida neptem est Oresitrophos caput, dentibus est venit. Tenet reddite famuli praesentem fortibus, quaeque vis foret si frondes gelidos gravidae circumtulit inpulit armenta nativum.

Te at cruciabere vides rubentis manebo
Maturuit in praetemptat ruborem ignara postquam habitasse
Subitarum supplevit quoque fontesque venabula spretis modo
Montis tot est mali quasque gravis
Quinquennem domus arsit ipse
Pellem turis pugnabant locavit

Natus quaerere#

Pectora et sine mulcere, coniuge dum tincta incurvae. Quis iam; est dextra Peneosque, metuis a verba, primo. Illa sed colloque suis: magno: gramen, aera excutiunt concipit.

Without ToC

Mon, 01 Jan 0001 00:00:00 +0000

At me ipso nepotibus nunc celebratior genus#

Tanto oblite#

Lorem markdownum pectora novis patenti igne sua opus aurae feras materiaque illic demersit imago et aristas questaque posset. Vomit quoque suo inhaesuro clara. Esse cumque, per referri triste. Ut exponit solisque communis in tendens vincetis agisque iamque huic bene ante vetat omina Thebae rates. Aeacus servat admonitu concidit, ad resimas vultus et rugas vultu dignamque Siphnon.

Quam iugulum regia simulacra, plus meruit humo pecorumque haesit, ab discedunt dixit: ritu pharetramque. Exul Laurenti orantem modo, per densum missisque labor manibus non colla unum, obiectat. Tu pervia collo, fessus quae Cretenque Myconon crate! Tegumenque quae invisi sudore per vocari quaque plus ventis fluidos. Nodo perque, fugisse pectora sorores.

Creating a New Theme

Sun, 28 Sep 2014 00:00:00 +0000

Introduction#

This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I’ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won’t cover using CSS to style your theme.

We’ll start with creating a new site with a very basic template. Then we’ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.

Migrate to Hugo from Jekyll

Mon, 10 Mar 2014 00:00:00 +0000

Move static content to `static`#

Jekyll has a rule that any directory not starting with _ will be copied as-is to the _site output. Hugo keeps all static content under static. You should therefore move it all there. With Jekyll, something that looked like

▾ <root>/
    ▾ images/
        logo.png

should become

▾ <root>/
    ▾ static/
        ▾ images/
            logo.png

Additionally, you’ll want any files that should reside at the root (such as CNAME) to be moved to static.

(Hu)go Template Primer

Wed, 02 Apr 2014 00:00:00 +0000

Hugo uses the excellent Go html/template library for its template engine. It is an extremely lightweight engine that provides a very small amount of logic. In our experience that it is just the right amount of logic to be able to create a good static website. If you have used other template systems from different languages or frameworks you will find a lot of similarities in Go templates.

This document is a brief primer on using Go templates. The Go docs provide more details.

Getting Started with Hugo

Wed, 02 Apr 2014 00:00:00 +0000

Step 1. Install Hugo#

Go to Hugo releases and download the appropriate version for your OS and architecture.

Save it somewhere specific as we will be using it in the next step.

More complete instructions are available at Install Hugo

Step 2. Build the Docs#

Hugo has its own example site which happens to also be the documentation site you are reading right now.

Follow the following steps:

Clone the Hugo repository
Go into the repo
Run hugo in server mode and build the docs
Open your browser to http://localhost:1313

Corresponding pseudo commands:

Mon, 01 Jan 0001 00:00:00 +0000

Caesorum illa tu sentit micat vestes papyriferi#

Inde aderam facti; Theseus vis de tauri illa peream. Oculos uberaque non regisque vobis cursuque, opus venit quam vulnera. Et maiora necemque, lege modo; gestanda nitidi, vero? Dum ne pectoraque testantur.

Venasque repulsa Samos qui, exspectatum eram animosque hinc, aut manes, Assyrii. Cupiens auctoribus pariter rubet, profana magni super nocens. Vos ius sibilat inpar turba visae iusto! Sedes ante dum superest extrema.

Mon, 01 Jan 0001 00:00:00 +0000

Quondam non pater est dignior ille Eurotas#

Latent te facies#

Lorem markdownum arma ignoscas vocavit quoque ille texit mandata mentis ultimus, frementes, qui in vel. Hippotades Peleus pennas conscia cuiquam Caeneus quas.

Pater demittere evincitque reddunt
Maxime adhuc pressit huc Danaas quid freta
Soror ego
Luctus linguam saxa ultroque prior Tatiumque inquit
Saepe liquitur subita superata dederat Anius sudor

Cum honorum Latona#

O fallor in sustinui iussorum equidem. Nymphae operi oris alii fronde parens dumque, in auro ait mox ingenti proxima iamdudum maius?

Mon, 01 Jan 0001 00:00:00 +0000

Asciinema#

Asciinema shortcode integrates asciinema player into the markdown page.

{{< asciinema
  cast="asciinema-627097.cast"
  or
  cast="https://asciinema.org/a/vJNKUQFjuh7qKI2j3OoaKs8Jk.cast"
  loop=true
  autoplay=true
  speed=2 >}}

Parameters#

All parameters added to the shortcode will be transformed to options for Asciinema player, expect cast parameter that is used to locate cast file. Cast file follows same rules as portable image, it could be site resource, page resource or remote file URL.

List of Asciinema options

Mon, 01 Jan 0001 00:00:00 +0000

Buttons#

Buttons are styled links that can lead to local page or external link.

Example#

{{< button relref="/" [class="..."] >}}Get Home{{< /button >}}
{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}}

Get Home Contribute

Mon, 01 Jan 0001 00:00:00 +0000

Columns#

Columns help organize shorter pieces of content horizontally for readability. columns shortcode styles markdown list as up to 3 columns.

Example#

{{% columns [ratio="1:1"] [class="..."] %}}
- ### Left Content
  Lorem markdownum insigne...

- ### Mid Content
  Lorem markdownum insigne...

- ### Right Content
  Lorem markdownum insigne...
{{% /columns %}}

Left Content#

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.

Mon, 01 Jan 0001 00:00:00 +0000

Details#

Details shortcode is a helper for details html5 element. To collapse the details either omit the open keyword when using positional arguments or set open=false when using parameters.

Example with positional arguments#

{{% details "Title" [open] %}}
## Markdown content
Lorem markdownum insigne...
{{% /details %}}

Title

Markdown content#

Lorem markdownum insigne…

Example with parameters#

{{% details title="Title" open=true %}}
## Markdown content
Lorem markdownum insigne...
{{% /details %}}

Title

Markdown content#

Lorem markdownum insigne…

Mon, 01 Jan 0001 00:00:00 +0000

Badges#

Experimental, could change in the future or be removed

Badges can be used to annotate your pages with additional information or mark specific places in markdown content.

TitleValue Hugo0.147.6 BuildPassing Coverage25% Issues120

Examples#

Shortcode	Output
`{{< badge style="info" title="hugo" value="0.147.6" >}}`	Hugo0.147.6
`{{< badge style="success" title="Build" value="Passing" >}}`	BuildPassing
`{{< badge style="warning" title="Coverage" value="25%" >}}`	Coverage25%
`{{< badge style="danger" title="Issues" value="120" >}}`	Issues120

`{{< badge style="info" title="Title" >}}`	Title
`{{< badge style="info" value="Value" >}}`	Value
`{{< badge title="Default" >}}`	Default

Use in links#

A badge can be wrapped in markdown link producing following result: Hugo0.147.6

Mon, 01 Jan 0001 00:00:00 +0000

Cards#

Experimental, could change in the future or be removed

Example#

Line 1#

Line 2
This is tab MacOS content.

Markdown
Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa.
Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie.
Heading#

This is tab MacOS content.

Mon, 01 Jan 0001 00:00:00 +0000

Images#

Experimental, could change in the future or be removed

Image shortcode produces an image that can be clicked to expand.

Example#

{{< image src="placeholder.svg" alt="A placeholder" title="A placeholder" loading="lazy" >}}

Parameters#

src Required: The link to the image
class Optional: An optional CSS class name that will be applied to the img element
alt Optional: An optional alternate text for the image
title Optional: An optional title for the image
loading Optional: Sets loading control for the image: lazy, eager or auto

Mon, 01 Jan 0001 00:00:00 +0000

Hints#

Hint shortcode can be used as a hint/alert/notification block.

{{% hint [info|success|warning|danger] %}}
**Markdown content**  
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
{{% /hint %}}

> [!NOTE|TIP|IMPORTANT|WARNING|CAUTION]
> **Markdown content**  
> Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
> stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa

Example#

Markdown content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa

Mon, 01 Jan 0001 00:00:00 +0000

Mermaid Chart#

MermaidJS is library for generating svg charts and diagrams from text.

Override Mermaid initialization config
To override the initialization config for Mermaid, create a mermaid.json file in your assets folder!

Example#

```mermaid
stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.
```

stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.

{{< mermaid [class="..."] >}}
stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.
{{< /mermaid >}}

stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.

Diagrams#

Explore more diagrams and syntax on Mermaid documentation page.

Mon, 01 Jan 0001 00:00:00 +0000

First page#

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mon, 01 Jan 0001 00:00:00 +0000

Second Page#

Mon, 01 Jan 0001 00:00:00 +0000

Steps#

Steps shortcode styles numbered list as series of points for better content organization.

{{% steps %}}
1. ## Suspendisse sed congue orci.
   ...

2. ## Maecenas scelerisque sem.
   ...

3. ## Etiam risus purus.
   ...

4. ## Curabitur sed lacinia velit.
   ...
{{% /steps %}}

Example#

Suspendisse sed congue orci.#

Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie. Curabitur pellentesque sodales ipsum, sed efficitur libero euismod ac. Donec sit amet erat nunc. Suspendisse porta nisl velit, quis auctor massa commodo nec. Donec sollicitudin tellus sit amet massa condimentum luctus. Etiam molestie at ante et convallis.

Mon, 01 Jan 0001 00:00:00 +0000

Tabs#

Tabs let you organize content by context, for example installation instructions for each supported platform.

{{< tabs >}}
{{% tab "MacOS" %}} # MacOS Content {{% /tab %}}
{{% tab "Linux" %}} # Linux Content {{% /tab %}}
{{% tab "Windows" %}} # Windows Content {{% /tab %}}
{{< /tabs >}}

Example#

MacOS

MacOS#

This is tab MacOS content.

Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui quid, ignes. Miseratus fonte Ditis conubia.

Mon, 01 Jan 0001 00:00:00 +0000

content#

hugo_content repository

KaTeX

Mon, 01 Jan 0001 00:00:00 +0000

KaTeX#

KaTeX shortcode let you render math typesetting in markdown document. See KaTeX

Override KaTeX initialization config
To override the initialization config for KaTeX, create a katex.json file in your assets folder!

Example#

Activation#

KaTeX is activated on the page by first use of the shortcode or render block. you can force activation with empty {{< katex />}} and use delimiters defined in configuration in assets/katex.json.

Rendering as block#

{{< katex display=true >}}
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
{{< /katex >}}

```katex
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
```

$$
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$

f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi

\[ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi \]

$$ f(x) = \int_{-\infty}^\infty\hat f(\xi),e^{2 \pi i \xi x},d\xi $$

Showcases

Mon, 01 Jan 0001 00:00:00 +0000

At the moment this page is empty#

Hugo Test

With ToC

Caput vino delphine in tamen vias#

Cognita laeva illo fracta#

Natus quaerere#

Without ToC

At me ipso nepotibus nunc celebratior genus#

Tanto oblite#

Creating a New Theme

Introduction#

Migrate to Hugo from Jekyll

Move static content to static#

(Hu)go Template Primer

Getting Started with Hugo

Step 1. Install Hugo#

Step 2. Build the Docs#

4th Level of Menu#

Caesorum illa tu sentit micat vestes papyriferi#

This page is hidden in menu#

Quondam non pater est dignior ille Eurotas#

Latent te facies#

Cum honorum Latona#

Asciinema#

Parameters#

Buttons#

Example#

Columns#

Example#

Left Content#

Details#

Example with positional arguments#

Markdown content#

Example with parameters#

Markdown content#

Badges#

Examples#

Use in links#

Cards#

Example#

Line 1#

Heading#

Images#

Example#

Parameters#

Hints#

Example#

Mermaid Chart#

Example#

Diagrams#

First page#

Second Page#

Steps#

Example#

Suspendisse sed congue orci.#

Tabs#

Example#

MacOS#

content#

KaTeX

KaTeX#

Example#

Activation#

Rendering as block#

Showcases

At the moment this page is empty#

Move static content to `static`#