Skip to content
Piercer is a very customizable, fast and simple Hugo theme designed under the mobile-first philosophy.
Branch: master
Clone or download
Latest commit 938f4a0 May 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
archetypes fix border bottom on single pages Apr 2, 2019
assets add custom.css file to avoid errors May 15, 2019
exampleSite update README May 16, 2019
images
layouts Adds custom css files to allow theme customisation May 15, 2019
static fix images folder route Apr 3, 2019
.dockerignore add dockerignore and gitignore files Mar 24, 2019
.gitignore add support for PostCSS Apr 4, 2019
CONTRIBUTING.md init commit Mar 23, 2019
Dockerfile update Dockerfile Apr 18, 2019
LICENSE update LICENSE Mar 23, 2019
README.md
makefile
theme.toml update theme.toml Apr 2, 2019

README.md

Hugo Piercer Theme

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

Hugo Piercer theme screenshot

Dracula

Piercer's default color palette is based on the Dracula theme. You can see more of it here.

Features

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.

Installation

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

cd themes
git clone https://github.com/danielkvist/hugo-piercer-theme.git piercer

Or if you prefer Git submodules:

cd themes
git submodule add https://github.com/danielkvist/hugo-piercer-theme.git piercer

Then, add on your config.toml file:

theme = "piercer"

Configuration

You can find an example of the final configuration here.

Basic

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.

Privacy

[privacy]
    [privacy.googleAnalytics]
        anonymizeIP = true
        disable = false
        respectDoNotTrack = true
        useSessionStorage = false
    [privacy.instagram]
        disable = false
        simple = false
    [privacy.twitter]
        disable = false
        enableDNT = true
        simple = false
    [privacy.vimeo]
        disable = false
        simple = false
    [privacy.youtube]
        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

[params.postcss]
    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

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

[params.fontsizes]
    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

[params.googlefonts]
    font = ""   # Name of the Google Font you want to use

Service Workers

[params.serviceWorker]
    enable = true   # enables or disables service worker for caching resources

Header

[params.header]
    show = true # You can hide the header if you want

CTA

[params.cta]
    show = true
    message = ""
    link = ""

Font Awesome

[params.fa]
    disable = false # Disables or enables Font Awesome (by default is enabled)
    version = ""    # Font Awesome version
    integrity = ""  # Font Awesome integrity for the Font Awesome script

Contact form

[params.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

[params.contact]
    show = true
    email = ""
    phone = ""
    skype = ""
    address = ""

Date format on posts

[params.date]
    format = "January 2, 2006"

Social networks

[params.social]
    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

[params.copy]
    message = ""

Agreements

[params.agreement]
    message = ""    # You can use HTML tags

404

[params.notfound]
    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.

Archetypes

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.

Home

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"
---

Content

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

Content

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

Posts

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.

You can’t perform that action at this time.