Hyde-hyde is a Hugo's theme inspired and derived from @spf13's Hyde and Nate Finch's blog.

Breaking Changes

Since version 2.0, hyde-hyde has been overhauled and, therefore, might cause some disruptions.

  • The main styles are refactored and redeveloped using SCSS (see assets/scss), poole.css and hyde.css are no longer needed because hyde-hyde.scss already incorporates relevant elements (I still keep them there for reference purpose)
    • Per PR [#45 by @jd4no, hyde-hyde can use SCSSs directly in the templates instead of the generated CSSs. The generated CSSs and the generated resources are still kept in hyde-hyde in order to ensure the demo on Hugo theme site working.
  • The layouts have been heavily restructured and modularised further (see layouts)
  • Adding 'Portfolio' page inspired by Xiaoying Riley (@3rdwave_themes) Developer-Theme
  • Switching to use system fonts instead of Web fonts (e.g. privacy issues)
  • Experimenting a collapsible menu in mobile mode
  • Adding Table of Contents

For more details, please refer to CHANGELOG. A real site in action can be found here and its WIP source for reference.



Hyde-hyde can be easily installed as many other Hugo themes:


# then either clone hyde-hyde
$ git clone https://github.com/htr3n/hyde-hyde.git themes/hyde-hyde

# or just add hyde-hyde as a submodule
$ git submodule add https://github.com/htr3n/hyde-hyde.git themes/hyde-hyde

After that, choose hyde-hyde as the main theme.

  • config.toml
theme = "hyde-hyde"
  • config.yaml
theme : "hyde-hyde"

That's all. You can render your site using hugo and see hyde-hyde in action.


Hyde-hyde essentially inherits most of Hyde's options. There are some extra options though

  • highlightjs = true: use highlight.js instead of Hugo built-in support for code highlighting

    • highlightjsstyle="highlight-style": only when highlightjs = true, please choose one of many highlight.js's styles.
    • Since v2.0.1, highlighting for each page can be fine-tuned in the front matter, for example
      • highlight = false (default true)
      • highlightjslanguages = ["swift", "objectivec"]
  • postNavigation = true|false (default true): Setting to false will disable the navigation Previous Post/ Next Post

  • relatedPosts = false|true (default false): Setting to true allows related posts. Please refer here for more details on related contents with Hugo.

  • GraphCommentId = "your-graphcomment-id": to use GraphComment instead of the built-in Disqus. This option should be used exclusively with disqusShortname = "disqus-shortname".

  • UtterancesRepo = "your-repo-name": to use Utterances instead of the built-in Disqus. This option should be used exclusively with disqusShortname = "disqus-shortname".

    • UtterancesIssueTerm = "pathname" Method for Utterances to match issue's to posts (pathname, url, title, og:title)
    • UtterancesTheme = "github-light" Theme for Utterances (github-light, github-dark)
  • [params.social]: in this section, you can set many social identities such as Twitter, Facebook, Github, Bitbucket, Gitlab, Instagram, LinkedIn, StackOverflow, Medium, Xing, Keybase.

    	twitter = "htr3n"
    	keybase = "htr3n"
    	github = "htr3n"
  • include_toc = false: Setting to false in FrontMatter will disable too short TOC data as your want.

  • Per PR #56, Gravatar pics can be used exclusively to .Site.Params.authorimage via the parameter .Site.Params.social.gravatar



Since version 2.0+, I added a portfolio page just in case. If you need it, simply add a menu section 'Portfolio' in config.toml as following.

    name = "Portfolio"
    identifier = "portfolio"
    weight = xyz
    url = "/portfolio/"

In the folder content , create a subfolder portfolio and use the following folder/content structure as reference.

$ tree portfolio
├── _index.md
├── p1.md
├── p1.png
├── p2.md
├── p2.png
├── pn.md
└── pn.png

As I design the section portfolio to be rendered as list, _index.md can be used to set the title for your portfolio (you can read more about _index.md here). For instance, when I want to set the title of my portfolio "Projects", the front matter of _index.md will be:

title: 'Projects'

The remaining of _index.md will be ignored.

For each project, just create a Markdown file with the following parameters in the front matter:

title: "Project P1's Title"
description: "A short description"
date: '2018-01-02'
link: 'https://project-p1.com'
screenshot: 'p1.png'
layout: 'portfolio'
featured: true
Here is a longer summary of the project. You can write as long as you wish.


  • date is important to sort the project chronologically
  • layout 'portfolio' is important as you don't want your project's page appear in the list of posts in the main page of your Web site but only in the Portfolio ;)
  • featured: true : when you want to show a project as featured project. It is default to false. Note that only one project should be marked featured: true , otherwise, the result could be random as the Hugo template will take the first one.
  • The body of the Markdown file will be the summary of the project.

If you want to adjust the portfolio page to your needs, please have a look at the main template, that uses this partial template and this SCSS style.

Some Screenshots

Main page

hyde-hyde main screen

A post

A post in hyde-hyde


Portfolio hyde-hyde