Skip to content


Switch branches/tags
This branch is 55 commits ahead, 69 commits behind cyberflamingo:main.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

MIT license GitHub release GitHub stars GitHub forks GitHub issues GitHub issues closed


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 themes/hyde-hyde

# or just add hyde-hyde as a submodule
$ git submodule add 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)
  • Commento = true: to use Commento instead of the built-in Disqus. This option should be used exclusively with disqusShortname = "disqus-shortname".

  • []: in this section, you can set many social identities such as Twitter, Facebook, Github, Bitbucket, Gitlab, Instagram, LinkedIn, StackOverflow, Medium, Xing, Keybase.

    	twitter = "thushan"
    	keybase = "thushan"
    	github = "thushan"
  • 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

    • []
      	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
├── p1.png
├── p2.png
└── pn.png

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

title: 'Projects'

The remaining of 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: ''
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

Mobile Mode with Collapsible Menu

hyde-hyde in mobile mode



Open sourced under the MIT license


Modified fork from cyberflamingo/hyde-hyde which was originally a cool theme inspired by spf13's Hyde theme.








No packages published


  • SCSS 70.2%
  • HTML 22.3%
  • CSS 7.5%