CheatSheetsHero

Catalog / Jekyll Cheatsheet

Jekyll Cheatsheet

A comprehensive cheat sheet covering Jekyll, a static site generator. Includes setup, directory structure, front matter, templating, and more, designed for quick reference.

Getting Started

Installation and Setup

Install Jekyll and Bundler:

gem install jekyll bundler

Create a new Jekyll site:

jekyll new myblog
cd myblog

Serve the Jekyll site locally:

bundle exec jekyll serve

For GitHub Pages compatibility, use this Gemfile:

source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins

Update gems:

bundle update

Directory Structure 

./
├── _config.yml        # Configuration file
├── _data/            # Data files (YAML, JSON)
│   └── ...
├── _drafts/          # Draft posts
│   └── ...
├── _posts/           # Blog posts
│   └── 2024-01-01-hello.md
├── _layouts/         # Page layouts
│   ├── default.html
│   └── post.html
├── _includes/        # Reusable partials
│   ├── header.html
│   └── footer.html
├── _sass/            # Sass files
│   └── ...
├── assets/           # Assets such as images, CSS, etc.
│   └── ...
└── _site/            # Generated static site
    └── ...

Front Matter & Configuration

Basic Front Matter

Basic syntax:

---
layout: post
title: Hello
---
Hello! this is my post.

Common front matter variables:

  • layout: Specifies the layout to use.
  • title: The title of the page or post.

Other front matter examples:

permalink: '/hello'
published: false
category: apple
categories: ['html', 'css']
tags: ['html', 'css']

Configuration (_config.yml)

Basic configuration file example:

source: .
destination: _site
exclude:
  - Gemfile
  - Gemfile.lock
include: ['.htaccess']

Key configuration options:

  • source: Source directory.
  • destination: Destination directory.
  • exclude: Files to exclude.
  • include: Files to explicitly include.

More configuration options:

markdown: kramdown
theme: minima
plugins:
  - jekyll-feed

Templating with Liquid

Page Variables

Accessing page variables in templates:

<title>{{ page.title }}</title>
<p>{{ page.description | truncate_words: 20 }}</p>

Common page variables:

  • page.title: Title of the page.
  • page.content: Content of the page.
  • page.date: Date of the page.

More examples of page variables:

{{ page.url }}
{{ page.id }}
{{ page.categories }}
{{ page.tags }}

Loops

Looping through posts:

{% for post in site.posts %}
  <a href="{{ post.url }}">
    <h2>{{ post.title }}</h2>
    <p>{{ post.date | date_to_string }}</p>
  </a>
{% endfor %}

Looping through data:

{% for member in site.data.members %}
  <h3>{{ member.name }}</h3>
  <p>{{ member.bio }}</p>
{% endfor %}

Conditionals

Basic conditional logic:

{% if page.image.feature %}
  ...
{% elsif xyz %}
  ...
{% else %}
  ...
{% endif %}

Examples:

{% if page.category == 'React' %}
{% if page.category == 'React' or page.featured %}
{% if page.tags contains 'Featured' %}

Includes (Partials)

Including partials:

{% include header.html %}

Including partials with local variables:

{% include header.html page=page %}

Filters & Blogging

Date Formatting

Formatting dates:

{{ site.time | date: "%Y %m %d" }}

Common date filters:

  • date_to_xmlschema
  • date_to_rfc822
  • date_to_string
  • date_to_long_string

String Manipulation

String filters:

{{ page.title | default: "xxx" }}

Common string filters:

  • upcase, downcase
  • remove, replace
  • truncate, truncatewords
  • prepend, append
  • strip_html, strip_newlines

Blogging Basics

Post file naming convention:

_posts/YEAR-MONTH-DAY-title.md

Image paths in posts:

![My helpful screenshot]({{ site.url }}/assets/screenshot.jpg)

Drafts:

  • Store in _drafts/.
  • Use jekyll build --drafts to include drafts.

Defining excerpts:

---
title: My blog post
excerpt: This post is about cats
---

Excerpt separators:

---
excerpt_separator: <!--more-->
---

Excerpt here
<!--more-->
More post body here
Download PDF