Creative Theme is a Hugo port of Start Bootstrap's Creative theme, delivered as a one-page portfolio for creatives with a responsive project grid, hover effects, and full-page portfolio item modals.
What is Creative Theme?
Creative Theme is a Hugo theme that transforms a configuration file and YAML data files into a static one-page portfolio site. It takes input from a config.toml file for site-wide settings, YAML files under data/projects for portfolio entries, and images placed in static/img; it outputs a fully static HTML site generated by Hugo. The theme was created by digitalcraftsman as a port of David Miller's original Bootstrap theme, and is released under the Apache License 2.0. Note that the theme is no longer actively maintained, as stated at the top of the repository.
Key Features
- One-page layout — Everything sits on a single page with distinct content sections: hero, services, portfolio, and more.
- Responsive portfolio grid — The portfolio uses a responsive grid that reflows across screen sizes and features hover effects on project thumbnails.
- Portfolio item modals — Clicking a project opens a full-page modal populated from the project's YAML data, including client, category, and description.
- Services section with Font Awesome — Capabilities are defined in the config as list entries, each using a Font Awesome icon class, a title, and a description.
- Hugo native configuration — Site-wide customization happens through a standard
config.toml, and projects come from YAML data files indata/projects. - Easy image replacement — The hero background is a single
header.jpginstatic/img; swapping that one file changes the hero image. - Markdown in project descriptions — Project descriptions support Markdown syntax, including links like
[text](//url.to/source). - Apache 2.0 licensed — The theme is free to use, modify, and distribute.
Who is it for?
- Freelance designers and artists — Set up a polished one-page portfolio showing off their best work without building a site from scratch.
- Photographers — Use the portfolio grid and modals to present photo projects with client and category details.
- Hugo users — Anyone already using Hugo can drop this theme into their
themesfolder, copy the example config and data files, and have a portfolio running quickly.
What can you do with Creative Theme?
- Add portfolio projects — Create a new YAML file in
data/projectswith fields likemodalID,title,client,category, and a description, then add a 650 x 350 px image tostatic/img/portfolio. - List your services — Define services with Font Awesome icons, titles, and descriptions directly in
config.tomlunder[params.services.list]. - Customize the hero — Replace
static/img/header.jpgwith your own image to give the page a personal opening visual.
How does Creative Theme work?
After cloning the repository into your themes folder, copy the config.toml from the example site to your Hugo root, copy the projects data folder into data, and replace the hero image. Then run hugo server and visit localhost:1313 to preview the site.
Pros and cons
- Pros: Open source under Apache 2.0, easy to configure via one config file, portfolio data in simple YAML, responsive grid and modal interactions match a popular Bootstrap design.
- Cons: The theme is no longer maintained, as stated on the repository, meaning no further feature updates or fixes are planned.
Alternatives
- Start Bootstrap's original Creative theme — the static HTML/CSS version on which this Hugo port is based, useful for those who don't use Hugo.
FAQ
Is Creative Theme free to use?
Yes. The theme is released under the Apache License 2.0, so you can freely use, modify, and distribute it, including for commercial projects.
Is Creative Theme still maintained?
No. The repository states: "Please note that this theme is no longer maintained." That means users should expect no further updates or fixes from the original developer.
What image dimensions should portfolio images be?
Portfolio images should be 650 x 350 pixels. Place them in static/img/portfolio and set the img field in your project's YAML file to the filename.
How do I add a new portfolio project?
Create a new YAML file in data/projects with a unique integer modalID, plus fields like title, date, client, category, and description. Add a matching image to static/img/portfolio and the project will appear in the grid.
Does the theme support Markdown in project descriptions?
Yes. The description field in a project's YAML file supports Markdown syntax, including links written like [text](//url.to/source).
