Hugo Apps Theme

Hugo Apps Theme is a Hugo theme for showcasing web apps, letting you publish standalone HTML app pages alongside regular content on a static site. It is an open-source project created by gonnux and released under the MIT License, designed to make posting web apps as simple as dropping an index.html into a page directory.

What is Hugo Apps Theme?

Hugo Apps Theme is a Hugo-based static site theme built specifically for developers who want to present their web applications as individual pages. It accepts standard Hugo content files (Markdown or HTML) plus optional app folders containing index.html, app.js, and app.css, and renders them into a responsive, Disqus-enabled website. The theme is inspired by Hugo Coder, a minimalist blog theme, and adds a full page mechanism so apps with complete HTML documents can be embedded without Hugo altering the tags.

Key Features

• Responsive design — Pages and apps automatically adapt to different screen sizes, with no separate mobile template to maintain.
• Full-page embedding — Set the full front matter value to true to post an index.html that already includes html, head, and body tags without Hugo stripping or rewriting them.
• Disqus comments — Enable per-page comment threads by setting enableDisqus in front matter and providing a disqusShortname in the site config; full-page posts are exempt from comments even when the flag is true.
• Google Analytics & Auto Ads — Configure a googleAnalytics tracking ID for standard analytics, and a googleAutoAds parameter in the params section for AdSense ads.
• HighlightJS — Code blocks in Markdown pages are highlighted client-side using HighlightJS, with no extra setup required.
• Open Graph tags — The theme outputs Open Graph meta tags for social media sharing of each page.
• CJK support — A hasCJKLanguage config flag optimizes the site for Chinese, Japanese, or Korean text.
• Menu and index customization — Define navigation via menu.main entries (name, url, weight) and personalize the index page with an avatar, author, and info string.

Who should use Hugo Apps Theme?

• Web app developers — Publish standalone HTML5 apps or demos on a personal static site without needing to remove the surrounding document structure, thanks to the full page flag.
• Hugo static site users — Add an apps section to an existing Hugo blog or portfolio by cloning the theme and setting theme = "hugo-apps-theme" in config.toml.
• Indie makers and freelancers — Use the index page's avatar, author, and info fields to introduce themselves, then link out to multiple app projects through the main menu.

What can you do with Hugo Apps Theme?

• Showcase interactive demos: Create a directory per app (for example, apps/myapp/) containing index.html, app.js, and app.css, and Hugo Apps Theme will render it as a full-page embed, so visitors can run the app directly on the site.
• Blend Markdown and HTML content: Use hugo new about.md for text pages and hugo new apps/myapp.html for HTML-backed app pages, controlling order with the weight front matter value.
• Track and engage your audience: Turn on Disqus for non-full pages to collect comments, and enable Google Analytics or Google Auto Ads through site-wide config to understand traffic or monetize the page.

How does Hugo Apps Theme work?

The setup follows a three-step flow: first clone the repository into the themes folder with git clone https://github.com/gonnux/hugo-apps-theme, then set theme = "hugo-apps-theme" in your site's config.toml, and finally create content pages with either hugo new or by manually placing HTML files. Per-page behavior is controlled entirely through front matter variables such as title, showTitle, weight, full, enableDisqus, and img.

Alternatives

• Hugo Coder — A minimalist blog theme for Hugo that inspired Hugo Apps Theme; it focuses on clean blog posts rather than full-page app embedding.

Pros and cons

• Pros: Simple, focused feature set; no build step beyond standard Hugo; supports full-page HTML apps; integrates Disqus, Google Analytics, HighlightJS, Open Graph, and responsive design out of the box.
• Cons: The only documented limitation is that full-page posts never show Disqus comments, even if the enableDisqus flag is set.

FAQ

How do I install Hugo Apps Theme?

Run git clone https://github.com/gonnux/hugo-apps-theme inside your site's themes directory, then add theme = "hugo-apps-theme" to config.toml. After that, use hugo new to create pages as usual.

Can I post a web app with its own HTML structure?

Yes. Set full = true in the app page's front matter and place an index.html (with html, head, and body tags) in the app's page directory. Hugo will not strip or modify the document structure.

Does Hugo Apps Theme support comments on full-page apps?

No. Even if you set enableDisqus = true, full-page posts never display Disqus comments. Comments are only available on regular Markdown or HTML pages where full is not enabled.

What configuration options are available?

config.toml supports baseURL, hasCJKLanguage, disqusShortname, googleAnalytics, title, copyright, and a params block for googleAutoAds, avatar, author, and info. Navigation is handled through menu.main entries with name, url, and weight.

Is Hugo Apps Theme free?

Yes. It is licensed under the MIT License, which allows free use, modification, and distribution.