https://github.com/hugolify/hugolify-theme
Hugolify theme is an Hugo theme with Bootstrap 5
https://github.com/hugolify/hugolify-theme
a11y bootstrap hugo hugo-theme hugolify i18n
Last synced: 2 months ago
JSON representation
Hugolify theme is an Hugo theme with Bootstrap 5
- Host: GitHub
- URL: https://github.com/hugolify/hugolify-theme
- Owner: Hugolify
- License: mit
- Created: 2022-10-03T12:32:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2026-01-15T14:46:37.000Z (5 months ago)
- Last Synced: 2026-01-17T22:17:40.449Z (5 months ago)
- Topics: a11y, bootstrap, hugo, hugo-theme, hugolify, i18n
- Language: JavaScript
- Homepage: https://www.hugolify.io
- Size: 2 MB
- Stars: 21
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Hugolify theme
[](https://www.hugolify.io/)
## Performance & SEO
* 100/100 Google PageSpeed Insights
* Lazy loading and JS defer
* PostCSS + [PurgeCSS](https://www.hugolify.io/docs/getting-started/purgecss/)
* Responsive images and WebP
* SEO friendly
## Content & UX
* Accessibility friendly
* [Blocks](https://www.hugolify.io/docs/blocks/)
* [Forms](https://www.hugolify.io/docs/getting-started/form/) (Netlify or other)
* Responsive design
* [Search](https://www.hugolify.io/docs/getting-started/search/)
* [Shortcodes](https://www.hugolify.io/docs/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](https://github.com/hugolify/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:
Or add as Hugo modules. Edit `config/_default/module.yaml`:
```yaml
imports:
- path: github.com/hugolify/hugolify-theme/v2
- path: github.com/hugolify/hugolify-theme-bootstrap
```
To switch styling module, replace the second import:
```yaml
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
## Documentation
## Licensing
Hugolify is free for personal or commercial projects (MIT license)