Hugo Apps Theme

Hugo Apps Theme is a Hugo static-site theme for creating pages that host and present web apps, turning a Hugo site into a portfolio of runnable app demonstrations. This open-source (MIT) theme by gonnux is built for developers who want to publish standalone HTML web apps alongside regular Hugo content.

What is Hugo Apps Theme?

Hugo Apps Theme is a theme for the Hugo static site generator that makes it easy to post web apps. It takes content files in Markdown or HTML, arranged as regular Hugo pages or dedicated app folders, and renders them as clean, responsive pages on your site. It supports a special full page mode that lets you embed a complete HTML document, including head and body tags, without stripping them. This is ideal for hosting self-contained web apps. The theme is inspired by the Hugo Coder theme and is released under the MIT License.

Key Features

• Responsive design — The layout adapts to desktop and mobile screens, giving your app pages a consistent viewing experience.
• Full-page embedding — Set the front matter field full=true in a page to include an entire index.html file with its own head and body tags, preserving any custom markup.
• Disqus integration — Enable comments on any non-full page by setting enableDisqus=true and supplying a disqusShortname in config.toml.
• HighlightJS — Code blocks are automatically highlighted using Highlight.js, useful for posting code snippets alongside your apps.
• Google Analytics — Track site traffic by adding your Google Analytics tracking ID to config.toml.
• Google Auto Ads — Support for Google Auto Ads via the googleAutoAds parameter in config.toml, letting you display ad slots on your pages.
• Open Graph meta tags — Pages generate Open Graph metadata, improving link previews when shared on social media.
• Front matter controls — Each page can set title, showTitle, weight (for sorting), img (logo image), and enableDisqus independently.

Who is it for?

• Web app developers — If you build small browser-based tools, games, or demos, this theme gives you a simple way to showcase them on your own Hugo site.
• Tech bloggers — Write blog posts about your projects and embed runnable app demos right on the page using full page mode.
• Open-source maintainers — Use it as a minimal documentation or landing page for a tool you maintain, with a profile section for your avatar, name, and bio.

What can you do with it?

• Publish a standalone web app — Create a folder like apps/myapp, drop in index.html, app.js, and app.css, then add a page for it. The theme renders your app in a clean wrapper.
• Customize your homepage — Set the avatar, author, and info parameters in config.toml to show a personal profile at the top of the index page.
• Add comments to app posts — Turn on Disqus for individual pages to let visitors discuss your work. Note that full page mode does not support Disqus.
• Monetize with ads or track analytics — Plug in Google Analytics and Google Auto Ads IDs to measure usage or display ads across your site.

How does the theme work?

First, install it by cloning the repository from GitHub into your Hugo themes directory and adding theme = hugo-apps-theme to your config.toml. For each app, run hugo new apps/myapp.md or create an HTML page with the required front matter. For full-page apps, you create an apps/myapp folder containing index.html, app.js, and app.css, then set full=true in the page's front matter so the theme embeds the complete file without stripping its head and body tags.

FAQ

Is Hugo Apps Theme free to use?

Yes, the theme is open-source and licensed under the MIT License, so you can use, modify, and redistribute it freely for personal or commercial projects.

Can I use it with GitHub Pages or Netlify?

Since it is a standard Hugo theme, it works anywhere Hugo builds, including GitHub Pages, Netlify, and other static hosting services. You just need to install Hugo and the theme on your publishing workflow.

Does full page mode support Disqus?

No, the theme documentation states that even if you set enableDisqus to true, you cannot enable Disqus on a full page. Disqus only works on pages without the full=true flag.

Does the theme support CJK languages?

Yes, config.toml accepts the hasCJKLanguage boolean option, which tells Hugo to treat the site as having Chinese, Japanese, or Korean text for correct font and line-break handling.

What is the community contribution process?

The project accepts pull requests to the dev branch. You can fork the repository, make changes, and submit a PR for review.