Hugo Academic CV Theme

Getting Started

Sat, 17 Feb 2024 00:00:00 +0000

Quick Start from Template

Create a site

Configure your new site

Add your content

Publish your site

Your site will automatically publish ~1-5 minutes after you commit (save) changes to files in your GitHub repository.

Let’s customize your new site:

Project Structure Configuration Create content

Customizing Hugo

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

View the full docs at

Project Structure

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

Folder Structure

There are 4 main folders for Hugo-based sites:

content/ for your Markdown-formatted content files (homepage, etc.)
- _index.md the homepage (Hugo requires that the homepage and archive pages have an underscore prefix)
assets/
- media/ for your media files (images, videos)
  - icons/custom/ upload any custom SVG icons you want to use
config/_default/ for your site configuration files
- hugo.yaml to configure Hugo (site title, URL, Hugo options, setup per-folder page features)
- module.yaml to install or uninstall Hugo themes and plugins
- params.yaml to configure Hugo Blox options (SEO, analytics, site features)
- menus.yaml to configure your menu links (if the menu is enabled in params.yaml)
- languages.yaml to configure your site’s language or to set language-specific options in a multilingual site
static/uploads/ for any files you want visitors to download, such as a PDF
go.mod sets the version of Hugo themes/plugins which your site uses

Hugo File Naming Convention

Hugo gives us two options to name standard page files: as TITLE/index.md or TITLE.md where TITLE is your page name.

The page name should be lowercase and using hyphens (-) instead of spaces.

Both approaches result in the same output, so you can choose your preferred approach to naming and organizing files. A benefit to the folder-based approach is that all your page’s files (such as images) are self-contained within the page’s folder, so it’s more portable if you wish to share the original Markdown page with someone.

The homepage is a special case as Hugo requires the homepage and listing pages to be named _index.md.

The docs navigation is automatically generated based on the content in the docs/ folder and is sorted alphabetically.

The order of pages can be changed by adding the weight parameter in the front matter of your Markdown files.

In the example below, the example.md page will appear before the test.md page as it has a lower weight:

Page example.md:

---
title: My Example
weight: 1
---

Page test.md:

---
title: My Test
weight: 2
---

Configuration

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

The configuration of your site can be found in config/_default/.

Full Documentation

See

Links are automatically generated from the structure of your content directory. Simply add a folder to nest a page.

Extra Links

Additional links can be added under the sidebar section of your config/_default/menus.yaml:

menu:
 sidebar:
 - name: "Need help?"
 params:
 type: separator
 weight: 1
 - name: "A page"
 pageRef: "/page-filename-here"
 weight: 2
 - name: "An external link ↗"
 url: "https://hugoblox.com"
 weight: 3

A table of contents is automatically generated from the headings your Markdown file.

It can optionally be disabled by setting toc: false in the front matter of a page:

---
title: My Page
toc: false
---

Example Talk

Sat, 01 Jun 2030 13:00:00 +0000

Note

Click on the Slides button above to view the built-in slides feature.

Slides can be added in a few ways:

Create slides using Hugo Blox Builder’s feature and link using the slides parameter in the front matter of the talk file
Upload an existing slide deck to this page bundle and link it using links: [{ type: slides, url: path/to/file } ] in front matter
Embed your slides (e.g. Google Slides) or presentation video on this page using .

Further event details, including such as image galleries, can be added to the body of this page.

🎉 Easily create your own simple yet highly customizable blog

Fri, 27 Oct 2023 00:00:00 +0000

Welcome 👋

Table of Contents

Overview

The Hugo Blox website builder for Hugo, along with its starter templates, is designed for professional creators, educators, and teams/organizations - although it can be used to create any kind of site
The template can be modified and customised to suit your needs. It’s a good platform for anyone looking to take control of their data and online identity whilst having the convenience to start off with a no-code solution (write in Markdown and customize with YAML parameters) and having flexibility to later add even deeper personalization with HTML and CSS
You can work with all your favourite tools and apps with hundreds of plugins and integrations to speed up your workflows, interact with your readers, and much more

Get Started

Quick Start Guide

New to Hugo Blox? Follow these steps to get your site up and running in minutes!

