Hugo Hero Theme is a multi-page business theme for the Hugo static site generator, built to showcase fullscreen hero images and fullwidth sections across services, portfolio, and about pages.
What is Hugo Hero Theme?
Hugo Hero Theme is an open-source Hugo theme created by Zerostatic Themes for building multi-page business websites. It consumes markdown content for services, portfolio items, features, and about sections and outputs a static HTML site with fullscreen hero image partials and fullwidth layout sections. The theme requires Hugo Extended because it uses Hugo Pipes to compile SCSS, and it includes Bootstrap 4 grid classes for responsive layout. As of the repository metadata, the theme has 394 stars on GitHub. A live demo is available at https://hugo-hero.netlify.app/ and the repository is at https://github.com/zerostaticthemes/hugo-hero-theme.
Key Features
- Fullscreen hero image partial — A full-width and full-height hero image component that gives every page an immersive visual opening.
- Markdown content management — Services and Work/Portfolio are markdown list/single/summary layouts; the homepage uses headless bundles of multiple markdown files, while the About page uses leaf bundles and shortcodes.
- Hugo Pipes SCSS — Styles are written in SCSS and compiled by Hugo Pipes; only the Bootstrap 4 grid and media queries are enabled by default, with the rest of Bootstrap ready to import in style.scss.
- Lighthouse 100/100 speed and SEO — The theme reports perfect Lighthouse scores for both speed and SEO, with minified CSS and JavaScript each under 20KB and no front-end framework required.
- Google Analytics integration — Configure a tracking ID in config.toml or through the HUGO_GOOGLE_ANALYTICS_ID environment variable, which is compatible with Netlify deployments.
- Responsive menu — Main navigation links are defined in config.toml and collapse into an animated hamburger menu on mobile.
- SEO meta tags — Set home page description, Open Graph, and Twitter card metadata in config.toml, and override meta tags per template with a block in the layout.
- Example content included — The theme ships with robust example markdown content plus royalty-free illustrations from Icons8, stock photos from Unsplash, and feature icons from Noun Project.
Who is it for?
- Small business owners — Build a company website with services, work, and about pages without writing code, using markdown content only.
- Freelance designers and agencies — Use the Work/Portfolio layout to present case studies and create a professional multi-page client site.
- Hugo developers — Learn or reuse the headless bundle and leaf bundle patterns for structuring markdown-driven page sections.
- Marketing teams — Deploy directly to Netlify using the included netlify.toml and manage SEO/meta tags from config.toml.
What can you do with Hugo Hero Theme?
- Agency owners: Create a portfolio site with fullscreen hero images and fullwidth sections to showcase services and past work.
- Developers: Customize the SCSS and use Hugo Pipes to compile your own styles while keeping the Bootstrap grid.
- Marketers: Configure Google Analytics and Open Graph meta tags in config.toml to prepare a site for launch.
How does Hugo Hero Theme work?
The theme's installation flow is: create a new Hugo site, git clone the theme into the site's themes folder, copy all files from the exampleSite folder into the site root, and run hugo server for local development. Hugo Extended is required because Hugo Pipes compiles the SCSS and minifies assets during the build.
Pricing
Hugo Hero Theme is open-source and free to download from GitHub. The license prohibits redistributing or reselling the theme as your own and requires asking permission before creating ports or new versions.
Alternatives
- Hugo Serif — Another open-source business theme by Zerostatic with a similar multi-page structure.
- Hugo Whisper — An open-source documentation theme from the same author, suited for docs instead of marketing sites.
FAQ
Is Hugo Hero Theme free?
Yes, Hugo Hero Theme is open-source and available for free on GitHub. However, the license restricts you from redistributing or reselling it as your own theme and requires permission for creating ports.
Does Hugo Hero Theme require a specific Hugo version?
Yes, you need Hugo Extended. The theme relies on Hugo Pipes to compile SCSS and minify assets, so the extended build is mandatory. Check your installation with hugo version to confirm the extended flag.
How do I change the menu?
Main navigation links are edited in config.toml under the menu.main key. You can add or reorder items there, and the menu automatically becomes an animated hamburger menu on mobile.
Can I deploy Hugo Hero Theme to Netlify?
Yes, the theme includes a netlify.toml that is configured to deploy from the exampleSite folder. If you removed or copied the exampleSite folder into your own site, delete that netlify.toml file.
How do I set SEO meta tags?
Homepage meta tags are configured in config.toml under the params.homepage_meta_tags key, where you can set description, Open Graph, and Twitter card values. You can also define a meta_tags block in any template to override tags on a per-page basis.
