Hugo HTML5up Alpha is a free, open-source Hugo theme that ports the HTML5 UP Alpha design into a configurable static site generator template for blogs, landing pages, and personal websites.
What is Hugo HTML5up Alpha?
Hugo HTML5up Alpha is a Hugo theme created by dewittn that recreates the design of the HTML5 UP Alpha template. It takes Hugo content and configuration as input and outputs a static website with a modern, responsive single-page-style layout. The theme is hosted on GitHub and licensed under Creative Commons Attribution 3.0.
Key Features
- Customizable homepage — Five sections (Banner, Highlight, Features, Blog, Call to Action) can be enabled, disabled, and edited through
data/homepage.yml, including titles, content, icons, and accent colors. - Blog support — Includes templates for post listings and single pages, with a configurable "Recent Posts" section and a post count setting.
- Taxonomies and page bundles — Uses Hugo's native taxonomy system for tags/categories and organizes content with page bundles.
- Disqus comments — Comment integration activates when
disqusShortnameis set inconfig.toml; comments are hidden otherwise. - Font Awesome 5 icons — Feature items and buttons use Font Awesome icon classes such as
fa-bolt,fa-chart-area, andfa-lock. - Menus and submenus — Navigation supports multi-level menus defined in Hugo's site configuration.
- OpenGraph metadata — Pages include OpenGraph tags for better sharing on social platforms.
Who is it for?
- Hugo users looking for a ready-made theme with the classic HTML5 UP Alpha design, saving time from building a site from scratch.
- Bloggers and content creators who want a clean blog layout with taxonomy support and optional Disqus comments.
- Small business or personal sites that need a ready-to-use landing page with a banner, feature grid, and call-to-action section, all editable via YAML data files.
What can you do with it?
- Personal bloggers: Publish posts and organize them with tags and categories; enable comments by adding a Disqus shortname to the site config.
- Landing page owners: Toggle and customize the Banner, Highlight, Features, Blog, and Call to Action sections through
data/homepage.ymlwithout touching HTML templates. - Event or product launches: Use the Banner with two buttons (e.g., "Sign Up" and "Learn More") and the Call to Action section to capture beta signups.
How does it work?
To try the demo, clone the repository and run hugo server from the exampleSite directory. Homepage content is driven by data files: data/homepage.yml controls the five sections, and data/globalheader.yml configures the site-wide header. The cover image is expected at static/images/banner.jpg in your Hugo project; because the path is hard-coded, replacing the file there changes the banner.
Pros and cons
- Free and open source under CC BY 3.0, with the original design credited to HTML5 UP.
- No JavaScript framework dependencies; the theme relies on Hugo's rendering and static assets.
- The cover image path is hard-coded, so it must reside at
static/images/banner.jpgto display. - Disqus comments are entirely hidden unless a
disqusShortnameis set, which may be confusing for users unfamiliar with Hugo config.
FAQ
Is Hugo HTML5up Alpha free?
Yes, the theme is licensed under the Creative Commons Attribution 3.0 License, so you can use and modify it freely as long as you credit the source.
How do I change the cover image?
Add your image to the static/images/banner.jpg path in your Hugo application. The theme hard-codes this URL, so no template edits are needed—just replace the file.
Can I remove a homepage section?
Yes, each of the five homepage sections in data/homepage.yml has an enable flag. Set it to false to hide that section, and leave the Blog header text blank to remove the entire blog section.
How do I enable comments?
Set disqusShortname = "your-shortname" in your config.toml. The comments section will then appear on blog posts; it is hidden by default when the value is absent.
How do I run the demo locally?
Clone the repository, change into the exampleSite directory, and run hugo server --themesDir ../.. to serve the demo site on your local machine.
