Shapez Theme is an open-source Hugo blog theme that leans on inline SVG graphics to create a modern, responsive static site. Built as a personal project and released publicly on GitHub, it offers a cheery visual style distinct from conventional pixel-image templates, with a timeline homepage, reading-time display, and a dedicated playground section for unstructured content.
What is the Shapez Theme for Hugo?
Shapez Theme is a static-site theme for the Hugo generator, designed for personal blogs and lightweight content sites. It takes standard Hugo content written in Markdown or HTML and renders it into a fully static website with heavy use of inline SVG instead of raster images. The theme is maintained by user djuelg, who released the source on GitHub and documented the setup process with a sample configuration file. It is listed on the Hugo Themes gallery and includes a live demo, with a caveat that the demo may have broken links due to absolute/relative path issues.
Key Features
- Inline SVG graphics — The theme renders icons and visual elements as responsive inline SVG, making it lightweight and scalable, though customizing it requires familiarity with SVG markup.
- Homepage timeline — Posts are displayed in a timeline arrangement on the homepage, providing a chronological overview of content at a glance.
- Single pages — Standard Hugo single-page templates support long-form articles, with content written in Markdown or HTML.
- Playground section — A dedicated area for unstructured content, separate from regular blog posts, useful for experiments or non-article material.
- Reading time — Each article shows an estimated reading time, helping readers gauge article length before clicking.
- Responsive navigation — The layout switches between a sidebar and a top bar depending on the viewport aspect ratio, adapting to desktop and mobile screens.
- Responsive web design — The theme targets common screen sizes and smartphones, with no full Internet Explorer support — a known limitation the author invites others to fix via merge requests.
- Open-source configuration — A sample-config.toml file is included so users can copy it to their Hugo project and customize site settings quickly.
Who is it for?
- Personal bloggers who want a distinctive, non-standard blog design with a timeline layout and reading-time indicators.
- Hugo users comfortable with TOML configuration files who appreciate a lightweight theme with no heavy JavaScript or framework dependencies.
- Developers learning SVG who want a real-world theme to study and modify, since the theme's visuals are built from inline SVG that can be adapted with SVG knowledge.
- Open-source contributors looking for a small, approachable project — the author notes the missing comment section and Internet Explorer support as areas for contribution.
What can you do with the Shapez Theme?
- Bloggers: Publish articles with automatic reading time and organize them on a timeline homepage that showcases your latest posts chronologically.
- Tinkerers: Use the Playground section to publish visual experiments, notes, or other content that doesn't fit standard blog posts.
- Theme developers: Fork the GitHub repository and use the sample-config.toml to kick-start a custom Hugo theme, adapting the SVG icons and responsive navigation to your own needs.
How do you get started with Shapez Theme?
- Copy the sample-config.toml file from the theme repository to your Hugo project folder.
- Replace that file with your own configuration file, or overwrite it with your site settings.
- Adapt the configuration values — such as site title, menu, and content parameters — according to your preferences.
- Run Hugo's standard build process to generate your static site. The theme requires no build step beyond Hugo itself.
FAQ
Is Shapez Theme free?
Yes, the theme is open source and available on GitHub under the repository djuelg/Shapez-Theme. You can use it for personal or commercial projects without licensing fees.
Does Shapez Theme support Internet Explorer?
No, the author states the theme isn't built with full Internet Explorer support. They explicitly invite merge requests from contributors who want to add IE compatibility.
Does Shapez Theme include a comment section?
No, the comment section is listed as a "nice to have" feature and is not currently implemented. The theme ships without built-in commenting, so you'd need to integrate a third-party service yourself.
What do I need to customize this theme?
You need basic knowledge of SVG because the theme relies heavily on inline SVG graphics. The site's icons and visual elements are coded in SVG, so adapting them requires editing SVG markup.
Which Hugo version does Shapez Theme require?
The theme does not specify a minimum Hugo version on its page. It is designed for modern Hugo static sites and uses standard Hugo templates, so it should work with current Hugo releases, but check the repository for any version notes.
