Hugolify theme

Performance & SEO

• 100/100 Google PageSpeed Insights
• Lazy loading and JS defer
• PostCSS + PurgeCSS
• Responsive images and WebP
• SEO friendly

Content & UX

• Accessibility friendly
• Blocks
• Forms (Netlify or other)
• Responsive design
• Search
• Shortcodes

Architecture

hugolify-theme provides layouts, content types, i18n and archetypes only — no CSS, no JavaScript.

Styling and JS are provided by a separate styling module, declared in the site config. This makes it possible to swap the entire CSS/JS layer without touching the theme or templates.

Official modules

Module	CSS	JS
hugolify-theme-bootstrap	Bootstrap 5 + SASS	Bootstrap 5 + Vanilla JS
hugolify-theme-design-system (wip)	Vanilla CSS / Design tokens	Vanilla JS

Custom styling

You can build your own styling layer in two ways:

• As a Hugo module (hugolify-theme-tailwind, hugolify-theme-bulma…) — sharable, versionable, swappable via the site config.

• Directly in the site — add assets/sass/ (or assets/scss/ or assets/css/) and assets/js/ to your project. Hugo merges assets from all sources, so your files take priority over the module.

The contracts to respect in either case:

• CSS classes used by templates are semantic (btn, col-small, modal, badge-primary…) — no framework-specific names
• JS hooks are js-* CSS classes — no data-framework-* attributes
• JS entry point: assets/js/main.js
• SASS entry point: assets/sass/main.sass (or main.scss or main.css)

JS libraries

• Chart.js
• CookieConsent
• LeafletJS OpenStreetMap
• SplideJS Carousel
• Tobii Lightbox
• Pagefind
• Rellax parallax

Multilingual Support

• English
• French

Install

Use the Hugolify starter template:

https://github.com/Hugolify/hugolify-template/

Or add as Hugo modules. Edit config/_default/module.yaml:

imports:
  - path: github.com/hugolify/hugolify-theme/v2
  - path: github.com/hugolify/hugolify-theme-bootstrap

To switch styling module, replace the second import:

imports:
  - path: github.com/hugolify/hugolify-theme/v2
  - path: github.com/hugolify/hugolify-theme-design-system

Migration from v1

In v1, Bootstrap (CSS and JS) was bundled directly inside hugolify-theme. In v2, the theme is framework-agnostic — styling is provided by a separate module declared explicitly in the site config (see Install above).

Other breaking changes:

• JS hooks: data-bs-toggle/target → class="js-*" + data-target
• Grid classes: col-md-* → col-small, col-medium, col-large, col-xsmall
• Badge states: text-bg-* → badge-*

Demo

https://demo.hugolify.io/

Documentation

https://www.hugolify.io/docs/

Licensing

Hugolify is free for personal or commercial projects (MIT license)