Hugolify theme

Hugolify theme is a framework-agnostic core theme for Hugo that supplies layouts, content types, i18n, and archetypes while deferring all CSS and JavaScript to swappable styling modules.

What is Hugolify theme?

Hugolify theme is a free, MIT-licensed static-site theme for Hugo, the Go-based static site generator. It ships only structure: layouts, content types, i18n strings, and archetypes; no CSS or JavaScript is included. Styling and interactivity come from a separate module, such as hugolify-theme-bootstrap (Bootstrap 5 + SASS), which you declare in the site config. The project is maintained by the Hugolify team and offers a demo at demo.hugolify.io.

Key Features

• Framework-agnostic core — The theme defines no CSS or JS; a styling module (Bootstrap 5 + SASS or a vanilla design system) is plugged in via module.yaml, letting you swap the whole look without touching templates.
• 100/100 PageSpeed — The theme reports perfect Google PageSpeed Insights scores, with lazy loading, deferred JS, PostCSS + PurgeCSS, and responsive WebP images.
• Semantic CSS contracts — Templates use framework-neutral classes like btn, col-small, and badge-primary, while JS hooks use js-* classes, so any styling solution can be applied.
• Content blocks & forms — Includes reusable page blocks, form handling through Netlify or other backends, and a built-in search integration.
• Multilingual by default — Ships with English and French translations; i18n strings are part of the core theme.
• Bundled JS libraries — Chart.js, CookieConsent, LeafletJS OpenStreetMap, SplideJS Carousel, Tobii Lightbox, Pagefind, and Rellax parallax are integrated for charts, maps, carousels, lightboxes, and search.
• Asset overrides — Add assets/sass/ and assets/js/ in your site to override module assets; Hugo merges them so your files take precedence.

Who is it for?

• Hugo developers who want a clean, semantic base to build custom sites and prefer to choose their own CSS framework (Bootstrap, Tailwind, Bulma, or custom SASS).
• Web agencies delivering multilingual, SEO-focused corporate or content sites who need blocks, forms, and search out of the box.
• Teams maintaining existing Hugolify v1 sites who need a migration path to the v2 module architecture, with clear breaking-change notes for hooks and grid classes.

What can you do with Hugolify theme?

• Build a corporate or content site: use the starter template, add the Bootstrap styling module, and get a responsive site with search, forms, and performance optimizations.
• Create a custom design system: write your own Hugo module or site-level SASS/JS using the documented contracts (assets/sass/main.sass entry point, js-* hooks) to style the theme your way.
• Launch a multilingual site: the included English and French i18n strings allow quick translation, and the theme's structure supports more languages by extension.

How does Hugolify theme work?

Installation is either via the Hugolify starter template or by adding the theme and a styling module as Hugo imports in config/_default/module.yaml. Two imports are needed: github.com/hugolify/hugolify-theme/v2 and a styling module like github.com/hugolify/hugolify-theme-bootstrap. To switch styling, replace the second import with another module, such as the upcoming hugolify-theme-design-system.

Pros and cons

• Pros: Free under MIT license; excellent PageSpeed scores; styling is fully swappable; multilingual support.
• Cons: The core theme alone renders unstyled without a styling module; v2 migration requires updating Bootstrap-specific hooks to generic js-* classes and renaming grid/badge classes.

Pricing

Hugolify is free for personal or commercial projects under the MIT license.

Alternatives

Blowfish and PaperMod are other popular Hugo themes; Blowfish offers a feature-rich start for content sites, while PaperMod focuses on minimal, fast blogs.

FAQ

Is Hugolify free?

Yes, Hugolify is released under the MIT license and is free for personal or commercial projects.

Does Hugolify include CSS and JavaScript?

No, the core hugolify-theme v2 contains layouts, content types, i18n, and archetypes only. CSS and JS come from a separate styling module like hugolify-theme-bootstrap.

What styling modules are available?

Officially, hugolify-theme-bootstrap (Bootstrap 5 + SASS with Vanilla JS) and a work-in-progress hugolify-theme-design-system based on vanilla CSS design tokens. You can also create your own.

How do I migrate from Hugolify v1 to v2?

Replace JavaScript hooks using data-bs-toggle and data-bs-target with class="js-*" plus data-target, update grid classes from col-md-* to col-small, col-medium, col-large, and change badge classes from text-bg-* to badge-*.

Does Hugolify support search?

Yes, Hugolify integrates Pagefind for search, along with a search documentation page.