Hyde-hyde

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

View Demo Download Source

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.

Usage

Installation

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

$ cd HUGO_PROJECT

# 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.

Options

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.

    [params.social]
	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

Customisations

Portfolio

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.

[[menu.main]]
    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
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.

Note:

  • 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

Portfolio hyde-hyde

GitHub