Skip to content
Kiera - A Hugo Theme for writing
CSS HTML JavaScript
Branch: master
Clone or download
Pull request Compare This branch is 74 commits ahead of avianto:master.

Latest commit

funkydan2 Merge pull request #33 from lau-jay/master
bugfix: can't evaluate field disqusShortname in type page.Site
Latest commit c618275 Feb 25, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
archetypes Use images array in frontmatter? Dec 31, 2019
data Closes #12 Nov 23, 2019
exampleSite Assign number of posts on index page. Feb 23, 2020
i18n More localisation Sep 23, 2019
images screenshots updated and else Nov 9, 2017
layouts bugfix: can't evaluate field disqusShortname in type page.Site Feb 25, 2020
static Closes #26 Jan 3, 2020
.gitignore Updates Sep 21, 2019 Added Stackoverflow Nov 21, 2019 add README and some styles change Nov 8, 2017 Updated documentation for feature image. Dec 31, 2019
theme.toml Added avianto homepage and repo Sep 21, 2019

Kiera Theme for Hugo

Kiera is the theme specialized in presenting writing layout like long essay or technical writing.

It was originally developed by b. avianto and now maintained by funkydan2


Main Features

  • Simple, 'no-nonsense' styling.
  • 4 image placements with figure support using shortcodes.
  • (Optional) Feature images for posts and twiter cards.
  • Excellent code highlight support thanks to Hugo Chroma.
  • Use Font Awesome for icons.
  • Utilize normalize.css for consistent styling (Cloudflare CDN).
  • Use Google Fonts: Ruda (serif) and Roboto Slab (sans-serif).
  • Disqus or Utterances comments loaded on demand.


Live demo:


Change into Hugo directory then:

$ cd themes
$ git clone hugo-kiera

More detailed instruction at Hugo Docs.

Using git submodule is recommended instead of git clone as per recommendation from Netlify.

$ cd /path/to/the/root/of/your/project/themes
$ git submodule add

Update the theme

git submodule method

Use git to merge latest commits into your project by running:

$ cd /path/to/the/root/of/your/project/
$ git submodule update --rebase --remote

independent directory method

Delete the directory corresponding to the theme and download the latest version of the theme by cloning the repo:

$ cd /path/to/the/root/of/your/project/
$ rm -rf themes/hugo-kiera/
$ git clone themes/hugo-kiera/


For reference look inside folder exampleSite for content example and config.toml.

Important: don't delete or move archetypes folder from root unless it is necessary. Current Hugo priority lookup will look into this folder first before any other archetypes folder and could cause problem.

Recommended optional config.toml:

pygmentsCodeFences = true

disqusShortname = "" #Disqus shortname
googleAnalytics = "" #Google Analytics ID

    name = ""           #Author name
    github = ""         #Github username
    gitlab = ""         #Gitlab username
    linkedin = ""       #LinkedIn username
    facebook = ""       #Facebook username
    twitter = ""        #Twitter username
    instagram = ""      #Instagram username
    stackoverflow = ""  #StackOverflow username

    tagline = "the tagline for this website"
    customCSS = []  #Optional Customised CSS

Main Menu

To add non-posts related page (eq. About page) to the main menu, adding these lines to the page front matter:


menu = "main"
meta = "false"


menu: "main"
meta: "false"

meta refers to time, categories, tags and reading time which are not necessary for this kind of page.

For posts listing page, add file inside content\posts folder with these front matter:


title = "Posts"
menu = "main"
weight = "10"


title : "Posts"
menu : "main"
weight : "10"

Categories & Tags

Pages can include both, either, or neither Categories or Tags. To link to tags use the url /tags/ (e.g. and /categories/ for categories.


Kiera supports adding image as img tag with standard Markdown:

![Image Title](link/to/image)

to wrap it with figure use:

{{< figure src="/link/to/image" >}}

The basic placement is 100% width within content and scaled accordingly in smaller screen. Recommended width for image is 600 pixels minimum.

Kiera supports different placement by adding:

  • For img, use ![Image Title](link/to/image#placement)
  • For figure, use {{< figure src="/link/to/image" class="placement" >}}

There are 4 configured placements

  • #full or class="full" for full width. full
  • #mid or class="mid" for middle: float-mid
  • #float or class="float" for float left: float-left
  • #float-right or class="float-right" for float right: float-right

Code highlight

Using fenced code with Chroma support.

Font Awesome icons

For usage, refer to Font Awesome.

Disqus on demand

Disqus comments are loaded on demand, by clicking the View Comments button.

Support and Pull Requests

Please use GitHub issues to file bugs. If you can help fixing bugs, optimize the theme or adding features, please do pull requests, I really love to see what others can come up with.

You can’t perform that action at this time.