Hydeout updates the original Hyde theme for Jekyll 3.x and 4.x and adds new functionality.
Hydeout is available as the
jekyll-theme-hydeout Ruby Gem.
gem "jekyll-theme-hydeout", "~> 4.1" to your Gemfile and run
If you're installing on Github pages, you may also have to add
remote_theme: fongandrew/hydeout to your
_config.yml. See the Github
instructions for more details.
Hydeout uses pagination, so if you have an
index.md, you'll need to swap
it with an
index.html that uses the
--- layout: index title: Home ---
You'll also need to add a setting to
_config.yml telling Jekyll how many posts
to include per page (e.g.
Keep It Simple
Hydeout makes heavy use of Flexbox in its CSS. If Flexbox is not available, the CSS degrades into a single column layout.
Hydeout replaces Hyde's class-based theming with the use of the following SASS variables:
$sidebar-bg-color: #202020 !default; $sidebar-fg-color: white !default; $sidebar-sticky: true !default; $layout-reverse: false !default; $link-color: #268bd2 !default;
To override these variables, create your own
Define your own variables, then import in Hydeout's SCSS, like so:
--- # Jekyll needs front matter for SCSS files --- $sidebar-bg-color: #ac4142; $link-color: #ac4142; $sidebar-sticky: false; @import "hydeout";
See the _variables file for other variables you can override.
You can see the full set of partials you can replace in the
_includes folder, but there are a few worth noting:
_includes/copyright.html- Insert your own copyright here.
_includes/custom-head.html- Insert custom head tags (e.g. to load your own stylesheets)
_includes/custom-foot.html- Insert custom elements at the end of the body (e.g. for custom JS)
_includes/custom-nav-links.html- Additional nav links to insert at the end of the list of links in the sidebar.
navs in the sidebar are flexboxes. Use the
to order your links.
_includes/custom-icon-links.html- Additional icon links to insert at the end of the icon links at the bottom of the sidebar. You can use the
orderproperty to re-order.
_includes/favicons.html- Replace references to
favicon.pngwith your own favicons references.
_includes/font-includes.html- The Abril Fatface font used for the site title is loaded here. If you're overriding that font in the CSS, be sure to also remove the font load reference here.
- Hydeout adds a new tags page (accessible in the sidebar). Just create a new page with the tags layout:
--- layout: tags title: Tags ---
- Hydeout adds a new "category" layout for dedicated category pages.
Category pages are automatically added to the sidebar. All other pages
sidebar_link: truein their front matter to show up in the sidebar. To create a category page, use the
--- layout: category title: My Category --- Description of "My Category"
- You can control how pages are sorted by using the
sidebar_sort_orderparameter in the front matter. This works for both category and non-category pages, although non-category pages will always come first. Take a look at
_includes/sidebar-nav-links.htmlif you want to customize this behavior.
--- layout: page title: My page sidebar_sort_order: 123 --- Some content.
- A simple redirect-to-Google search is available. Just create a page with
--- layout: search title: Google Search ---
- Disqus integration is ready out of the box. Just add the following to your config file:
disqus: shortname: my-disqus-shortname
If you don't want Disqus or want to use something else, override
- For Google Analytics support, define a
google_analyticsvariable with your property ID in your config file.
There's also a bunch of minor tweaks and adjustments throughout the theme. Hope this works for you!