👉
📚
💬 or
🐦 Twitter: #MadeWithHugoBlox
💡
⬆️ Updating Hugo Blox? View the and

Important

Remember to backup your site before making major updates!

Crowd-funded open-source software

To help us develop this template and software sustainably under the MIT license, we ask all individuals and businesses that use it to help support its ongoing maintenance and development via sponsorship.

As a token of appreciation for sponsoring, you can unlock awesome rewards and extra features 🦄✨

Ecosystem

: Automatically import publications from BibTeX

Inspiration

are building with this template.

Features

Enhanced Markdown Support

Hugo Blox now supports GitHub and Obsidian-style callouts! Use standard Markdown alert syntax like > [!NOTE] for better portability.

Page builder - Create anything with no-code and
Edit any type of content - Blog posts, publications, talks, slides, projects, and more!
Create content in , , or
Plugin System - Fully customizable
Display Code and Math - Code syntax highlighting and LaTeX math supported
Integrations - , , Maps, Contact Forms, and more!
Beautiful Site - Simple and refreshing one-page design
Industry-Leading SEO - Help get your website found on search engines and social media
Media Galleries - Display your images and videos with captions in a customizable gallery
Mobile Friendly - Look amazing on every screen with a mobile friendly version of your site
Multi-language - 35+ language packs including English, 中文, and Português
Multi-user - Each author gets their own profile page
Privacy Pack - Assists with GDPR
Stand Out - Bring your site to life with animation, parallax backgrounds, and scroll effects
One-Click Deployment - No servers. No databases. Only files.

Version Requirements

The new Markdown alert syntax requires Hugo v0.132.0 or later. Make sure you’re using a compatible version!

Themes

Hugo Blox and its templates come with automatic day (light) and night (dark) mode built-in. Visitors can choose their preferred mode by clicking the sun/moon icon in the header.

for your site. Themes are fully customizable.

License

Released under the license.

Pandas

Thu, 26 Oct 2023 00:00:00 +0000

Flexible and powerful data analysis / manipulation library for Python, providing labeled data structures.

PyTorch

Thu, 26 Oct 2023 00:00:00 +0000

PyTorch is a Python package that provides tensor computation (like NumPy) with strong GPU acceleration.

scikit-learn

Thu, 26 Oct 2023 00:00:00 +0000

scikit-learn is a Python module for machine learning built on top of SciPy and is distributed under the 3-Clause BSD license.

🧠 Sharpen your thinking with a second brain

Thu, 26 Oct 2023 00:00:00 +0000

Create a personal knowledge base and share your knowledge with your peers.

Hugo Blox web framework empowers you with one of the most flexible note-taking capabilities out there.

Create a powerful knowledge base that works on top of a local folder of plain text Markdown files.

Use it as your second brain, either publicly sharing your knowledge with your peers via your website, or via a private GitHub repository and password-protected site just for yourself.

Mindmaps

Hugo Blox supports a Markdown extension for mindmaps.

With this open format, can even edit your mindmaps in other popular tools such as Obsidian.

Simply insert a Markdown code block labelled as markmap and optionally set the height of the mindmap as shown in the example below.

Mindmaps can be created by simply writing the items as a Markdown list within the markmap code block, indenting each item to create as many sub-levels as you need:


```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal
```

renders as

- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal

Anh here’s a more advanced mindmap with formatting, code blocks, and math:


```markmap
- Mindmaps
- Links
- [Hugo Blox Docs](https://docs.hugoblox.com/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```

renders as

