All Projects → fongandrew → Hydeout

fongandrew / Hydeout

Licence: other
A refreshed version of Hyde for Jekyll 3.x and 4.x

Projects that are alternatives of or similar to Hydeout

Jekyll Theme Basically Basic
Your new Jekyll default theme
Stars: ✭ 524 (+16.96%)
Mutual labels:  jekyll, jekyll-theme, github-pages, ruby-gem, scss
Minimal Mistakes
📐 Jekyll theme for building a personal site, blog, project documentation, or portfolio.
Stars: ✭ 8,967 (+1901.56%)
Mutual labels:  jekyll, jekyll-theme, github-pages, ruby-gem, scss
🥁 A really basic theme for Jekyll
Stars: ✭ 85 (-81.03%)
Mutual labels:  jekyll, jekyll-theme, github-pages, ruby-gem, scss
Beautiful Jekyll
✨ Build a beautiful and simple website in literally minutes. Demo at
Stars: ✭ 3,778 (+743.3%)
Mutual labels:  jekyll, jekyll-theme, github-pages, jekyll-themes, ruby-gem
A minimalist Jekyll theme for running an online publication
Stars: ✭ 223 (-50.22%)
Mutual labels:  jekyll, jekyll-theme, github-pages, jekyll-themes, scss
Oscailte — A powerful light, clean, and responsive Jekyll theme.
Stars: ✭ 178 (-60.27%)
Mutual labels:  jekyll, jekyll-theme, github-pages, jekyll-themes, ruby-gem
So Simple Theme
A simple Jekyll theme for words and pictures.
Stars: ✭ 1,701 (+279.69%)
Mutual labels:  jekyll, jekyll-theme, github-pages, ruby-gem, scss
⚗️ A Jekyll boilerplate theme designed to be a starting point for any Jekyll website
Stars: ✭ 501 (+11.83%)
Mutual labels:  jekyll, jekyll-theme, github-pages, ruby-gem, scss
Jekyll Uno
Jekyll-Uno - a minimal, responsive theme for Jekyll based on Uno for Ghost
Stars: ✭ 559 (+24.78%)
Mutual labels:  jekyll, jekyll-theme, github-pages, jekyll-themes, scss
Jekyll Yamt
YAMT is a minimal Jekyll theme focused on simplicity and ease-of-use.
Stars: ✭ 55 (-87.72%)
Mutual labels:  jekyll, jekyll-theme, jekyll-themes, scss
Pages Gem
A simple Ruby Gem to bootstrap dependencies for setting up and maintaining a local Jekyll environment in sync with GitHub Pages
Stars: ✭ 1,670 (+272.77%)
Mutual labels:  jekyll, jekyll-theme, github-pages, ruby-gem
Jekyll theme based on Stylish Portfolio Bootstrap theme
Stars: ✭ 20 (-95.54%)
Mutual labels:  jekyll, jekyll-theme, github-pages, jekyll-themes
Minima is a one-size-fits-all Jekyll theme for writers.
Stars: ✭ 2,452 (+447.32%)
Mutual labels:  jekyll, jekyll-theme, jekyll-themes, scss
Jekyll Text Theme
💎 🐳 A super customizable Jekyll theme for personal site, team site, blog, project, documentation, etc.
Stars: ✭ 2,150 (+379.91%)
Mutual labels:  jekyll, jekyll-theme, jekyll-themes, scss
🎨 A ridiculously elegant Jekyll theme.
Stars: ✭ 442 (-1.34%)
Mutual labels:  jekyll, jekyll-theme, github-pages, scss
Jekyll Themes / GitHub Pages 博客模板 / A template repository for Jekyll based blog
Stars: ✭ 1,060 (+136.61%)
Mutual labels:  jekyll, jekyll-theme, github-pages, jekyll-themes
Jekyll Serif Theme
Serif is a beautiful business theme for Jekyll.
Stars: ✭ 235 (-47.54%)
Mutual labels:  jekyll, jekyll-theme, jekyll-themes, scss
Just The Docs
A modern, high customizable, responsive Jekyll theme for documention with built-in search.
Stars: ✭ 3,747 (+736.38%)
Mutual labels:  jekyll, jekyll-theme, github-pages, scss
The 'Fuse Core' Jekyll theme.
Stars: ✭ 29 (-93.53%)
Mutual labels:  jekyll, jekyll-theme, github-pages, jekyll-themes
Chalk is a high quality, completely customizable, performant and 100% free Jekyll blog theme.
Stars: ✭ 987 (+120.31%)
Mutual labels:  jekyll, jekyll-theme, github-pages, scss


Hydeout updates the original Hyde theme for Jekyll 3.x and 4.x and adds new functionality.

Desktop Mobile home page Mobile post page


Hydeout is available as the jekyll-theme-hydeout Ruby Gem. Add gem "jekyll-theme-hydeout", "~> 4.1" to your Gemfile and run bundle install.

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, you'll need to swap it with an index.html that uses the index layout:

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. paginate: 5).

Keep It Simple

In keeping with the original Hyde theme, Hydeout aims to keep the overall design lightweight and plugin-free. JavaScript is currently limited only to Disqus and Google Analytics (and is only loaded if you provide configuration variables).

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 assets/css/main.scss file. 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.

    Pro-tip: The navs in the sidebar are flexboxes. Use the order property 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 order property to re-order.

  • _includes/favicons.html - Replace references to favicon.ico and favicon.png with 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.

New Features

  • 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 must have sidebar_link: true in their front matter to show up in the sidebar. To create a category page, use the category layout"

    layout: category
    title: My Category
    Description of "My Category"
  • You can control how pages are sorted by using the sidebar_sort_order parameter 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.html if 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 the search layout.

    layout: search
    title: Google Search
  • Disqus integration is ready out of the box. Just add the following to your config file:

      shortname: my-disqus-shortname

    If you don't want Disqus or want to use something else, override comments.html.

  • For Google Analytics support, define a google_analytics variable 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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].