hugo 0.24

Let's Start from the Basics: Part 4

Take The Most Out Of Your Theme - BeautifulHugo

We have installed a theme called Beautiful Hugo, now let’s get the most out of it!

BeautifulHugo is a Hugo theme created by Halogenica as a port of Beautiful Jekyll Theme.

Features

  • Responsive
  • Syntax highlighting
  • Disqus support
  • Google Analytics
  • Commit SHA on the footer

Responsive

To take advantage of this feature we don’t need to do anything. The theme is responsive out of the box. It looks great on small devices and big ones too.

Syntax highlighting

Syntax highlighting can be very useful if you write a blog about programming. Beautiful Hugo comes with server side and client side syntax highlighting.

Client Side

Use triple backticks ( ``` ) or triple tilde ( ~~~ ) around code blocks.

Client side highlighting does not require pygments to be installed.

Server Side

Use the highlight shortcode (with Pygments), see the Hugo documentation for more information. To use this feature install Pygments by runnig:


    $ pip install Pygments
and add pygmentsuseclasses = true to the config.toml file on your root directory.

Disqus support

To start using disqus for your comments, create an account on the disqus website and then uncomment and fill out the disqusShortname parameter in config.toml.

Google Analytics

To add Google Analytics you need to get your tracking ID from your Google Analytics account, then add it to the googleAnalytics parameter in config.toml.

In words of the author: 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:


    [Params]
        commit = “https://github.com///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/xor-gate.org an example of how to add it to a continuous integration system.

License

MIT Licensed, see license.

Avatar author

Web developer. Always learning.

Let's share this!