- Mindmaps
- Links
- [Hugo Blox Docs](https://docs.hugoblox.com/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

Highlighting

Highlight important text with mark:

<mark>Highlighted text</mark>

Callouts

Use (aka asides, hints, or alerts) to draw attention to notes, tips, and warnings.

Use the > [!NOTE] syntax to create a callout.

> [!NOTE]
> A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

renders as

Note

A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

Or use the warning callout type so your readers don’t miss critical details:

Warning

A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

📈 Communicate your results effectively with the best data visualizations

Wed, 25 Oct 2023 00:00:00 +0000

Hugo Blox is designed to give technical content creators a seamless experience. You can focus on the content and Hugo Blox handles the rest.

Use popular tools such as Plotly, Mermaid, and data frames.

Embed Rich Content

HuggingFace Model

google/embeddinggemma-300m

sentence-similarity

605.161k

1.102k

HuggingFace Dataset

fka/awesome-chatgpt-prompts

dataset

🧠 Awesome ChatGPT Prompts [CSV dataset] This is a Dataset Repository of Awesome ChatGPT Prompts View All Prompts on GitHub License CC-0

35.47k

9.333k

GitHub Repository

hugo-blox-builder

by HugoBlox • HTML

⚡ Hugo Blox: Markdown sites in minutes. Academic/resume/lab/portfolio for AI researchers & startups. Premium templates. Deploy to GitHub Pages now in 1-click 👇

2.959k

9.043k

academic blog blog-engine +17

Custom embed with manual data

My Custom Resource

example.com

A great resource for learning

Custom Images

Embed beautiful images from any source with Hugo image processing (Unsplash, custom URLs, etc.):

Data Visualization Guide

example.com

Beautiful data visualization workspace

You can also add images to any platform embed:

plotly.py

by plotly • Python

The interactive graphing library for Python ✨

2.74k

730

17.913k

d3 dashboard declarative +11

Charts

Hugo Blox supports the popular format for interactive data visualizations. With Plotly, you can design almost any kind of visualization you can imagine!

Save your Plotly JSON in your page folder, for example line-chart.json, and then add the {{< chart data="line-chart" >}} shortcode where you would like the chart to appear.

Demo:

You might also find the useful.

Diagrams

Hugo Blox supports the Mermaid Markdown extension for diagrams.

An example flowchart:

```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

renders as

graph TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]

An example sequence diagram:

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

renders as

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

An example class diagram:

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```

renders as

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

An example state diagram:

```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```

renders as

stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

Data Frames

Save your spreadsheet as a CSV file in your page’s folder and then render it by adding the Table shortcode to your page:

{{< table path="results.csv" header="true" caption="Table 1: My results" >}}

renders as

Table 1: My results
customer_id	score
1	0
2	0.5
3	1

Interactive Buttons

Add engaging call-to-action buttons to your data visualization posts:

Basic Buttons

Learn Plotly

{{< button url="/" >}}Contact Us{{< /button >}}

{{< button url="https://plotly.com/python/" new_tab="true" style="secondary" >}}Learn Plotly{{< /button >}}

Styled Buttons for Data Actions

View Dashboard

Download Data

View Source Code

{{< button url="#" style="primary" size="lg" align="center" icon="chart-bar" >}}View Dashboard{{< /button >}}

{{< button url="/data/results.csv" style="outline" icon="document-arrow-down" >}}Download Data{{< /button >}}

{{< button url="https://github.com/HugoBlox" new_tab="true" style="ghost" icon="arrow-top-right-on-square" icon_position="right" >}}View Source Code{{< /button >}}

Multiple Aligned Buttons

Try Jupyter

Open in Colab

{{< button url="https://jupyter.org/" new_tab="true" style="secondary" rounded="full" align="center" >}}Try Jupyter{{< /button >}}

{{< button url="https://colab.research.google.com/" new_tab="true" style="primary" rounded="full" align="center" icon="rocket-launch" >}}Open in Colab{{< /button >}}

👩🏼‍🏫 Teach academic courses

Tue, 24 Oct 2023 00:00:00 +0000

is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest.

Embed videos, podcasts, code, LaTeX math, and even test students!

On this page, you’ll find some examples of the types of technical content that can be rendered with Hugo Blox.

Citation

Here’s an example of citing a publication using the cite shortcode:

Alex Johnson (2019). An example preprint / working paper.

Preprint Code Slides Dataset Poster Source Document Video Custom Link Preprint

You can also use the default view by omitting the view parameter:

Alex Johnson

Equal contribution

, Robert Ford

Equal contribution

(2013). An example conference paper. In ICW.

PDF Code Dataset Slides Source Document Video PDF DOI

Video

Teach your course by sharing videos with your students. Choose from one of the following approaches:

Youtube:

{{< youtube D2vj0WcvH5c >}}

Bilibili:

{{< bilibili BV1WV4y1r7DF >}}

Video file

Videos may be added to a page by either placing them in your assets/media/ media library or in your , and then embedding them with the video shortcode:

{{< video src="my_video.mp4" controls="yes" >}}

Podcast

You can add a podcast or music to a page by placing the MP3 file in the page’s folder or the media library folder and then embedding the audio on your page with the audio shortcode:

{{< audio src="ambient-piano.mp3" >}}

Try it out:

Test students

Provide a simple yet fun self-assessment by revealing the solutions to challenges with the spoiler shortcode:

{{< spoiler text="👉 Click to view the solution" >}}
You found me!
{{< /spoiler >}}

renders as

👉 Click to view the solution

You found me 🎉

Math

Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. Enable math by setting the math: true option in your page’s front matter, or enable math for your entire site by toggling math in your config/_default/params.yaml file:

features:
 math:
 enable: true

To render inline or block math, wrap your LaTeX math with $...$ or $$...$$, respectively.

Example math block:

$$
\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
$$

renders as

$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$

Example inline math $\nabla F(\mathbf{x}_{n})$ renders as $\nabla F(\mathbf{x}_{n})$.

Example multi-line math using the math linebreak (\\):

$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$

renders as

$$ f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ 1-p_{0}^{*} & \text{if }k=0.\end{cases} $$

Code

Hugo Blox Builder utilises Hugo’s Markdown extension for highlighting code syntax. The code theme can be selected in the config/_default/params.yaml file.

```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```

renders as

import pandas as pd
data = pd.read_csv("data.csv")
data.head()

Inline Images

{{< icon name="python" >}} Python

renders as

Python

Embed Media

Tue, 24 Oct 2023 00:00:00 +0000

is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest.

Embed videos, podcasts, code, LaTeX math, and even test students!

On this page, you’ll find some examples of the types of technical content that can be rendered with Hugo Blox.

Video

Teach your course by sharing videos with your students. Choose from one of the following approaches:

Youtube:

{{< youtube w7Ft2ymGmfc >}}

Bilibili:

{{< bilibili id="BV1WV4y1r7DF" >}}

Video file

Videos may be added to a page by either placing them in your assets/media/ media library or in your , and then embedding them with the video shortcode:

{{< video src="my_video.mp4" controls="yes" >}}

Podcast

You can add a podcast or music to a page by placing the MP3 file in the page’s folder or the media library folder and then embedding the audio on your page with the audio shortcode:

{{< audio src="ambient-piano.mp3" >}}

Try it out:

Test students

Provide a simple yet fun self-assessment by revealing the solutions to challenges with the spoiler shortcode:

{{< spoiler text="👉 Click to view the solution" >}}
You found me!
{{< /spoiler >}}

renders as

👉 Click to view the solution

You found me 🎉

Math

Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the math option in your config/_default/params.yaml file.

To render inline or block math, wrap your LaTeX math with {{< math >}}$...${{< /math >}} or {{< math >}}$$...$${{< /math >}}, respectively.

Note

We wrap the LaTeX math in the Hugo Blox math shortcode to prevent Hugo rendering our math as Markdown. This callout now uses the standard Markdown alert syntax!

Example math block:

{{< math >}}
$$
\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
$$
{{< /math >}}

renders as

Example inline math {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}} renders as $\nabla F(\mathbf{x}_{n})$ .

