01 Feb 2019 · 2 min read

Blogging: From Jekyll to Zola

When I first created this blog I used <a rel="noopener nofollow noreferrer external" target="_blank" href="https://jekyllrb.com">Jekyll</a> for my blogging needs mostly because that was the first time I had come across the concept of a Static Site Generator (SSG), generating html from markdown posts and Jekyll was and still is the most popular SSG to date. Also because of GitHub’s free hosting for Jekyll sites. Jekyll gained its popularity by being a simple yet powerful framework. It combined the Liquid templating language with a markdown processor to create an engine that spits out a completely static website with no database or any dependencies. Once you have or create a theme you can focus on what matters the most, writing the content, without worrying about the formatting or the layout or the specifies of a markup language like HTML while you are in the thought process of writing a blog. With Markdown you can still control how the text looks and add addition images and links which makes it a lot better to compose and write than HTML. A pleasant offline writing experience and ease of development is what makes Jekyll and SSGs as a whole great. <h2 id="performance"><a class="zola-anchor" href="#performance" aria-label="Anchor link for: performance">🔗</a> Performance</h2> Jekyll has a lot of great themes made by available by generous people which makes it easy to pick one, customise it and start blogging. It does have a short learning curve though and once you start writing a lot more posts you have to consider the performance of how long it’s taking to actually generate the site from your posts. Building 15 pages without LSI and a atom feed generation and jekyll-assets plugin for image processing takes <code>56.202 seconds</code>. That’s a long time! <pre class="giallo" style="color: #657B83; background-color: #FDF6E3;" ><code data-lang="plain">$ bundle exec jekyll build Configuration file: /home/shalzz/dev/shalzz.github.io/_config.yml Source: /home/shalzz/dev/shalzz.github.io Destination: /home/shalzz/dev/shalzz.github.io/_site Incremental build: disabled. Enable with --incremental Generating... Jekyll Feed: Generating feed for posts done in 56.202 seconds. Auto-regeneration: disabled. Use --watch to enable.</code></pre> On subsequent builds with incremental build enabled, it takes <code>2.89 seconds</code>. Much better but still slow. <pre class="giallo" style="color: #657B83; background-color: #FDF6E3;" ><code data-lang="plain">$ bundle exec jekyll build --incremental Configuration file: /home/shalzz/dev/shalzz.github.io/_config.yml Source: /home/shalzz/dev/shalzz.github.io Destination: /home/shalzz/dev/shalzz.github.io/_site Incremental build: enabled Generating... Jekyll Feed: Generating feed for posts done in 2.896 seconds. Auto-regeneration: disabled. Use --watch to enable.</code></pre><h2 id="zola"><a class="zola-anchor" href="#zola" aria-label="Anchor link for: zola">🔗</a> Zola</h2> I recently started learning <a rel="noopener nofollow noreferrer external" target="_blank" href="https://rust-lang.org">Rust</a> and when I started looking around for a faster alternative than Jekyll for my blog, I found <a rel="noopener nofollow noreferrer external" target="_blank" href="https://getzola.org">Zola</a> a static site generator written in Rust that compiles to a binary with performance much better than Jekyll ( slightly slower than Hugo as of now ) since it’s a native binary and has no runtime with no plugins and everything in built, it was perfect. Compared to Jekyll’s Liquid template engine Zola uses Tera as its template engine which is also written in Rust. It has the same syntax plus the concept of <code>block</code>s that can be inherited and overridden when you extend a template from another template. If you are also looking at Hugo, Tera is a huge step up from it’s Go based template language syntax. After making some modifications to my sites layouts/templates due to the subtle difference between the two frameworks and their structuring I had now effectively extracted my sites templates and CSS to its own <a rel="noopener nofollow noreferrer external" target="_blank" href="https://github.com/shalzz/butler">theme</a> that can be reused by anyone else. <h3 id="performance-1"><a class="zola-anchor" href="#performance-1" aria-label="Anchor link for: performance-1">🔗</a> Performance</h3> Building 16 pages (including this one) with 8 images and no cache with Zola takes only <code>0.13 seconds</code>. Zola turns out to be an order of magnitude faster than Jekyll. That’s a huge improvement. <pre class="giallo" style="color: #657B83; background-color: #FDF6E3;" ><code data-lang="plain">$ zola build Building site... -> Creating 16 pages (0 orphan), 2 sections, and processing 8 images Done in 130ms.</code></pre> Combining an already fast engine with a <a rel="noopener nofollow noreferrer external" target="_blank" href="https://github.com/features/actions">GitHub Action</a> that reuses a cached docker image in the background, from a git push to being published on GitHub Pages takes on average only ~20 seconds compared to Jekyll + Travis total time of ~2 minutes. In the end I’m quite happy with Zola and it’s architecture and there’s more improvements to come with Zola 0.6 and above. <h3 id="further-reading"><a class="zola-anchor" href="#further-reading" aria-label="Anchor link for: further-reading">🔗</a> Further Reading</h3> <ul> <li><a rel="noopener nofollow noreferrer external" target="_blank" href="https://www.getzola.org/documentation/getting-started/installation/">Zola Docs</a></li> <li><a rel="noopener nofollow noreferrer external" target="_blank" href="https://tera.netlify.com/docs/templates/#templates">Tera Docs</a></li> </ul> <h3 id="more-links"><a class="zola-anchor" href="#more-links" aria-label="Anchor link for: more-links">🔗</a> More Links</h3> <ul> <li><a rel="noopener nofollow noreferrer external" target="_blank" href="https://github.com/shalzz/butler">Zola theme - Butler</a></li> <li><a rel="noopener nofollow noreferrer external" target="_blank" href="http://github.com/shalzz/zola-deploy-action">Zola Deploy GitHub Action</a></li> </ul>