Hugo Piercer Theme
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.
- Mobile-first philosophy.
- 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:
- List pages.
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
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.
[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
[params.postcss] postcss = true
If you want to use PostCSS you have to install the
postcss-clipackage 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.
[params.googlefonts] font = "" # Name of the Google Font you want to use
[params.serviceWorker] enable = true # enables or disables service worker for caching resources
[params.header] show = true # You can hide the header if you want
[params.cta] show = true message = "" link = ""
[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
[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
[params.contact] show = true email = "" phone = "" skype = "" address = ""
Date format on posts
[params.date] format = "January 2, 2006"
[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.
[params.copy] message = ""
[params.agreement] message = "" # You can use HTML tags
[params.notfound] message = ""
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
assets. An finally a file called
css with your styles.
mkdir -p ./assets/css/
You can check out the example site if you have any doubts.
Piercer includes three archetypes:
defaultarchetype for single pages which you can see here.
postarchetype for posts which you can see here.
sectionarchetype 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.
To add sections to your Home page use the
--- 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.
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.
The Front Matter of your list pages should look like this:
--- title: "Blog" description: "" draft: false images:  menu: main weight: 3 ---
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"] ---