jekyll-tips Continuing the WordPress to Jekyll series,
I've decided to give a few Jekyll tips that I've learned in the process of converting my website.

Jekyll serve at the speed of light

Over 5 years, I've written quite a few posts, over 500 posts.
To test Jekyll out (for development) you have to run the following command:

1

jekyll serve
However, with 500+ posts, it takes about 70-90 seconds to build, which is annoying if you're making small tweaks,
that take minutes to compile.
There's a cool little trick to make compilation happen a lot quicker, by limiting the number of posts:
1

jekyll serve --limit_posts=3
This will only compile the last 3 posts, which is enough for 99% of test cases anyways.
The average compilation time with the limit_posts parameter is about 3-4 seconds.
This is a great trick especially if you have a bigger blog with 1000+ posts.

Using Grunt uncss

When moving from WordPress, in some cases it's easier to just rebuild the entire CSS to look like the existing website. In other cases (especially with smaller websites), it might be better to make a lighter version of the current CSS.

How do you know what CSS is being used?
grunt-uncss to the rescue!
This genius grunt task, automatically removes CSS that is not being used by going through specified HTML pages.
The grunt configuration is as follows:
1
2
3
4
5
6
7

uncss: {
  dist: {
    files: {
      'dist/css/tidy.css': ['app/index.html', 'app/about.html']
    }
  }
}
You can also ignore certain classes (for example: if you don't want to remove @media queries, add those to ignore).

Generate Category & Tags pages

The WordPress version of Kidsil had both Category and Tags pages. This is not a default feature of Jekyll.
The solution was quite simple though, I found this categories plugin, that had the entire explanation inside.
All I had to add was a layout for the category page, which looked like this:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

---
layout: default
---
<div class="category-body">
  <ul class="posts post-list">
  {{ "{%" }} for post in site.categories[page.category] limit:10 %}
    <li>
      <h2><a href="{{ "{{" }} post.url }}">{{ "{{" }} post.title }}</a></h2>
      <div class="post-meta">Posted on <a href="{{ "{{" }} post.url | prepend: site.baseurl }}">{{ "{{" }} post.date | date: "%b %-d, %Y" }}</a></div>
      <div class="post-content">
        {{ "{%" }} if post.excerpt %}
          {{ "{{" }} post.excerpt | strip_html | truncatewords:50 }}
        {{ "{%" }} else %}
          {{ "{{" }} post.content | strip_html | truncatewords:50 }}
        {{ "{%" }} endif %}
      </div>
      <div class="read-more"><a href="{{ "{{" }} post.url | prepend: site.baseurl }}">Read more ›</a></div>
    </li>
  {{ "{%" }} endfor %}
  </ul>
</div>
To generate the same thing for tags you simply need to copy the plugin and rename every appearance of "Category" to "Tag" (plural forms too of course), it's as simple as that!

Boost your CloudFlare caching

Cloudflare is a free CDN solution that saves me about 50% of my traffic.
When I first installed CloudFlare it was more around 20%, and I couldn't understand why such a small number of requests was cached. Then I realized that the HTML wasn't cached at all, along with some other resources.
After doing some research, I figured out a way to cache almost everything.
On your Cloudflare Dashboard, go to Page Rules, and create a new rule that looks like this:
1

*www.kidsil.net/*
Obviously you should switch the domain name with your own domain.
Make sure that under Custom Caching you select Cache Everything, Give relatively high expiration times (which will further save you bandwidth).

Important Note
Don't expect Cloudflare to cache at the same rate, it usually works in waves: sometimes it caches more, sometimes less, but there's no way (that I'm aware of) to cache 100%.