Hugo Profile Theme Documentation

Hugo is a fast static site generator written in Go. Key features include:

• Fast Asset Pipelines: Supports CSS bundling (Sass transpilation, minification, PostCSS), JavaScript bundling (TypeScript, JSX, minification), and advanced image processing (resizing, cropping, WebP encoding).
• Hugo Modules: Allows sharing content, assets, data, translations, themes, templates, and configuration via Git repositories.
• Versatility: Optimized for documentation sites, portfolios, blogs, resumes, and corporate/government sites.
• Development Server: Includes an embedded web server for instant preview of changes during development.

Customization is handled primarily through the hugo.yaml file in your site root. Use this file to change the site title, homepage content, or toggle visibility for sections like 'About' or 'Education'.

To create new content, such as a blog post, use the hugo new command. This generates a file with the necessary front matter metadata.

hugo new content content/blogs/my-post.md

The extended edition is required if you need to encode images to WebP format or use the embedded LibSass transpiler for Sass-to-CSS.

Prerequisites:

• Go 1.19 or later
• GCC

To build the extended edition, set CGO_ENABLED=1 and use the extended tag during installation:

CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@latest

To build and install the standard edition of Hugo, ensure you have Go 1.19 or later installed on your system. Use the following command to install the latest version:

go install github.com/gohugoio/hugo@latest

The theme provides a custom dynamic-img shortcode to serve responsive images via Cloudinary. This shortcode automatically determines the best quality and format for the user's device.

Setup

Before using this shortcode, you must set the cloudinary_cloud_name parameter in your site configuration.

Usage

• src: The path to the image on Cloudinary. Do not include the file extension (e.g., use /my/image instead of /my/image.png).
• title: An optional title for the image.
• style: An optional string to apply custom CSS styles to the image.

{{</* dynamic-img src="/my/image/on/cloudinary" title="A title for the image" */>}}

{{/* With custom styles */}}
{{</* dynamic-img src="/my/image/on/cloudinary" title="A title for the image" style="max-width:60%" */>}}

To enable emoji shorthand codes (e.g., :zap:) throughout your content files, set the enableEmoji option to true in your Hugo site configuration file.

enableEmoji = true

While Hugo enables the Unicode sequences, the visual rendering depends on the user's browser and platform. To ensure consistent styling or to provide a fallback font stack for emojis, apply a font-family to your emoji elements (typically classes like .emoji).

.emoji {
  font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
}

To add a new language (e.g., German) to your site:

1. Create a translation file: Create i18n/de.toml in your site root. Define the keys used in the theme (e.g., nav_about, nav_experience) with their translated values.
2. Register the language: Add the new language entry to the languages section in hugo.yaml with an appropriate languageName and weight.
3. (Optional) Add content: Create language-specific content files in content/de/.

# i18n/de.toml
[nav_about]
other = "Über uns"

[nav_experience]
other = "Erfahrung"

# hugo.yaml
languages:
  de:
    languageName: "Deutsch"
    weight: 4

Netlify Deployment

If using the exampleSite as a template, you can deploy by connecting your repository to Netlify. Changes to the exampleSite folder will trigger automatic deployments.

Manual Deployment

To deploy manually to any hosting provider:

1. Clean the previous build: rm -rf public/.
2. Generate the static site: hugo.
3. Upload the contents of the public/ folder to your host.

rm -rf public/ && hugo

You can render mathematical equations using Mathjax syntax with AMS symbol support.

To enable Mathjax for a specific page, add mathjax: true to the page's frontmatter.

Block Equations

To render a block equation, place the equation on its own line between double dollar signs: $$ ... $$.

Inline Equations

To render equations within a line of text, use the \( ... \) delimiter.

---
title: "Render Math With Mathjax"
draft: false
mathjax: true
---

## Block Equation Example

$$ | Pr_{x \leftarrow P_{1}} [A(x) = 1] - Pr_{x \leftarrow P_{2}} [A(x) = 1] | < \text{negligible} $$

## Inline Equation Example

Write in-line equations with `\( ... \)` , like \( x^n / y \) .