Skip to content
This repository has been archived by the owner. It is now read-only.
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Hugo Piercer Theme

Piercer is a very customizable, fast and simple Hugo theme designed under the mobile-first philosophy.

Hugo Piercer theme screenshot


I have decided to archive the project as I have been and am unable to give it the necessary support. Over time I have had to move on to working with other technologies and on other projects and have never had enough time to re-familiarise myself with the code and continue working on the project.

Many thanks to all the people who have installed Piercer and who have sent PRs.


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.
  • Hamburger menu without JavaScript.
  • Great SEO by default.
  • Mobile-first philosophy.
  • PostCSS can be used if desired.
  • Service Workers for optional caching resources.
  • Fast.

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:

  • Accessibility.
  • List pages.


To install Piercer run the following commands inside your Hugo site:

cd themes
git clone piercer

Or if you prefer Git submodules:

cd themes
git submodule add 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.


        anonymizeIP = true
        disable = false
        respectDoNotTrack = true
        useSessionStorage = false
        disable = false
        simple = false
        disable = false
        enableDNT = true
        simple = false
        disable = false
        simple = false
        disable = false
        privacyEnhanced = true

To learn more about privacy configuration check the official documentation.

Description, favicon and logo params

description = "" # Description for the meta description tag
favicon = ""     # Relative URL for your favicon
logo = ""        # Relative URL for your logo


    postcss = true

If you want to use PostCSS you have to install the postcss-cli package with npm in your project first. You can find more information here.

Color palette and font sizes

    text = "#fdfdfd"
    background = "#282a36"
    accent = "#44475a"
    foreground = "#f8f8f2"
    separator = "#6272a4"
    cyan = "#8be9fd"
    green = "#50fa7b"
    orange = "#ffb86c"
    pink = "#ff79c6"
    purple = "#bd93f9"
    red = "#ff5555"
    yellow = "#f1fa8c"

    base = "1em"
    p = "1.25em"
    h4 = "1.563em"
    h3 = "1.953em"
    h2 = "2.441em"
    h1 = "3.052em"

You can change any of the above values as you like.

Google Fonts

    font = ""   # Name of the Google Font you want to use

Service Workers

    enable = true   # enables or disables service worker for caching resources


    show = true # You can hide the header if you want


    show = true
    message = ""
    link = ""

Font Awesome

    disable = false # Disables or enables Font Awesome (by default is enabled)
    kit = ""  # Your Font Awesome kit's code

Contact form

    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

Contact info

    show = true
    email = ""
    phone = ""
    skype = ""
    address = ""

Date format on posts

    format = "January 2, 2006"

Social networks

    twitter = ""
    facebook = ""
    github = ""
    gitlab = ""
    codepen = ""
    instagram = ""
    pinterest = ""
    youtube = ""
    linkedin = ""
    weibo = ""
    mastodon = ""
    tumblr = ""
    flickr = ""
    "500px" = ""
    rss = ""

icons for social networks depend on Font Awesome.

Copyright message

    message = ""


    message = ""    # You can use HTML tags


    message = ""

Custom CSS

Thanks to the contributions of @benfreke now you can easily add your own CSS styles.

To do this you have to create a folder called assets in the root of your project. Then, create another folder called css inside assets. An finally a file called custom.css inside css with your styles.

mkdir -p ./assets/css/

You can check out the example site if you have any doubts.


Piercer includes three archetypes:

  • The default archetype for single pages which you can see here.
  • The post archetype for posts which you can see here.
  • The section archetype for the home page sections which you can see here.


The Front Matter of you index page should look like this:

title: "Home"
description: ""
images: []
draft: false
menu: main
weight: 1

# 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.

Home sections

To add sections to your Home page use the section archetype.

title: "Dracula"
draft: false
weight: 1
images: []
borderColor: "yellow"


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.

Single pages

The Front Matter of your single pages should look like this:

title: "About"
description: "About me."
draft: false
images: []
menu: main
weight: 2


If you specify a background image, the height of the header will increase. Here is an example.

In the case of the Single pages the description is used as a subtitle.

List pages

The Front Matter of your list pages should look like this:

title: "Blog"
description: ""
draft: false
images: []
menu: main
weight: 3

Here is an example.

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:

title: "Emojis"
description: "Emoji can be enabled in a Hugo project in a number of ways."
date: 2019-03-28T12:24:47+01:00
publishDate: 2019-03-28T12:24:47+01:00
author: "Myself"
draft: false
images: []
tags: ["emojis", "hugo"]

Here is an example.