Hugo HTML5 UP Arcana is a Hugo theme port of the Arcana template from HTML5 UP, turning the classic responsive site layout into a configurable, multilingual Hugo site.
What is Hugo HTML5 UP Arcana?
Hugo HTML5 UP Arcana is a theme for the Hugo static site generator that ported the Arcana template from HTML5 UP. It takes the original HTML, CSS, and responsive design and adapts it to Hugo's template structure, so you can manage content as Markdown files and generate a static website. The theme outputs a standard multi-page site with a configurable homepage, sidebar layout, and working contact form. It is developed by the GitHub user half-duplex and available on GitHub with a live demo.
Key Features
- Configurable homepage sections — The homepage elements are defined in
data/homepage.yml, where you can choose which sections appear and configure their content. - Multilingual support — Template strings like the contact form are in the
i18ndirectory, and you can define per-language homepage configurations such asdata/en/homepage.ymlfor English. - Custom Sass styling — Your site's
assets/sass/custom.scssis included at the end of the theme'smain.scss, letting you override styles with your own CSS. - Active menu item support — The theme includes mostly-empty
_index.mdfiles that are required for highlighting the current navigation item. - Live demo and showcase — A working demo is available at sec.gd/hugo/themes/arcana/, and the README lists real sites using the theme, including Alichampi, the Odesa Red Cross, and BOMnipotent.
Who is it for?
- Hugo developers — who need a ready-made theme with a business/sidebar layout and want to control homepage blocks through YAML rather than editing template files.
- Small businesses and organizations — that want a static informational site with sections, a contact form, and clear menu navigation.
- Nonprofit and volunteer groups — such as the Odesa Red Cross example, which uses the theme for an organizational website with multiple content areas.
Use cases
- Personal portfolios: Publish project showcases and an about page in a clean Arcana layout.
- Business websites: Present services, team members, and contact details using the configurable homepage sections.
- Multilingual content sites: Use the i18n translations and per-language YAML to deliver the same site in multiple languages.
How does it work?
After setting up the theme, edit data/homepage.yml to pick which homepage sections are shown. For multilingual sites, create language-specific YAML files inside the language folder. Keep the provided _index.md files in place for correct menu highlighting, and add your own styles via assets/sass/custom.scss.
Alternatives
- hugo-html5up-alpha — another Hugo port of an HTML5 UP template, which this theme borrowed structure and code patterns from.
