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.
Note: this is a fork I (Brendan Abolivier) made to adapt Hyde to my needs. More info below.
To give you a running start this installation puts a fully configured starter repo into your Git account and sets it up in a content manager / CMS.
Forestry Starter-Kit:
To install Hyde as your default theme, first install this repository in the themes/ directory:
$ cd themes/
$ git clone https://github.com/spf13/hyde.git
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.
Create a list of nav links in the sidebar by assigning "menu=main" in the front matter, like so:
TOML
theme = "hyde"
[Menus]
main = [
{Name = "Github", URL = "https://github.com/username/"},
{Name = "LinkedIn", URL = "https://www.linkedin.com/in/username/"}
]YAML
theme: "hyde"
Menus:
main:
- Name: "Github"
URL: "https://github.com/username/"
- Name: "LinkedIn"
URL: "https://www.linkedin.com/in/username/"Customise the describe of your page using description, like so:
TOML
theme = "hyde"
[params]
description = "Your custom description"YAML
theme: "hyde"
params:
description = "Your custom description"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">
...
</div>
</div>
<!-- Modified sidebar -->
<div class="sidebar">
<div class="container">
...
</div>
</div>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).
There are eight themes available at this time.
To use a theme, add the themeColor variable under params, like so:
TOML
theme = "hyde"
[params]
themeColor = "theme-base-09"YAML
theme: "hyde"
params:
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.
To reverse page orientation, add the layoutReverse variable under params, like so:
TOML
theme = "hyde"
[params]
layoutReverse = trueYAML
theme: "hyde"
params:
layoutReverse: trueYou can optionally enable a comment system powered by Disqus for the posts. Simply add the variable disqusShortname to your config file.
TOML
disqusShortname = "spf13"YAML
disqusShortname : spf13Note: Previous version 1.0 the Disqus shortname had to be defined inside the
[params]block.
Google Analytics can be enabled by assigning your tracking code to the googleAnalytics variable in the config file:
TOML
googleAnalytics = "Your tracking code"YAML
googleAnalytics: Your tracking codeMark Otto
Steve Francia
Open sourced under the MIT license.
<3
This is a fork of the Hyde theme I (Brendan Abolivier) made containing a few changes I made:
- Getting rid of Google Fonts
- Adding Fork Awesome
- Adding meta tags for social network sharing and kind of SEO
- Adding an
authorkey in theparamssection from the configuration file - Adding special links to the sidebar menu using values from the
paramssection in the configuration file - Replacing the
copyrightkey in theparamssection from the configuration file with acreativeCommonskey, expected to be a Creative Commons license identifier (such asby,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
thumbnailkey in a post's front matter. Note that this value must not contain thehttps://myblog.tld/imagespart of the image's URL, which is added automatically before the key's value.
See the live configuration file for examples on how to use these features.
Note that none of the configuration parameters I added are optional (because I don't need them to be). 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.