Example multi-line math using the math linebreak (\\):

{{< math >}}
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$
{{< /math >}}

renders as

$$ f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ 1-p_{0}^{*} & \text{if }k=0.\end{cases} $$

Code

Hugo Blox Builder utilises Hugo’s Markdown extension for highlighting code syntax. The code theme can be selected in the config/_default/params.yaml file.

```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```

renders as

import pandas as pd
data = pd.read_csv("data.csv")
data.head()

Inline Images

{{< icon name="python" >}} Python

renders as

Python

Experience

Tue, 24 Oct 2023 00:00:00 +0000

✅ Manage your projects

Mon, 23 Oct 2023 00:00:00 +0000

Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!

Ideation

Hugo Blox supports a Markdown extension for mindmaps.

Simply insert a Markdown code block labelled as markmap and optionally set the height of the mindmap as shown in the example below.

Mindmaps can be created by simply writing the items as a Markdown list within the markmap code block, indenting each item to create as many sub-levels as you need:


```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal
```

renders as

- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal

Diagrams

Hugo Blox supports the Mermaid Markdown extension for diagrams.

An example Gantt diagram:

```mermaid
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
```

renders as

gantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d

Todo lists

You can even write your todo lists in Markdown too:

- [x] Write math example
 - [x] Write diagram example
