Whilst the Jekyll docs are great, there’s been a few things that I’ve wanted to do with Jekyll which weren’t obvious - hence this post which I’ll use to document (or link to) any useful Jekyll snippets I’ve found.
Table of Contents
- Show the 10 most recent posts
- Show all posts from the current month
- Show all posts from the past 3 weeks
- sitemap.xml file for SEO/search engine bots
- Lazy-loaded images and YouTube videos
- Lazy-loaded image gallery
- 10 newest articles across multiple (but not all) categories
Show the 10 most recent posts
This is straightforward enough, and utilises the
limit literal to show the top 10 posts sitewide:
Or the last 10 posts within a specific category:
See the final heading for a way of showing the last 10 posts within multiple (but not all) of your site’s categories.
Show all posts from the current month
It can be quite handy to show just the posts from the current month - for example a news section which shows recent posts:
Show all posts from the past 3 weeks
It can be useful to show all posts within N weeks (or days, or months etc etc). Whilst Jekyll is obviously a static-site generator (so the end HTML won’t magically update itself on your server!), if you use the following on a regularly-published page on your website, it’ll work well:
sitemap.xml file for SEO/search engine bots
It’s always handy to have a
sitemap.xml file, linked to from your
robots.txt file. Firstly, this can be submitted to Google’s Webmaster search console. Secondly, many bots who look at your robots.txt file will then follow through to your sitemap file too - which is another way of helping make your site SEO friendly.
The entire sitemap.xml file should be saved at the root of your Jekyll project (aka alongside your
index.md and other main pages) and look as follows:
Lazy-loaded images and YouTube videos
Sites which are image heavy can be fairly expensive to load in the browser, and especially on mobile devices, if they load all images straight away. The natural solution to this is to lazy-load them, and something called
IntersectionObserver is perfect for this (it detects if the user is about to view a particular HTML element, and then runs a JS callback - which in our case, we can use to ‘switch’ a lazy-loaded image to have an active
The code for this lazy-loaded Jekyll plugin and JS is on Github but in general, the following Jekyll tag:
Will generate the following HTML:
Lazy-loaded image gallery
My site Super Tiny Homes has a few images galleries, but hand-crafting the markup for this was fairly laborious so I wrote a quick Jekyll plugin which received a list of images and created an image gallery out of it. See a demo of this here.
I explain how this works in detail (along with naturally sharing all the code) on Github but the gist is that the following can be included in a post’s front matter:
And then the image gallery can be referenced as needed in the article:
10 newest articles across multiple (but not all) categories
If your site has multiple categories but you only want to show the N newest articles from a subset of these, then the following snippet should work well:
In this case, I am only looking for articles relating to ‘electric’, ‘hybrid’ and ‘hydrogen’ (cars).
I’ll post more useful snippets as and when I come across them, so feel free to check back soon.