The project is in a healthy, maintained state
Ultimate Jekyll Theme for Blogging.
 Project Readme


Hydn Jekyll Theme


This project is still under development, and core features are subject to change without prior notice.


Add this line to your Jekyll site's Gemfile:

gem "hydn"

And add this line to your Jekyll site's _config.yml:

theme: hydn

And then execute:

$ bundle

Or install it yourself as:

$ gem install hydn


Hydn basically offers a lot of useful features for blogging including basic Jekyll blog features.


Refers to files within the _layouts directory, that define the markup for your theme.

  • default.html — The base layout that lays the foundation for subsequent layouts. The derived layouts inject their contents into this file at the line that says {{ content }} and are linked to this file via
  • page.html — The layout for your documents that contain FrontMatter, but are not posts
  • post.html — The layout for your posts.

Main Heading and Content-injection

The home layout will inject all content from your / index.html. before the Posts heading. This will allow you to include non-posts related content to be published on the landing page under a dedicated heading. We recommended that you title this section with a Heading2 (##).

Usually the site.title itself would suffice as the implicit 'main-title' for a landing-page. But, if your landing-page would like a heading to be explicitly displayed, then simply define a title variable in the document's front matter and it will be rendered with an <h1> tag.

Post Listing

It will be included when your site contains one or more valid posts or drafts.


Refers to snippets of code within the _includes directory that can be inserted in multiple layouts (and another include-file as well) within the same theme-gem.

  • comments.html — Code to markup disqus comment box.
  • footer.html — Defines the site's footer section.
  • header.html — Defines the site's main header section. By default, pages with a defined title attribute will have links displayed here.
  • navigation.html — Defines the site's navigation(menu) bar. It will be automatically add more menu when you have more linked category.
  • postlist-item.html — Defines the post's item when the posts are listed.
  • search.html — Code to search box using tipuesearch.


Refers to .scss files within the _sass directory that define the theme's styles.

  • hydn/about_layout.scss — Sass partial that defines the blog's About Page style for layout.
  • hydn/code.scss — Sass partial that defines syntax highliting styles for code in your post.
  • hydn/header.scss — Sass partial for resets and defines styles for header
  • hydn/layout.scss — Sass partial for resets and defines each layout's styles for various HTML element
  • hydn/main.scss — Sass partial for resets and defines main styles for various HTML element
  • hydn/tagpost.scss — Sass partial for resets and defines styles for tagpost's element
  • hydn/typo.scss — Sass partial for resets and defines post styles when you get the post.


Refers to various asset files within the assets directory.

  • assets/css/style.scss — Imports sass files from within the _sass directory and gets processed into the theme's stylesheet: assets/css/styles.css.
  • assets/img — Image files for our theme.
  • assets/tipuesearch — For compose search box in our theme.


-jekyll-seo-tag plugin is preinstalled to make sure your website gets the most useful meta tags. See usage to know how to set it up.

-jekyll-gist plugin is preinstalled to add gist. See usage to know how to set it up.

-jekyll-paginate plugin is preinstalled to show your posts more useful.


Have the following line in your config file:

theme: hydn

Customizing templates

To override the default structure and style of hydn, simply create the concerned directory at the root of your site, copy the file you wish to customize to that directory, and then edit the file.

The site's default CSS has now moved to a new place within the gem itself, assets/css/style.scss.

In hydn, if you only need to customize the colors of the theme, please follow the method below.

If you only want to change the colors of the blog, then you open _sass/hydn/header.scss , _sass/hydn/footer.scss. And then change the variable at the top.

And if you customize other things, you can open _sass and make new scss file. And add a line of the code at the _sass/hydn/main.scss file below.

@import "../new_file_name.scss";

Therefore, your assets/css/style.scss should contain the following at hydn:


@import "hydn/main";

Enabling comments (via Disqus)

Optionally, if you have a Disqus account, you can tell Jekyll to use it to show a comments section below each post.

To enable it, add the following lines to your Jekyll site:

disqus: True
disqus_shortname: "hydn"

You can find out more about Disqus' shortnames here.

Comments are enabled by default and will only appear in production, i.e., JEKYLL_ENV=production

If you don't want to display comments for a particular post you can disable them by deleting{% include comment.html %} to that post.html's bottom.

Enabling Searchbox (via tipuesearch)

Optionally, you can search your post via search box.

To enable it, add the following lines to your Jekyll site:

         pages: false
         collections: []
         files: [search.html, index.html, tagpost.html]
         categories: []
         tags: []

In this code, pages: false means that you don't want to search genera html pages for focusig post's search. And via exclude, you can choose file, categories and tags that you don't want to show when you search.

Post Author

From hydn, is expected to be a mapping of attributes from _authors directory.

If you want to add more registered author, you can add authorname.html files in _author directory.

If you add author, you can get author's personal introduce page. Otherwise, you can just display author's name in your post.

Here is example.

authors: [ann, Song Kim]

In this code, ann is the registered author, but Song Kim is not. So when you make is post, only ann has her own introduce page.

Enabling Google Analytics

You can get how to enabling google analytics in blog's about page.


Bug reports and pull requests are welcome on GitHub at[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.


To set up your environment to develop this theme, run bundle install.

Your theme is setup just like a normal Jekyll site! To test your theme, run bundle exec jekyll serve and open your browser at http://localhost:4000. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

When your theme is released, only the files in _layouts, _includes, _sass and assets tracked with Git will be bundled. To add a custom directory to your theme-gem, please edit the regexp in hydn.gemspec accordingly.


The theme is available as open source under the terms of the MIT License.


Our goal is to make Hydn usable in common situations. This project still needs a lot of improvements (including this Any kind of contribution is big welcome!

Making roadmap is still in progress.