- [ ] Do something else

renders as

Write math example
- Write diagram example
Do something else

An example preprint / working paper

Sun, 07 Apr 2019 00:00:00 +0000

This work is driven by the results in my on LLMs.

Note

Create your slides in Markdown - click the Slides button to check out the example.

Add the publication’s full text or supplementary notes here. You can use rich formatting such as including .

An example journal article

Tue, 01 Sep 2015 00:00:00 +0000

Note

Click the Cite button above to demo the feature to enable visitors to import publication metadata into their reference management software.

Note

Create your slides in Markdown - click the Slides button to check out the example.

Add the publication’s full text or supplementary notes here. You can use rich formatting such as including .

An example conference paper

Mon, 01 Jul 2013 00:00:00 +0000

Note

Click the Cite button above to demo the feature to enable visitors to import publication metadata into their reference management software.

Note

Create your slides in Markdown - click the Slides button to check out the example.

Add the publication’s full text or supplementary notes here. You can use rich formatting such as including .

Buttons

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

A modern, customizable button shortcode with gradient styling, icons, and smart link handling.

Basic Usage

Visit External Site

The above buttons are created with:

{{< button url="/contact" >}}Contact Us{{< /button >}}

{{< button url="https://example.com" new_tab="true" style="secondary" >}}Visit External Site{{< /button >}}

Style Variants

Primary (Default)

Primary Button

{{< button url="#" style="primary" >}}Primary Button{{< /button >}}

Secondary

Secondary Button

{{< button url="#" style="secondary" >}}Secondary Button{{< /button >}}

Outline

Outline Button

{{< button url="#" style="outline" >}}Outline Button{{< /button >}}

Ghost

Ghost Button

{{< button url="#" style="ghost" >}}Ghost Button{{< /button >}}

Sizes

Extra Large

{{< button url="#" size="sm" >}}Small Button{{< /button >}}
{{< button url="#" size="md" >}}Medium Button{{< /button >}}
{{< button url="#" size="lg" >}}Large Button{{< /button >}}
{{< button url="#" size="xl" >}}Extra Large{{< /button >}}

Alignment

Left (Default)

Left Aligned

Center

Center Aligned

Right

Right Aligned

{{< button url="#" align="left" >}}Left Aligned{{< /button >}}
{{< button url="#" align="center" >}}Center Aligned{{< /button >}}
{{< button url="#" align="right" >}}Right Aligned{{< /button >}}

With Icons

Icon Before Text

Download

Icon After Text

Continue

{{< button url="#" icon="arrow-down-tray" >}}Download{{< /button >}}
{{< button url="#" icon="arrow-right" icon_position="right" >}}Continue{{< /button >}}

Rounded Corners

Small Radius

Medium Radius (Default)

Medium Radius

Large Radius

Pill Shape

Pill Button

{{< button url="#" rounded="sm" >}}Small Radius{{< /button >}}
{{< button url="#" rounded="md" >}}Medium Radius{{< /button >}}
{{< button url="#" rounded="lg" >}}Large Radius{{< /button >}}
{{< button url="#" rounded="full" >}}Pill Button{{< /button >}}

Advanced Examples

Call-to-Action Button

Get Started Today

{{< button url="/signup" style="primary" size="lg" align="center" icon="rocket-launch" >}}Get Started Today{{< /button >}}

External Link with New Tab

View on GitHub

{{< button url="https://github.com/hugo-blox/hugo-blox-builder" new_tab="true" style="outline" icon="arrow-top-right-on-square" icon_position="right" >}}View on GitHub{{< /button >}}

Download Button

Download PDF

{{< button url="/files/document.pdf" style="secondary" icon="document-arrow-down" rounded="full" >}}Download PDF{{< /button >}}

