Overview:
Hyde-hyde is a theme for the Hugo static site generator, inspired by the Hyde theme by @spf13 and Nate Finch’s blog. It has recently undergone a major overhaul with version 2.0, bringing new features and improvements to the theme.
Features:
- SCSS Styling: The main styles of hyde-hyde have been refactored and developed using SCSS, eliminating the need for the poole.css and hyde.css files.
- Modular Layouts: The layouts of the theme have been heavily restructured and modularized, making it easier to customize and extend.
- Portfolio Page: Hyde-hyde now includes a “Portfolio” page, inspired by Xiaoying Riley’s Developer-Theme.
- System Fonts: The theme now uses system fonts instead of web fonts, addressing privacy concerns.
- Collapsible Menu: A collapsible menu in mobile mode has been added to improve user experience.
- Table of Contents: The theme provides options to configure the table of contents using either Hugo’s built-in {{/* .TableOfContents */}} or the Tocbot library.
- Highlight.js Support: Hyde-hyde offers the option to use the highlight.js library for code highlighting instead of Hugo’s built-in support.
- Related Posts: The theme allows for the display of related posts.
Installation:
To install Hyde-hyde as a Hugo theme, follow these steps:
- Download the theme to the
themes directory of your Hugo site. - Open your site’s configuration file (
config.toml or config.yaml) and set theme = "hyde-hyde". - That’s it! You can now render your site using Hugo and see the Hyde-hyde theme in action.
Summary:
Hyde-hyde is a Hugo theme that offers a modern and customizable design, inspired by the Hyde theme and Nate Finch’s blog. With its recent overhaul, it brings new features such as SCSS styling, modular layouts, a portfolio page, and more. Installation is straightforward, making it easy to incorporate Hyde-hyde into your Hugo site. The theme provides options for customization, including font choice, code highlighting, table of contents configuration, and related posts display.
