Hugo Hero Theme

Hero is a multi-page business theme with fullscreen hero images and fullwidth sections.

Live Demo | Zerostatic Themes

Install Hugo

To use this theme you will first need to have Hugo installed. Please follow the official installation guide.

⚠️ Note: Check your Hugo version - Hugo Extended is required!

⚠️ Note: Do not use apt-get for Debian systems since it hasn't been updated.

Instead, download the latest extended version from here. Download file hugo_extended_0.149.0_linux-amd64.deb and execute:

sudo dpkg -i hugo_extended_0.149.0_linux-amd64.deb

This theme uses Hugo Pipes to compile SCSS and minify assets which means if you not using the Hugo extended version this theme will not work. To check your version of Hugo, run hugo version. Make sure you see /extended after the version number, for example Hugo Static Site Generator v0.82.0/extended darwin/amd64 BuildDate: unknown You do not need to use version v0.82.0 specifically, it just needs to have the /extended part.

First-time Website Creation

1. Create a new Hugo site

This will create a fresh Hugo site in the folder rifrobotics.

hugo new site rifrobotics

2. Install the theme

Use vcs to clone this theme into the sites themes folder rifrobotics/themes. You should end up with the following folder structure rifrobotics/themes/hugo-hero-theme

cd /path/to/rif-website-2025
vcs import rifrobotics/themes/ < themes.repos

3. Copy the example content

Copy the entire contents of the rifrobotics/themes/hugo-hero-theme/exampleSite/ folder to root folder of your Hugo site, ie rifrobotics/. To copy the files using terminal, make sure you are still in the projects root, ie the rifrobotics folder.

cd /path/to/rif-website-2025/rifrobotics
cp -a themes/hugo-hero-theme/exampleSite/. .
cp -a themes/hugo-hero-theme/layouts .

Run Hugo

After installing the theme for the first time, generate the Hugo site.

You run this command from the root folder of your Hugo site ie rifrobotics/

hugo

For local development run Hugo's built-in local server.

hugo server

Now enter localhost:1313 in the address bar of your browser.

Configuring Theme | Development

Folder and File Layout

All the following directories are relative to the rifrobotics folder.

NOTE: The public directory gets updated every time the website is updated so this is not tracked. Do not add content here.

• content: Contains the content (in markdown file) for all pages (e.g., homepage, 404, services, etc.).

• static: Host the images and icons for the website. Files will be copied from here.

• data: Specific data about the company. For example, social.json contains the links to the social media accounts of interest.

• archetypes: Not sure yet.

Homepage meta tags

Often a homepage requires special meta tags such as a meta description or og meta data for twitter, facebook etc. You can configure these values in the config.toml

# config.toml
...

  [params.homepage_meta_tags]
    meta_description = "a description of your website."
    meta_og_title = "My Theme"
    meta_og_type = "website"
    meta_og_url = "https://www.mywebsite.com"
    meta_og_image = "https://www.mywebsite.com/images/tn.png"
    meta_og_description = "a description of your website."
    meta_twitter_card = "summary"
    meta_twitter_site = "@mytwitterhandle"
    meta_twitter_creator = "@mytwitterhandle"

Under params.logo is where you specify the logo of the website.

TODO: Scale the logo to fit in its current spot.

Menu

You can edit and add main menu links in the config.toml under [[menu.main]]

Set meta tags on a per layout basis

You can set meta tags on a per template basis using a block. For example, you might want to write a custom meta description for the /services page. You can insert any valid HTML meta data inside the {{ define "meta_tags }} block at the top of a template.

// layouts/services/list.html
...

{{ define "meta_tags" }}
    <meta name="description" content="We offer a variety of services in the finance industry" />
{{ end }}

{{ define main }}
...

Deployment

Coming soon ...

License (from author)

• Don't create ports or new versions of this theme without asking me
• You can't re-distribute or re-sell this theme as your own template

Credits

• Beautiful royalty free Illustrations by Icons8 - https://icons8.com/illustrations/style--pixeltrue
• Stock images by Unsplash - https://unsplash.com/
• Feature icons by Noun Project - https://thenounproject.com/

More Hugo Themes by Zerostatic

• Hugo Hero - Open-source business theme
• Hugo Whisper - Open-source documentation theme
• Hugo Serif - Open-source business theme
• Hugo Winston - Open-source blog theme
• Hugo Advance - Premium advanced multi page business & marketing theme
• Hugo Paradigm - Premium landing page + site builder theme
• Hugo Lever - Premium personal / bio theme
• Hugo Shard - Premium SAAS / landing page theme

Find hundreds more Hugo themes on Built At Lightspeed