Hugo Cards is a minimal, Bootstrap-based Hugo theme for content-focused card layouts, ported from the Webjeda-cards template and designed to showcase posts with featured images. It turns Markdown content with front-matter into a responsive static website with a card grid, sidebar options, and built-in social and analytics integrations.
What is Hugo Cards?
Hugo Cards is a Hugo theme that renders blog content as a responsive card grid, using Bootstrap for layout and styling. It takes Hugo Markdown content with front-matter parameters such as img, categories, and author, and produces a static website with a sidebar, footer social links, and optional Facebook integration. The theme is hosted on GitHub under the repository bul-ikana/hugo-cards and is also listed with the hacktoberfest topic.
Key Features
- Responsive Bootstrap layout — The theme is built on Bootstrap, automatically adapting card grids to desktop, tablet, and mobile screens.
- Featured image support — Each post can set an
imgfront-matter parameter for a featured image; page resources are supported, so the image can live alongsideindex.mdin the same directory. - Profile sidebar — Replace the default "Recent articles" sidebar with a profile sidebar that displays custom key-value attributes; this works on card posts and appears at the top on mobile devices.
- Social links — Footer links can be configured for Facebook, Quora, Twitter, GitHub, and email (opening a
mailto:link). - Facebook like box — Optional Facebook like box with configurable app ID, page URL, and page title; enable it with
fbLikeBox = "yes". - Analytics and comments — Google Analytics support for both Universal Analytics and GA4 (select via
params.analytics.type), plus Disqus comment threads via thedisqusparameter. - Customization — Include a
custom.cssfile for style overrides, add extra CSS files through thecustom_cssparameter, and change the fallback featured image withdefaultImage. - Hide post metadata — A
[params.post.meta] isHidden = truesetting removes post metadata from card displays.
Who is it for?
- Bloggers — Writers who want a clean, minimal card-based layout to display their posts with featured images and social sharing links.
- Developers — Hugo users who need a lightweight Bootstrap theme they can extend with
custom.cssand custom configuration parameters. - Portfolio owners — People showcasing projects or articles because the card grid with featured images works well for visual content displays.
What can you do with Hugo Cards?
- Publish a personal blog — Add posts with front-matter for title, date, image, categories, and author; the theme generates a responsive card index and individual post pages.
- Create a profile-oriented site — Turn on the profile sidebar to display personal details like name and interests alongside card posts, with the sidebar moving to the top on mobile.
- Integrate social and analytics — Connect Google Analytics, Disqus, and up to five social links in the footer without writing custom code.
How does Hugo Cards work?
Hugo Cards works as a standard Hugo theme: place content files in a Hugo site's content directory, set the theme in config.toml, and run Hugo to generate a static site. Configuration is done through config.toml parameters, and per-post behavior is controlled by front-matter fields like img and profile. Detailed examples are provided in the exampleSite configuration file.
FAQ
Is Hugo Cards free to use?
Yes, Hugo Cards is an open-source Hugo theme hosted on GitHub. The repository metadata describes it as a minimal theme and lists the "hacktoberfest" topic, indicating community contributions are welcome. No pricing or license details are stated on the page.
Does Hugo Cards support featured images?
Yes, each post can specify an image via the img front-matter parameter. The theme supports Hugo page resources, so the image should be in the same directory as the post's index.md file. If no image is set, a default image from static/images is used, which you can change with the defaultImage config parameter.
Can I use the profile sidebar on all pages?
No, the profile sidebar only works on card posts. Normal pages, such as About or Contact, will continue to use the default sidebar (Recent articles) even when the profile sidebar is enabled.
How do I enable Google Analytics in Hugo Cards?
Set the analytics parameter in config.toml to your Google Analytics tracking ID. By default, Universal Analytics is used; to switch to GA4, set params.analytics.type to GA4. Disqus is enabled separately by setting the disqus parameter to your Disqus shortname.
