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.

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

Built-in commands

Built-in options and commands are quite efficient.

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 :

Nice!

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.

Source

Best practices

There are good ways to make the most of Jekyll.

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.

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 %}

source

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

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:

collections:
    portfolios:
      output: true
      permalink: /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 %}

Use defaults

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

collections:
    portfolios:
      output: true
      permalink: /portfolios/:path/

defaults:
  -
    scope:
      path: ""
      type: "portfolios"
    values:
      layout: "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.

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!

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!

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.