You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Felipe Contreras Salinas 332228a9cc Remove old main.css file 1 month ago
archetypes Add fields to default archetype 2 years ago
assets Remove old main.css file 1 month ago
data/beautifulhugo Added Codeberg with generic git logo 1 month ago
exampleSite Renamed to Kirei Hugo 1 month ago
i18n Fix last md and submitted date. 4 months ago
images Various fixes on performance 1 year ago
layouts Replace Bootstrap with Bulma v0.9.1. Remove BigImgs support. 1 month ago
static Replace FontAwesome with ForkAwesome v1.1.7 1 month ago
.gitattributes 👾 Added .gitattributes & .gitignore files 5 years ago
.gitignore Add exampleSite/themes to .gitignore 3 years ago
LICENSE Selected updates from latest beautiful-jekyll changes 4 years ago Renamed to Kirei Hugo 1 month ago
theme.toml Renamed to Kirei Hugo 1 month ago

Kirei Hugo - A port of Beautiful Hugo Theme

Beautiful Hugo Theme Screenshot


$ mkdir themes
$ cd themes
$ git submodule add kireihugo

See the Hugo documentation for more information.

Extra Features


This theme is designed to look great on both large-screen and small-screen (mobile) devices.

Syntax highlighting

This theme has support for either Hugo's lightning fast Chroma, or both server side and client side highlighting. See the Hugo docs for more.

Chroma - New server side syntax highlighting

To enable Chroma, add the following to your site parameters:

pygmentsCodeFences = true
pygmentsUseClasses = true

Then, you can generate a different style by running:

hugo gen chromastyles --style=trac > static/css/syntax.css

Pygments - Old server side syntax highlighting

To use this feature install Pygments (pip install Pygments) and add the following to your site parameters:

pygmentsStyle = "trac"
pygmentsUseClassic = true

Pygments is mostly compatible with the newer Chroma. It is slower but has some additional theme options. I recommend Chroma over Pygments. Pygments will use syntax.css for highlighting, unless you also set the config pygmentsUseClasses = false which will generate the style code directly in the HTML file.

If the source of your site is in a Git repo, the SHA corresponding to the commit the site is built from can be shown on the footer. To do so, two environment variables have to be set (GIT_COMMIT_SHA and GIT_COMMIT_SHA_SHORT) and parameter commit has to be defined in the config file:

  commit = "<username>/<siterepo>/tree/"

This can be achieved by running the next command prior to calling Hugo:

  GIT_COMMIT_SHA=`git rev-parse --verify HEAD` GIT_COMMIT_SHA_SHORT=`git rev-parse --short HEAD`

See at xor-gate/ an example of how to add it to a continuous integration system.

Extra shortcodes

There are two extra shortcodes provided (along with the customized figure shortcode):


This simply adds the html5 detail attribute, supported on all modern browsers. Use it like this:

{{% details "This is the details title (click to expand)" %}}
This is the content (hidden until clicked).
{{% /details %}}


This adds a two column side-by-side environment (will turn into 1 col for narrow devices):

{{< columns >}}
This is column 1.
{{< column >}}
This is column 2.
{{< endcolumn >}}


This is a simplification of Beautiful Hugo theme, which in turn is a port of the Beautiful Jekyll theme by Dean Attali.


MIT Licensed, see LICENSE.