Home

Awesome

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

Hyde-hyde

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

NOTICE: Maintainers / collaborators seeking: As I'm underwater with my full time job at the moment, I'm actively looking for and welcome any new maintainers or collaborators. If you are interested, comment on #130 and I can add you to the project. TIA.

Breaking Changes

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

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.

theme = "hyde-hyde"
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

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:

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.

Posts in home page

By default hugo will show in your home page the most populated section. This means that if you have more projects than posts, by default your home page will list your projects instead of your posts. If you want to change this behaviour you can change the mainsections. For example, for the exampleSite this is how you should change the config.toml file:

[params]
    mainSections = ["posts"]

Some Screenshots

Main page

hyde-hyde main screen

A post

A post in hyde-hyde

Portfolio

Portfolio hyde-hyde

Mobile Mode with Collapsible Menu

<img src='https://github.com/htr3n/hyde-hyde/raw/master/images/mobile.png' alt='hyde-hyde in mobile mode' width='60%'>

Author(s)

License

Open sourced under the MIT license