Improving Hydejack's Build Speed
Hydejack was designed with personal sites in mind, i.e. sites with around 100 pages. Because of this, build speed hasn’t been a major concern during its development. When attempting to use Hydejack with thousands of pages this becomes very apparent, as build times go from seconds, to minutes, to hours.
Before we get started, if you are primarily concerned with build times during writing/previewing new articles, try using the
--incremental flag, e.g.
bundle exec jekyll serve --incremental
For more, see the Jekyll docs .
With that out of the way, here are three ways to improve Hydejack’s production build speed:
Disable Inline CSS
Inlining critial CSS into each page increases page load speed in the browser, but it also introduces a significant build time increase. This is due to
scssify being called for every single page with a large chunk of Hydejack’s SCSS as input.
To disable this optimization, set
true in the config file.
hydejack: no_inline_css: true
Disable Per-Page Styles
Hydejack allows you to change the accent color on a per-page basis. While this is a neat feature, it’s certainly not necessary and many sites don’t use it. Similar to inline CSS, it involves a call to
scssify per page, which increases build time (though to a lesser extent).
To disable this feature, set
true in the config file.
hydejack: no_page_style: true
Use Simpler Related Posts
Hydejack does some clever things to show more related “Related Posts” on the bottom of blog posts. However, clever things (implemented within the liquid templating engine) take time, and this becomes apparent when trying to build a site with 10,000 posts.
To speed up buidling further, set the (admittedly poorly named)
use_lsi option to
hydejack: use_lsi: true
Define Sidebar Entries in the Config File
In previous versions of Hydejack adding entries to the sidebar was done by setting
true in the front matter of a page. This meant that finding the sidebar entries required checking every page for the
menu flag, once per page. This was slow and the time increased quadratically with the number of pages. Staring with version 8.4.0, you can define sidebar entries in the config file under the
menu key like so:
menu: - title: Blog url: /blog/ - title: Projects url: /projects/ - title: Resume url: /resume/ - title: About url: /about/
Hydejack’s default settings are fine for small personal blogs of around 100 pages. However, when building large sites with 1,000 pages or more, build time becomes an issue. The following settings will help, but can’t overcome the inherent limitations of Jekyll.
# file: _config.yml hydejack: no_inline_css: true no_page_style: true use_lsi: true menu: - title: Blog url: /blog/ - title: Projects url: /projects/ - title: Resume url: /resume/ - title: About url: /about/