Fork of @spf13's port of Mdo's excellent theme to Hugo
Brendan Abolivier 4bf9764147
Fix Hyde link
6 years ago
archetypes adding archetypes to the existing themes 10 years ago
images removing old screenshot 9 years ago
layouts Fix Hyde link 6 years ago
static Improve accessibility, add Mastodon and Hugo+Hyde mention 6 years ago Add CHANGELOG 6 years ago Adding the hyde theme 10 years ago Removed duplicate 6 years ago
theme.toml Bump required Hugo version to v0.21 6 years ago


Hyde is a brazen two-column hugo theme based on the Jekyll theme of the same name. It pairs a prominent sidebar with uncomplicated content.

Hyde screenshot

Note: this is a fork I (Brendan Abolivier) made to adapt Hyde to my needs. More info below.



To install Hyde as your default theme, first install this repository in the themes/ directory:

$ cd themes/
$ git clone

Second, specify hyde as your default theme in the config.toml file. Just add the line

theme = "hyde"

at the top of the file.


Hyde includes some customizable options, typically applied via classes on the <body> element.

Sidebar menu

Create a list of nav links in the sidebar by assigning "menu=main" in the front matter.

Sticky sidebar content

By default Hyde ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disabled this by removing the .sidebar-sticky class from the sidebar's .container. Sidebar content will then normally flow from top to bottom.

<!-- Default sidebar -->
<div class="sidebar">
  <div class="container sidebar-sticky">

<!-- Modified sidebar -->
<div class="sidebar">
  <div class="container">


Hyde ships with eight optional themes based on the base16 color scheme. Apply a theme to change the color scheme (mostly applies to sidebar and links).

Hyde in red

There are eight themes available at this time.

Hyde theme classes

To use a theme, add the themeColor variable under params, like so:


theme = "hyde"

  themeColor = "theme-base-09"


theme: "hyde"

  themeColor: "theme-base-09"

To create your own theme, look to the Themes section of included CSS file. Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.

Reverse layout

Hyde with reverse layout

To reverse page orientation, add the layoutReverse variable under params, like so:


theme = "hyde"

  layoutReverse = true


theme: "hyde"

  layoutReverse: true


You can optionally enable a comment system powered by Disqus for the posts. Simply add the variable disqusShortname to your config file.


disqusShortname = "spf13"


disqusShortname : spf13

Note: Previous version 1.0 the Disqus shortname had to be defined inside the [params] block.

Google Analytics

Google Analytics can be enabled by assigning your tracking code to the googleAnalytics variable in the config file:


googleAnalytics = "Your tracking code"


googleAnalytics: Your tracking code


Mark Otto

Ported By

Steve Francia


Open sourced under the MIT license.



This is a fork of the Hyde theme I (Brendan Abolivier) made containing a few changes I made:

  • Getting rid of Google Fonts
  • Adding FontAwesome
  • Adding meta tags for social network sharing and kind of SEO
  • Adding an author key in the params section from the configuration file
  • Adding special links to the sidebar menu using values from the params section in the configuration file:
Configuration key Description Example value
twitter Twitter @username BrenAbolivier
github GitHub username babolivier
email Email address
pgp PGP key fingerprint E1D4 B745 7A82 9D77 1FBA 8CAC E860 1572 74A2 8D7E
keyserver The key server to use in the key's menu link (must support HTTPS)
  • Replacing the copyright key in the params section from the configuration file with a creativeCommons key, expected to be a Creative Commons license identifier (such as by, by-sa, etc.)
  • Adding a proper RSS feed template including items' descriptions in <description> tags, and their contents in <content:encoded> tags
  • Adding support for posts' thumbnails, by supporting a thumbnail key in a post's front matter. Note that this value must not contain the https://myblog.tld/images part of the image's URL, which is added automatically before the key's value.

Note that none of the configuration parameters I added are optional (mainly because I don't need them to be, but PRs are welcome!). A live demo is available on my blog.

Of course, everything I didn't mess with belongs to the Hugo Hyde theme's authors and contributor.