Hyde is a brazen two-column Hugo theme, ported from Mark Otto's Jekyll theme of the same name, that pairs a prominent sidebar with an uncomplicated content area.
What is Hyde?
Hyde is a two-column theme for the Hugo static site generator, originally created by Mark Otto for Jekyll and ported to Hugo by Steve Francia (spf13). It takes a Hugo site's content and configuration as input and produces a fully styled static website with a persistent sidebar and main content area. The theme is open-sourced under the MIT license and is available on GitHub.
What makes Hyde stand out?
- Sidebar menu — Add navigation links to the sidebar by assigning
menu = mainin the front matter of your content, with support for both TOML and YAML configuration formats. - Sidebar description — Set a custom description for your site via the
descriptionparameter under[params]in the config file. - Sticky sidebar content — The sidebar ships with a
sidebar-stickyclass that affixes its content to the bottom of the sidebar; remove the class to make it flow normally. - Eight base16 themes — Choose from eight optional color themes based on the base16 color scheme, applied by setting
themeColorsuch astheme-base-09. - Reverse layout — Flip the page orientation so the sidebar appears on the right by setting
layoutReverse = truein the config. - Custom CSS — Add your own styles by placing a file at
assets/css/custom.cssin your Hugo project, and it will be appended to the theme's CSS bundle. - Disqus integration — Enable comments on posts by adding your
disqusShortnameto the config file. - Google Analytics — Add your tracking code via the
googleAnalyticsconfig variable to enable analytics.
Who should use Hyde?
- Hugo users — Anyone building a personal blog or simple website with Hugo who wants a clean two-column layout with a persistent sidebar.
- Jekyll migrants — Developers switching from Jekyll to Hugo who want a familiar theme; Hyde is a direct port of the popular Jekyll theme.
- Minimalist site owners — People who prefer a focused content area with navigation and links in the sidebar, without extra widgets.
What can you do with Hyde?
- Run a personal blog — Write Markdown posts and have them rendered in a clean layout with sidebar navigation.
- Build a documentation site — Use the sidebar to list links to docs pages, with sticky positioning for easy access.
- Port an existing Jekyll site — Reuse the familiar Hyde design while moving to Hugo's faster build process.
How does Hyde work?
Installation is straightforward: clone the repository into your themes/ directory, then set theme = "hyde" in your config.toml. Alternatively, use the Forestry starter kit to get a fully configured site set up in a content manager automatically. Configuration options like the sidebar menu, description, theme color, reverse layout, Disqus, and Google Analytics are all set through the site's config file.
Pricing
Hyde is free and open source under the MIT license.
FAQ
Is Hyde free?
Yes, Hyde is released under the MIT license, so you can use it for personal and commercial projects freely.
How do I enable Disqus comments?
Add your Disqus shortname to the config file using the disqusShortname variable. Note that in versions before 1.0 you had to place it inside the [params] block.
How do I change the color scheme?
Set the themeColor parameter under [params] to one of the eight included base16 themes, such as theme-base-09. You can also create your own theme by copying an existing one from the CSS file and changing colors.
How do I make the sidebar not sticky?
Remove the sidebar-sticky class from the sidebar's container div in your template.
How do I add custom CSS?
Place a file at assets/css/custom.css in your Hugo project, and it will be appended to the theme's CSS bundle.
