rhyde-x

Enhanced port of the Jekyll "Hyde" theme to the Hugo site generator. Check below for a list of enhancements.

You can find a live site using this theme here and the corresponding source code here.

You can find releases of rehyde-x here: rehyde-x releases

• Installation
• Usage
• Configuration
• Built-in colour themes
• Tips
• Changes and enhancements from the original theme
• Attribution
• Questions, ideas, bugs, pull requests?
• License

Master:

Test:

Installation

$ cd your_site_repo/
$ mkdir themes
$ cd themes
$ git clone https://github.com/forquare/rehyde-x

See the official Hugo themes documentation for more info.

Usage

This theme expects a relatively standard Hugo blog/personal site layout:

.
└── content
    ├── post
    |   ├── post1.md
    |   └── post2.md
    ├── license.md        // this is used in the sidebar footer link
    └── other_page.md

Just run hugo --theme=rehyde-x to generate your site!

Configuration

An example of what your site's config.yaml could look like. All theme-specific parameters are under [params] and standard Hugo parameters are used where possible.

baseurl: "http://example.com/"
title: "Your site title"
languageCode: "en-us"
disqusShortname: "your_disqus_shortname" # Optional, enable Disqus integration
MetaDataFormat: "toml"
theme: "rehyde-x"
paginate: 10

author:
  name: "Your Name"

permalinks:
  # Optional. Change the permalink format for the 'post' content type.
  # The format shown here is the same one Jekyll/Octopress uses by default.
  post: '/blog/:year/:month/:day/:title/'
  
taxonomies:
  # Optional. Use if you want tags and lists.
  category: categories
  
#
# All parameters below here are optional and can be mixed and matched.
#
params:
  # If false display full article contents in blog index.
  # Otherwise show description and 'read on' link to individual blog post page.
  # Default (if omitted) is true.
  truncate: true

  # Used when a given page doesn't set its own.
  defaultDescription: Your default page description
  defaultKeywords: 'your,default,page,keywords'

  # Hide estimated reading time for posts.
  # Default (if omitted) is false.
  hideReadingTime: false

  # Changes sidebar background and link/accent colours.
  # See below for more colour options.
  # This also works: "theme-base-08 layout-reverse", or just "layout-reverse".
  colorTheme: theme-base-08

  # Select a syntax highight.
  # Check the static/css/highlight directory for options.
  highlight: sunburst

  # Optional additional custom CSS file URL, will override other styles.
  customCSS: ''

  # Toggle full width content
  fullWidth: false

  # Displays under the author name in the sidebar, keep it short.
  # You can use markdown here.
  tagline: Your favourite quote or soundbite.

  # Text for the top menu link, which goes the root URL for the site.
  # Default (if omitted) is "Blog".
  home: Blog

  # Links will be generated for these taxonomies
  # Use to add links for categories, tags, etc.
  # Example: [ "categories", "tags" ]
  taxonomyItemsToLink:
    - categories
      
  # Metadata used to drive integrations.
  googleAnalytics: Your Google Analytics tracking code
  gravatarHash: MD5 hash of your Gravatar email address
    
  rss: false  # switch to true to enable RSS icon link
  flattr: ""  # populate with your flattr uid
    
  # Sidebar links
  icons:
    iconSize: 2x
    # The order of items in this list determines the order the icons appear left to right
    iconList:
      # Icons with a link key requires the name key to match a Font Awesome icon
      - name: github
        link: https://github.com/myprofile/
        # If the icon has a square icon available, it can be activated here
        isSquaredIcon: true
      - name: mastodon
        link: https://my-instance.io/@muprofile
        # If the icon does not have a square icon available, it must be set to false
        isSquaredIcon: true
      # If the name key is "rss", the rss icon will be used
      - name: rss
        isSquaredIcon: true
      # If an item has a mailLink key, an envelope icon will be used and prefix the email address with mailto:
      - name: email
        mailLink: me@mysite.com
        isSquaredIcon: true

Built-in colour themes

rehyde-x provides 8 built-in colour themes by default, with the option to define more in your own custom CSS.

Tips

• If you've added theme: "rehyde-x" to your config.yaml, you don't need to keep using the --theme=rehyde-x flag!
• Pages where you specify menu = "main" in the front matter will be linked in the sidebar just below the Blog link.
• Use the exact permalink format above to maintain old links if migrating from Jekyll/Octopress.
• Although all of the syntax highlight CSS files under the theme's static/css/highlight are bundled with the site, only the one you choose will be included in the page and delivered to the browser.
• Change the favicon by providing your own as static/favicon.png in your site directory.
• Hugo makes it easy to override theme layout and behaviour, read about it here.
• Pagination is set to 10 items by default, change it by updating paginate: 10 in your config.yaml.
• Set truncate: false in the [params] section of your config.yaml to display full blog post contents in the index page, like the base Hyde theme did.

Changes and enhancements from the original theme

• Category labels and lists.
• Client-side syntax highlighting through highlight.js, sane fallback if disabled or no JS - infinitely more flexible than the standard Hugo highlighting.
• Disqus integration: comment counts listed under blog entry names in post list, comments displayed at the bottom of each post.
• Gravatar image in sidebar.
• Google Analytics integration.
• Sidebar link layout and footer format changes.
• Blog post list now contains only the post description, not the full contents.
• Paginated blog listing.
• FontAwesome social links.
• ...many other small layout tweaks!

Attribution

Obviously largely a port of the awesome Hyde theme.

Many thanks to Andrei Mihu for the original port of hyde-x from which this project is forked.

Questions, ideas, bugs, pull requests?

All feedback is welcome! Head over to the issue tracker.

License

Open sourced under the MIT license.