Parameters

Parameter	Type	Default	Description
`url`	string	`#`	Required. Button destination URL (internal or external)
`text`	string	Inner content	Button text (overrides shortcode content)
`new_tab`	boolean	`false`	Whether to open link in new tab
`style`	string	`primary`	Button style: `primary`, `secondary`, `outline`, `ghost`
`size`	string	`md`	Button size: `sm`, `md`, `lg`, `xl`
`align`	string	`left`	Button alignment: `left`, `center`, `right`
`icon`	string	-	Icon name from
`icon_position`	string	`left`	Icon position: `left`, `right`
`rounded`	string	`md`	Border radius: `sm`, `md`, `lg`, `xl`, `full`
`disabled`	boolean	`false`	Whether button should be disabled

Security Features

The button shortcode automatically handles security for external links:

External links get rel="noreferrer" attribute
External links opening in new tab get rel="noopener noreferrer"
Internal links opening in new tab get rel="noopener"

This ensures safe navigation while maintaining functionality.

Accessibility

The button shortcode includes built-in accessibility features:

Proper role="button" attribute
aria-label support
Keyboard focus indicators
High contrast focus rings
Disabled state handling

Callouts

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

Hugo Blox supports GitHub and Obsidian-style Markdown callouts for maximum compatibility and content portability.

Callouts are a useful feature to draw attention to important or related content such as notes, hints, or warnings in your articles.

Usage

Basic Callout Types

Hugo Blox supports all 15+ callout types from :

Information & Notes:

> [!NOTE]
> This is a note callout with important information that users should know.

Note

This is a note callout with important information that users should know.

> [!INFO]
> Alternative info callout - same styling as NOTE.

Info

Alternative info callout - same styling as NOTE.

> [!ABSTRACT]
> Use for abstracts, summaries, or TL;DR sections.

Abstract

Use for abstracts, summaries, or TL;DR sections.

Actions & Tasks:

> [!TODO]
> This is something that needs to be done.

Todo

This is something that needs to be done.

> [!TIP]
> Here's a helpful tip to make your workflow more efficient!

Tip

Here’s a helpful tip to make your workflow more efficient!

> [!SUCCESS]
> Great job! This operation completed successfully.

Success

Great job! This operation completed successfully.

Questions & Interactive:

> [!QUESTION]
> What do you think about this approach? Let us know!

Question

What do you think about this approach? Let us know!

> [!EXAMPLE]
> Here's a practical example of how to implement this feature.

Example

Here’s a practical example of how to implement this feature.

> [!QUOTE]
> "The best way to predict the future is to invent it." - Alan Kay

Quote

“The best way to predict the future is to invent it.” - Alan Kay

Warnings & Errors:

> [!WARNING]
> Be careful! This action might have unexpected consequences.

Warning

Be careful! This action might have unexpected consequences.

> [!CAUTION]
> Danger! This operation is irreversible and could cause data loss.

Caution

Danger! This operation is irreversible and could cause data loss.

> [!IMPORTANT]
> This is critical information that users must understand to proceed.

Important

This is critical information that users must understand to proceed.

> [!DANGER]
> This is extremely dangerous - proceed with extreme caution!

Danger

This is extremely dangerous - proceed with extreme caution!

> [!FAILURE]
> This operation failed. Check your configuration and try again.

Failure

This operation failed. Check your configuration and try again.

> [!BUG]
> Known issue: This feature doesn't work properly in Safari < 14.

Bug

Known issue: This feature doesn’t work properly in Safari < 14.

Custom Titles

You can customize the title of any callout:

> [!WARNING]+ Custom Warning Title
> This warning has a custom title instead of just "Warning".

Custom Warning Title

This warning has a custom title instead of just “Warning”.

Legacy Syntax (Deprecated)

The old shortcode syntax still works but shows a deprecation warning:

{{< callout note >}}
This still works but is deprecated. Use the Markdown syntax above!
{{< /callout >}}

CSS Customization

Hugo Blox generates callouts with semantic CSS classes and data attributes, making customization easy. Each callout has:

Base class: .callout
Type-specific data attribute: data-callout="note"
Component classes: .callout-icon, .callout-title, .callout-content, .callout-body

