Hyde-hyde

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
  • Configure using .Site.Params.toc with two possible value: "hugo" (using Hugo {{ .TableOfContents }}, and "tocbot" (using Tocbot), remove .Site.Params.toc to disable TOC
  • Tocbot can be configured in layouts/partials/page-single/footer.html with options as described in its documentation

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

  • [params.social]
    	gravatar = "your.email@domain.com"
    

Customisations

• Most of the customisable SCSS styles in assets/scss/hyde-hyde and Hugo templates in hyde-hyde/layouts are modularised and can be altered/adapted easily.

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

A post

Portfolio

Mobile Mode with Collapsible Menu

Author(s)

• Original developed by Mark Otto

• Hugo's hyde ported by Steve Francia

License

Open sourced under the MIT license