Changing accent colors and sidebar images

Hydejack allows you to choose the background image of the sidebar, as well as the accent color (color of the links, selection and focus outline, etc…) on a per-page, per-category, per-tag, per-author and global basis.

Set the fallback values in _config.yml, which are used should no other rule (page, category, tag, author) apply:

NOTE: I recommend using a blurred image in order for the text to remain readable. If you save a blurred image as JPG, it will also drastically reduce its file size.

The accent_image property also accepts the special value none which will remove the default image.

You can also provide a single color instead of an image like this:

# file: _config.ymlaccent_image:background:'#202020'# provide a valid CSS background valueoverlay:false# set to true if you want a dark overlay

Changing fonts

Hydejack lets you configure the font of regular text and headlines, and it has built-in support for Google Fonts. There are three keys in _config.yml associated with this: font, font_heading and google_fonts. The defaults are:

font and font_heading must be valid CSS font-family values. When using Google Fonts make sure they consist of at least two fonts (everything except the first entry will be used as a fallback until the fonts have completed loading).

The google_fonts key is the string necessary to fetch the fonts from Google. You can get it from the download page at Google Fonts after you’ve selected one or more fonts:

Using safe web fonts

If you prefer not to use Google Fonts and use safe web fonts instead, set no_google_fonts to true:

# file: _config.ymlhydejack:no_google_fonts:true

In this case, font and font_heading do not have to contain more than one font. You may also remove the google_fonts key in this case.

Choosing a blog layout

Hydejack features two layouts for showing your blog posts.

The list layout only shows the title and groups the posts by year of publication.

The blog layout is a traditional paginated layout and shows the title and an excerpt of each post.

In order to use the list layout add the following front-matter to a new markdown file:

---layout:listtitle:Home---

If you want to use the blog layout, you need to add jekyll-paginate to your Gemfile and to the plugins list in your config file:

# file: Gemfilegem"jekyll-paginate"

# file: _config.ymlplugins:-jekyll-paginate

You also need to add the paginate and paginate_path keys to your config file, e.g.

# file: _config.ymlpaginate:5paginate_path:'/page-:num/'

The blog layout needs to be applied to a file with the .html file extension and the paginate_path needs to match the path to the index.html file. To match the paginate_path above, put a index.html with the following front matter in the root directory:

Using the blog layout in a subdirectory

If you want to use the blog layout at a URL like /my-blog/, create the following folder structure:

├── my-blog
│ └── index.html
├── my-blog.md
└── _config.yml

You can use the same index.html as before:

# file: my-blog/index.html---layout:blogtitle:Blog---

(Optional) If you want to add a link to the blog in the sidebar, DO NOT add the menu key to the front matter of my-blog/index.html. Instead, create a new markdown file called my-blog.md and add it there:

# file: my-blog.md---title:Blogmenu:true---

Finally, in your cofnig file, make sue the pageinate_path matches the location of the index file:

# file: _config.ymlpaginate:5paginate_path:/my-blog/page-:num/

Adding an author

As a bare minimum, you should add an author key with a name and email sub-key (used by the feed plugin) to to your config file:

If you would like the author to be displayed in the about section below a post or project*, as well as the top of about and welcome* pages, add an about key and provide some markdown content. I recommend using the YAML pipe | syntax, so you can include multiple paragraphs:

Adding an author’s picture

If you’d like for the author’s picture to appear in addition the the about text (see above), you can either use the jekyll-avatar plugin or provide URLs to images manually.

To use the plugin, add it to your Gemfile and the list of plugins in your config file:

# file: Gemfilegem"jekyll-avatar"

# file: _config.ymlplugins:-jekyll-avatar

Run bundle install for the changes to take effect.

Make sure you have provided a GitHub username in your config file (github_username), or to the author key (author.social.github, author.github.username, or author.github). See Adding social media icons for more.

To set an image manually, you have to provide an URL to the author’s picture key:

# file: _config.ymlauthor:picture:/assets/img/me.jpg

If you’d like to provide multiple versions for screens with different pixel densities, you can provide path and srcset keys instead:

NOTE: You can add any platform, even if it’s not defined in social.yml, by providing a complete URL. However, a fallback icon will be used when no icon is available. Supplying your own icons is an advanced topic.

Adding an email, RSS icon or download icon

If you’d like to add an email , RSS , or download icon to the list, add the email, rss, or download key, e.g.:

Enabling comments

Hydejack supports comments via Disqus. Before you can add comments to a page you need to register and add your site to Disqus’ admin console. Once you have obtained your “Disqus shortname”, you include it in your config file:

# file: _config.ymldisqus:<disqus shortname>

Now comments can be enabled by adding comments: true to the front matter.

---layout:posttitle:Hello Worldcomments:true---

You can enable comments for entire classes of pages by using front matter defaults. E.g. to enable comments on all posts, add to your config file:

# file: _config.ymldefaults:-scope:type:postsvalues:comments:true

Enabling Google Analytics

Enabling Google Analytics is as simple as setting the google_analytics key.

# file: _config.ymlgoogle_analytics:UA-XXXXXXXX-X

Conversely, if you want to disable it, you only have to remove the key and no GA code will be part of the generated pages.

Changing built-in strings

You can change the wording of built-in strings like “Related Posts” or “Read more” in _data/strings.yml. If you are using the gem-based version, you can get the default file here.

You will frequently find markers like <!--post_title-->. You can place them freely within your string and they will be replaced with the content they refer to.

You may also use this feature to translate the theme into different languages. In this case you should also set the lang key to your config file, e.g.

# file: _config.ymllang:cc-ll

where cc is the 2-letter country code and ll specifies a 2-letter location code, e.g.: de-at.

You may also change the strings used for formatting dates and times (look out for the date_formats key), but be aware that the values you provide need to be valid Ruby format directives.

Enabling newsletter boxes*

To enable showing newsletter subscription boxes below each post and project, provide your Tinyletter username to the tinyletter key in the config file.

# file: _config.ymltinyletter:<tinyletter username>

To edit the content of the newsletter box, open _data/strings.yml, and change the entries under the tinyletter key.

If want to use a different mailing provider, like MailChimp, you can build your own form, and insert it into _includes/my-newsletter.html. There you will also find an example form for MailChimp, where you need to fill in site.mailchimp.action and site.mailchimp.hidden_input (you can get these from MailChimp).