Silhouette Hugo is a responsive blog theme for the Hugo static site generator, built on Bootstrap 4.1 by Matt Button and shared under the MIT License.
What is Silhouette Hugo?
Silhouette Hugo is a responsive blog theme for Hugo that renders Markdown content into a Bootstrap 4.1–based site with a home page, post pages (with optional feature images), and a footer. The theme was created by Matt Button, first hacked together in 2016 with Bootstrap 3 for his personal blog and rebuilt in 2018 with Bootstrap 4.1. The silhouette imagery comes from an Unsplash photo by Karl Magnuson.
Key Features
- Bootstrap 4.1 foundation — The layout is built on Bootstrap 4.1, giving a responsive grid and components without extra CSS frameworks.
- Feature image support — Posts can include a feature image; the theme shows a banner header when one is set and a clean layout when it is not.
- ExampleSite starter content — The repository ships an exampleSite folder with sample content you can copy into a fresh Hugo site to see the theme in action.
- Simple configuration — Activate the theme by adding
theme = "silhouette-hugo"to your config.toml; no other setup is required. - MIT licensed — Free to use and modify under the MIT License, with attribution requested.
- Home page blog index — The home page lists posts in a responsive, card-like layout.
- Dedicated footer — A separate footer section is included in the template structure.
Who is it for?
- Hugo bloggers who want a clean, responsive blog layout without building a theme from scratch.
- Developers moving to Hugo who need an example site and a working config to learn the platform.
- Self-hosted writers who prefer Bootstrap-based design and want to customize a theme with standard tools.
What can you do with Silhouette Hugo?
- Start a personal blog: Create a Hugo site, clone this theme, copy the exampleSite content, and run
hugo serve -Dto preview locally. - Learn Hugo theming: Study the theme's structure to understand how Hugo layouts, partials, and templates are organized.
- Create a responsive reading experience: Publish posts with or without feature images and rely on Bootstrap's responsive grid for mobile readers.
How does Silhouette Hugo work?
The quickstart flow uses Hugo's standard site creation: run hugo new site SITENAME, clone the theme into the themes directory, set the theme in config.toml, and optionally copy the exampleSite content. Then run hugo serve -D to serve drafts locally.
FAQ
Is Silhouette Hugo free?
Yes. The theme is distributed under the MIT License, so it is free to use, modify, and redistribute. Attribution is requested if you use it in a public project.
How do I install Silhouette Hugo?
Create a new Hugo site, clone this repository into the themes folder, add theme = "silhouette-hugo" to your config.toml, and run hugo serve -D. A step-by-step quickstart is included in the README.
Does Silhouette Hugo support feature images?
Yes. Posts can include a feature image, and the theme renders a banner header when one is present. If no feature image is set, the post uses a simplified layout.
Who created Silhouette Hugo?
Matt Button created the theme, originally in 2016 for his own blog and rebuilt in 2018 with Bootstrap 4.1. He publishes it on GitHub for the Hugo community.
