Jekylling to the next level

Jekyll is more than a static site generator. It’s fun and content-focused.

It’s a fantastic ruby gem that allows for generating HTML, CSS, and Javascript files with liquid, a powerful template language created by Shopify.

Permalink to heading Why using Jekyll? Why using Jekyll?

  • the learning curve is fast
  • ruby is a programmer-friendly language
  • static files can be host everywhere, and, most of the time, for free
  • the build time has been drastically reduced since version 3.8.5++
  • you write less code to do more things

Permalink to heading Built-in commands Built-in commands

Built-in options and commands are quite efficient.

Permalink to heading Profiling Profiling

Just add the built-in option --profile to your exec and you will get compilation time for each include, layout and other files in your project :

bundle exec jekyll serve --profile

Here is an example :


Permalink to heading Incremental builds Incremental builds

While it’s still an experimental feature, incremental builds are awesome :

bundle exec jekyll serve --incremental

Alternatively, you can set incremental: true in Jekyll’s _config.yml.


Permalink to heading Best practices Best practices

There are good ways to make the most of Jekyll.

Permalink to heading Liquid includes Liquid includes

Even if Jekyll 4++ caches all the things, you have to be extra careful with includes :

{% include myinclude.html %}

An include is useless if you only need it in a specific template. In this case please consider adding your code directly in the template.

Permalink to heading Use liquid tags and filters Use liquid tags and filters

As I ever said liquid is a powerful template language. It has built-in filters and tags you can use to save time. Please always check in the built-in tags and filters before making your custom tools.

For example, if you need to remove line breaks or to strip HTML from a string, there are already existing filters for that.

Besides, liquid supports interesting features such as for-else loops :

{% for product in collection.products %}
  {{ product.title }}
{% else %}
  The collection is empty.
{% endfor %}


A smart way to specify a fallback when the loop has zero length.

Permalink to heading Use collections Use collections

Instead of using built-in collection posts for anything and everything, you can easily declare a custom collection in Jekyll’s _config.yml:

    output: true
    url = "/portfolios/:path//"

The parameter output is useful to make private and public collections. If you add posts in the folder _porfolios and this parameter is set to true, your portfolios will have their URL according to the pattern /portfolios/xxxx.

To loop through your portfolio just write :

{% assign portfolios = site.portfolios %}
{% for portfolio in portfolios %}
  <a href="{{ portfolio.url }}">{{ portfolio.title }}</a>
{% endfor %}

Permalink to heading Use defaults Use defaults

Defaults allow for specifying the configuration for your pages, for your posts, and even for your custom collections :

    output: true
    url = "/portfolios/:path//"

  - scope:
      path: "
      type = "portfolios"
      type = "portfolio"

Here we set a custom layout by default for our custom collection. This way, we won’t have to specify the layout every time we add a new portfolio. Indeed, you can override these default settings in each portfolio markdown files.

Permalink to heading It’s powerful but there’s no UI! It’s powerful but there’s no UI!

Unlike CMS, static site generators do not provide any admin interface to write content. In a large range of projects, it’s a no-go.

Writing markdown is quite geeky at the end of the day.

Don’t worry, there are fantastic resources such as Netlify CMS.

I strongly recommend its use with Jekyll. Here is my personal setup :

It’s easy to map custom collections as you can see. Netlify CMS provides a complex and reliable editorial workflow based on GIT, no database is needed. It’s also possible to use custom templates for previews!

Permalink to heading Use Netlify Use Netlify

If you use a static site generator, there is a good chance that Netlify supports it.

It means you can automate a lot of things, including building on the fly!

Permalink to heading Wrap up Wrap up

I’ve been using this fantastic tool for years (since 2014).

The latest versions (4++) take it to another level! With a few good practices and some great additional resources, you can leverage the benefits of both CMS and static generators.

I do my best to update all my contents, but keep it mind that "Jekylling to the next level" has been published many months ago.