Custom CSS Example (add to your assets/css/custom.css):

/* Customize NOTE callouts */
.callout[data-callout="note"] {
 border-left-width: 8px;
 box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* Make SUCCESS callouts pulse */
.callout[data-callout="success"] {
 animation: pulse 2s infinite;
}

/* Custom icon styling */
.callout-icon svg {
 transition: transform 0.2s;
}

.callout:hover .callout-icon svg {
 transform: scale(1.1);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
 .callout[data-callout="warning"] {
 background-color: rgb(92 25 2);
 border-color: rgb(245 158 11);
 }
}

This approach matches , ensuring your styles work across platforms.

Benefits of the New Syntax

Portable: Works with GitHub, Obsidian, and other Markdown editors
Standard: Uses widely-adopted Markdown callout syntax
Clean: No Hugo-specific shortcodes needed
Future-proof: Supported by the latest Hugo versions (0.132.0+)
Customizable: Semantic CSS classes and data attributes for easy styling
Complete: All 15+ Obsidian callout types supported
Multilingual: Callout titles are automatically translated based on your site’s language (and can be customized in the language packs)

Cards

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

A Hugo extension to create cards. Cards can be shown as links or as plain text.

Usage

Learn Shortcodes A card without an icon or link

is rendered by:

{{< cards >}}
 {{< card url="../callout" title="Callout" icon="academic-cap" >}}
 {{< card url="" title="A card without an icon" >}}
{{< /cards >}}

Options

Parameter	Description
`icon`	Name of the icon. Defaults to
`title`	Title heading for the card.
`subtitle`	Subtitle heading (supports Markdown).
`url`	URL

Internationalization (i18n)

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

Hugo Blox enables you to easily edit the interface text as well as translating your site into multiple languages using Hugo’s feature.

View the full docs at

Spoilers

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

A Hugo shortcode to toggle collapsible content.

Example

Click to view the spoiler

You found me!

Markdown is supported.

Usage

{{< spoiler text="Click to view the spoiler" >}}

This is the content of the details.

Markdown is **supported**.

{{< /spoiler >}}

Steps

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

Display a series of steps, such as for a tutorial.

Example

Step 1

The first step here…

Step 2

The second step here…

Step 3

The third step here…

Usage

Use the Markdown level-3 headings to represent step titles within the steps shortcode:

{{% steps %}}

### Step 1

The first step here...

### Step 2

The second step here...

### Step 3

The third step here...

{{% /steps %}}

Hugo Academic CV Theme

Getting Started

Quick Start from Template

Create a site

Configure your new site

Add your content

Publish your site

Next

Customizing Hugo

Project Structure

Folder Structure

Hugo File Naming Convention

Docs Navigation

Configuration

Full Documentation

Navigation

Menu

Left Sidebar

Extra Links

Right Sidebar

Example Talk

🎉 Easily create your own simple yet highly customizable blog

Overview

Get Started

Crowd-funded open-source software

Ecosystem

Inspiration

Features

Themes

License

Pandas

PyTorch

scikit-learn

🧠 Sharpen your thinking with a second brain

Mindmaps

Highlighting

Callouts

Did you find this page helpful? Consider sharing it 🙌

📈 Communicate your results effectively with the best data visualizations

Embed Rich Content

google/embeddinggemma-300m

fka/awesome-chatgpt-prompts

hugo-blox-builder

My Custom Resource

Custom Images

Data Visualization Guide

plotly.py

Charts

Diagrams

Data Frames

Interactive Buttons

Basic Buttons

Styled Buttons for Data Actions

Multiple Aligned Buttons

Did you find this page helpful? Consider sharing it 🙌

👩🏼‍🏫 Teach academic courses

Citation

Video

Podcast

Test students

Math

Code

Inline Images

Did you find this page helpful? Consider sharing it 🙌

Embed Media

Video

Podcast

Test students

Math

Code

Inline Images

Did you find this page helpful? Consider sharing it 🙌

Experience

✅ Manage your projects

Ideation

Diagrams

Todo lists

Did you find this page helpful? Consider sharing it 🙌

An example preprint / working paper

An example journal article