Piercer

Piercer is a customizable, fast Hugo theme with a mobile-first design that defaults to the Dracula color palette and builds static sites without JavaScript.

What is Piercer?

Piercer is an open-source Hugo theme created by Daniel Kvist. It takes Hugo content written in Markdown—posts, single pages, and home sections—and outputs a static, SEO-friendly website. The theme is designed to be fast and highly customizable through the Hugo config file. Note that the project is archived, so it no longer receives active maintenance, but the source remains available on GitHub for anyone to use or fork.

Key Features

• Mobile-first design — Layouts are built for small screens first, and the hamburger menu works without JavaScript.
• Customizable color palette — The default palette is based on Dracula, and you can override all 12 colors (text, background, accent, foreground, separator, cyan, green, orange, pink, purple, red, yellow) via the params.palette section.
• Font size and family control — Set base, paragraph, and heading sizes (base, p, h4, h3, h2, h1) with params.fontsizes, and optionally load a Google Font with params.googlefonts.
• PostCSS integration — Enable PostCSS processing by setting params.postcss to true; the postcss-cli npm package must be installed first.
• Optional service worker caching — Turn on offline resource caching by enabling params.serviceWorker, a simple boolean toggle.
• Custom CSS support — Add your own styles by placing a custom.css file in the assets/css folder of your project.
• Built-in contact form — The configurable form supports Netlify form handling when you deploy with Netlify, with custom labels and placeholders.
• Three archetypes — Includes default, post, and section archetypes for single pages, blog posts, and home sections.

Who is it for?

Bloggers who want a fast, static personal site with a distinct dark Dracula look. Hugo developers who want a theme they can tailor entirely from config.toml without touching markup. Designers who want a mobile-first starting point they can restyle with custom CSS and optional PostCSS.

What can you do with Piercer?

• Personal blog: Write posts with tags and author metadata; the theme renders list pages as cards with title, author, date, description, and tags.
• Portfolio or landing page: Assemble a homepage from sections, each configurable with a bottom border color, plus a call-to-action button and background image.
• Contact page: Use the built-in form, which integrates with Netlify forms, and show contact details like email, phone, Skype, and address.

How does Piercer work?

To install, clone the repository into your Hugo site's themes directory (or add it as a Git submodule), set theme = "piercer" in config.toml, then create content using the included archetypes. The theme reads params for palette, fonts, CTA, form, contact, social networks, and more, and Hugo builds the static output.

FAQ

Is Piercer still maintained?

No. The project is archived and no longer receives updates or support from the author, though pull requests and forks are still possible from the GitHub repository.

How do I change the color palette?

Edit the params.palette section in config.toml and set any or all of the 12 color values to your preferred hex codes. The defaults come from the Dracula theme.

Does Piercer work without JavaScript?

The hamburger menu is CSS-only, so it works with JavaScript disabled. Some optional features, like the contact form and service worker caching, may require JavaScript depending on your configuration and hosting.

Can I use a custom Google Font?

Yes. Set the font name in the params.googlefonts section (the font key) and it will be loaded for the site.

What are the main limitations of Piercer?

The theme is archived, and it does not include dropdown or nested menus. It also has no dedicated list page design beyond the default card layout, and accessibility improvements were still listed as "to do" when it was archived.