jkinred / beautifulhugo

Theme for the Hugo static website generator

Beautiful Hugo - A port of Beautiful Jekyll Theme

Installation

$ mkdir themes
$ cd themes
$ git clone https://github.com/halogenica/beautifulhugo.git beautifulhugo

See the Hugo documentation for more information.

Extra Features

Responsive

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.

Chroma

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

pygmentsCodeFences = true
pygmentsUseClasses = true
[params]
    useChroma = true

Then, you can use a different style by running:

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

See the Hugo docs for more.

Server side syntax highlighting

Use the highlight shortcode (with Pygments), see the Hugo documentation for more information.

To use this feature install Pygments (pip install Pygments) and add

pygmentsUseClasses = true
pygmentsUseClassic = true

to your config.toml.

Client side syntax highlighting

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

Client side highlighting does not require pygments to be installed. This currently is only active if you have not selected Chroma, because they don't play well together.

Disqus support

To use this feature, uncomment and fill out the disqusShortname parameter in config.toml.

Staticman support

Add staticman configuration section in config.toml or config.yaml

Sample config.yaml configuration

  staticman:
    api: https://api.staticman.net/v2/entry/<USERNAME>/<REPOSITORY-BLOGNAME>/master/comments
    pulls: https://github.com/<USERNAME>/<REPOSITORY-BLOGNAME>/pulls
    recaptcha:
      sitekey: "6LeGeTgUAAAAAAqVrfTwox1kJQFdWl-mLzKasV0v"
      secret: "hsGjWtWHR4HK4pT7cUsWTArJdZDxxE2pkdg/ArwCguqYQrhuubjj3RS9C5qa8xu4cx/Y9EwHwAMEeXPCZbLR9eW1K9LshissvNcYFfC/b8KKb4deH4V1+oqJEk/JcoK6jp6Rr2nZV4rjDP9M7nunC3WR5UGwMIYb8kKhur9pAic="

You must also configure the staticman.yml in you blog website.

comments:
  allowedFields: ["name", "email", "website", "comment"]
  branch            : "master"
  commitMessage     : "New comment in {options.slug}"
  path: "data/comments/{options.slug}"
  filename          : "comment-{@timestamp}"
  format            : "yaml"
  moderation        : true
  requiredFields    : ['name', 'email', 'comment']
  transforms:
    email           : md5
  generatedFields:
    date:
      type          : "date"
      options:
        format      : "iso8601"
  reCaptcha:
    enabled: true
    siteKey: "6LeGeTgUAAAAAAqVrfTwox1kJQFdWl-mLzKasV0v"
    secret: "hsGjWtWHR4HK4pT7cUsWTArJdZDxxE2pkdg/ArwCguqYQrhuubjj3RS9C5qa8xu4cx/Y9EwHwAMEeXPCZbLR9eW1K9LshissvNcYFfC/b8KKb4deH4V1+oqJEk/JcoK6jp6Rr2nZV4rjDP9M7nunC3WR5UGwMIYb8kKhur9pAic="

Google Analytics

To add Google Analytics, simply sign up to Google Analytics to obtain your Google Tracking ID, and add this tracking ID to the googleAnalytics parameter in config.toml.

Commit SHA on the footer

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/<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/xor-gate.org an example of how to add it to a continuous integration system.

About

This is a port of the Jekyll theme Beautiful Jekyll by Dean Attali. It supports most of the features of the original theme.

License

MIT Licensed, see LICENSE.