Piercer is a very customizable, fast and simple Hugo theme designed under the mobile-first philosophy.
Piercer’s default color palette is based on the Dracula theme. You can see more of it here.
Some of the basic features of Piercer are:
Highly customizable (color palette, font size, font family and more).
Support for custom CSS.
Great SEO by default.
PostCSS can be used if desired.
Service Workers for optional caching resources.
Some of the things that are not planned to add for the moment are:
Dropdown menus or nested menus.
Some of the things I would like to add or improve in the future:
To install Piercer run the following commands inside your Hugo site:
git clone https://github.com/danielkvist/hugo-piercer-theme.git piercer
Or if you prefer Git submodules:
git submodule add https://github.com/danielkvist/hugo-piercer-theme.git piercer
Then, add on your config.toml file:
theme = "piercer"
You can find an example of the final configuration here.
baseurl = "/" # The base URL of your Hugo site
title = "titlehere" # The title of your Hugo site
author = "authorhere" # The author name
googleAnalytics = "" # Your Google Analytics tracking ID
enableRobotsTXT = true
defaultContentLanguage = "en"
language = "en-US"
paginate = 7 # The numbers of posts per page
theme = "piercer" # Your Hugo theme
There’s a lot more information about the basic configuration of an Hugo site here.
You can change any of the above values as you like.
font = "" # Name of the Google Font you want to use
enable = true # enables or disables service worker for caching resources
show = true # You can hide the header if you want
show = true
message = ""
link = ""
disable = false # Disables or enables Font Awesome (by default is enabled)
version = "" # Font Awesome version
integrity = "" # Font Awesome integrity for the Font Awesome script
show = true
netlify = false # Only set to true if you are using Netlify to deploy your site
action = ""
method = "POST"
section = "Contact me!" # Title of the section
disclaimer = ""
inputNameName = "Name"
inputNameLabel = "Your Name"
inputNamePlaceholder = "Your Name"
inputEmailName = "Email"
inputEmailLabel = "Your Email"
inputEmailPlaceholder = "Your Email"
SubmitValue = "" # Let empty to default icon
# Your title
A simple description.
As you can see, you can add a background image with the images param to the hero of your Home page. Which will also display the content of your file. And the CTA if you have specified so. Here is an example.
To add sections to your Home page use the section archetype.
You can specify the order of the sections as the color of the bottom border (the value needs to be one of the variables defined in the main configuration file, for example “yellow” or “green”). Here is an example.
The Front Matter of your single pages should look like this:
In the case of list pages the entries will be displayed in cards with the title, the author (if any), the date of publication (also if any), a description (again if any) and a list of tags (if any).
The Front Matter of your posts should look like this:
description: "Emoji can be enabled in a Hugo project in a number of ways."
tags: ["emojis", "hugo"]