Hugo capabilities

Welcome

Hi! welcome! Here we'll showcase hugo capabilities as a static page generator. Here we're using the cactus theme. We'll be checking on the most needed features for Software Developers and Researcher who wants to create content with pictures, diagrams, and snippets of code with hightlight.

You can check on this code here

Lists

Make lists

• item 1
• item 2

Quotes

Create quotes:

“When something is important enough, you do it even if the odds are not in your favor.”

• Elon Musk

Links

This is a link to my web page.

Code snipets

SQL

SELECT * FROM posts;

Ruby

def my_func
  puts "Hello there!"
end

Highlight lines of code

Using hugo's highlight shortcode (lineNumbersInTable = true):

{{< highlight typescript "linenos=table, hl_lines=8 18-21" >}} // TypeScript type OptionalUser = { [K in keyof User]?: User[K] }

// ! we can remove optional constraint type RequiredUser = { [K in keyof OptionalUser]-?: User[K] }

type NullableUser = { [K in keyof User]: User[K] | null } type ReadonlyUser = { readonly [K in keyof User]: User[K] }

// ! we can remove readonly constraint type ModifiableUser = { -readonly [K in keyof User]: User[K] } {{< /highlight >}}

Write code without line number

{{< highlight javascript "linenos=false" >}} function sayHello() { console.log('Hello there!'); } {{< / highlight >}}

Tables

You can create tables like this

Diagrams

In Hugo there is an incredible variaty to create different diagrams. Hugo supports GoAt diagrams.

      .               .                .               .--- 1          .-- 1     / 1
     / \              |                |           .---+            .-+         +
    /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
   +     +        |       |        |       |    ---+            ---+          +
  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
 /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
 1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4
 

Althoug Hugo doesn't support mermaid diagrams natively, it's easy to set up, just follow their tutorial.

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

graph TD;
    A-->B;
    A-->C;
    B-->D;