8.3 KiB
8.3 KiB
| title | jekyll_escape | layout | tags | |
|---|---|---|---|---|
| Jekyll | true | 2017/sheet |
|
{% raw %}
Installation
# Install the gems
gem install jekyll bundler
# Create a new site at `./myblog`
jekyll new myblog
cd myblog
bundle exec jekyll serve
See: Jekyll quickstart
Installation (GitHub pages version)
# Requires bundler
gem install bundler
# Build the Gemfile
echo "source 'https://rubygems.org'" > Gemfile
echo "gem 'github-pages', group: :jekyll_plugins" >> Gemfile
# Install gems
bundle
# Start server
bundle exec jekyll serve
This is the recommended setup, especially if you're using GitHub pages. See: github/pages-gem
Directories
./
├── _config.yml
│
├── _data/
│ └── ...
│
├── _drafts/
│ └── ...
│
├── _posts/
│ └── 2014-01-01-hello.md
│
├── _layouts/
│ ├── default.html
│ └── post.html
│
├── _includes/ - partials
│ ├── header.html
│ └── footer.html
│
└── _site/
└── ...
Front-matter
{: .-three-column}
Basic frontmatter
---
layout: post
title: Hello
---
See: Front-matter
Other frontmatter stuff
permalink: '/hello'
published: false
category: apple
categories: ['html', 'css']
tags: ['html', 'css']
Configuration
source: .
destination: _site
exclude: [dir, file, ...]
include: ['.htaccess']
See: Configuration
Markup
Page variables
<title>{{ page.title }}</title>
<!-- Filters -->
<p>{{ page.description | truncate_words: 20 }}
Loops
{% for post in site.posts %}
<a href="{{ post.url }}">
<h2>{{ post.title }} — {{ post.date | date_to_string }}</h2>
</a>
{{ post.content }}
{% endfor %}
Dates
{{ page.date | date: "%b %d, %Y" }}
If
{% if page.image.feature %}
{% else if xyz %}
{% else %}
{% endif %}
Includes (partials)
{% include header.html %}
<!-- Including local vars -->
{% include header.html page=page %}
Comments
{% comment %}
{% endcomment %}
Expression
Top-level variables
{{ site }} - from config.yml
{{ page }} - from frontmatter, and page-specific info
{{ content }} - html content (use in layouts)
{{ paginator }} - ...
See: Variables
Site
{{ site.time }} - current time
{{ site.pages }} - list of pages
{{ site.posts }} - list of posts
{{ site.related_posts }} - list
{{ site.categories.CATEGORY }} - list
{{ site.tags.TAG }} - list
{{ site.static_files }}
Page
{{ page.content }} - un-rendered content
{{ page.title }}
{{ page.excerpt }} - un-rendered excerpt
{{ page.url }}
{{ page.date }}
{{ page.id }} - unique id for RSS feeds
{{ page.categories }}
{{ page.tags }}
{{ page.path }}
{{ post.excerpt | remove: '<p>' | remove: '</p>' }}
{{ post.excerpt | strip_html }}
<!-- blog pagination: -->
{{ page.next }}
{{ page.previous }}
Paginator
Paginator setup
Add this to _config.yml:
{: .-setup}
paginate: 5
paginate_path: "blog/:num"
See: Paginator
Numbers
{{ paginator.page }} - page number
{{ paginator.total_posts }}
{{ paginator.total_pages }}
{{ paginator.per_page }}
Iterating through posts
{% for post in paginator.posts %} ... {% endfor %}
Previous button
{% if paginator.total_pages > 1 %}
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}">Previous</a>
{% else %}
{% endif %}
{% endif %}
{{ paginator.next_page }} - page number
{{ paginator.next_page_path }}
Blogging
Paths
_posts/YEAR-MONTH-DAY-title.md
See: Blogging
Image paths
See: Image paths
Drafts
vi _drafts/a-draft-post.md
jekyll build --drafts
Posts in _drafts only show up in development, but not production.
See: Drafts
Defining excerpts
---
title: My blog post
excerpt: This post is about cats
---
Hello, let's talk about cats. (···)
Put a key excerpt in the frontmatter.
See: Excerpts
Displaying excerpts
{{ post.excerpt }}
{{ post.excerpt | remove: '<p>' | remove: '</p>' }}
{{ post.excerpt | strip_html }}
Excerpt separator
---
excerpt_separator: <!--more-->
---
Excerpt here
<!--more-->
More post body here
Alternatively, you can put excerpts inline in your post by defining excerpt_separator.
Permalinks
# _config.yml
permalink: date # /:categories/:year/:month/:day/:title.html
permalink: pretty # /:categories/:year/:month/:day/:title/
permalink: none # /:categories/:title.html
permalink: "/:title"
See: Permalinks
More features
Data
_data/members.yml
{: .-setup}
{% for member in site.data.members %}
...
{% endfor %}
See: Data
Collections
# _config.yml
collections:
- authors
{: .-setup}
# _/authors/a-n-roquelaire.md
---
name: A. N. Roquelaire
real_name: Anne Rice
---
{% for author in site.authors %}
See: Collections
Helpers and filters
Dates
{{ site.time | date_to_xmlschema }} #=> 2008-11-07T13:07:54-08:00
{{ site.time | date_to_rfc822 }} #=> Mon, 07 Nov 2008 13:07:54 -0800
{{ site.time | date_to_string }} #=> 07 Nov 2008
{{ site.time | date_to_long_string }} #=> 07 November 2008
{{ site.time | date: "%Y %m %d" }}
Preprocessors
| textilize
| markdownify
| jsonify
| sassify
| scssify
Array filters
site.posts | where:"year","2014"
site.posts | group_by:"genre" #=> { name, items }
site.posts | sort
| first
| last
| join: ","
| array_to_sentence_string #=> CSS, JavaScript and HTML
| map: "post" # works like 'pluck'
| size
String filters
| default: "xxx"
| upcase
| downcase
| remove: "<p>"
| replace: "super", "mega"
| remove_first: "<p>"
| replace_first: "super", "mega"
| truncate: 5
| truncatewords: 20
| prepend: "Mr. "
| append: " Sr."
| camelize
| capitalize
| pluralize
| strip_html
| strip_newlines
| newline_to_br
| split: ','
| escape
| escape_once
| slice: -3, 3
See: String filters
String filters (Jekyll-only)
| number_of_words
| slugify
| xml_escape #=> CDATA
| cgi_escape #=> foo%2Cbar
| uri_escape #=> foo,%20bar
Numbers
| minus: 2
| plus: 1
| time: 4
| divided_by: 3
| modulo: 2
Code highlighter
{% highlight ruby linenos %}
def show
...
end
{% endhighlight %}
Integration
Bundler
In _plugins/bundler.rb:
require "bunder/setup"
Bundler.require :default
Compass
Also see
{: .-one-column}
- Jekyll docs jekyllrb.com
- Jekyll: templates jekyllrb.com
- Liquid: output shopify.com
- Liquid: logic shopify.com
- Liquid: filters shopify.com
- Liquid for designers github.com/Shopify {: .-also-see}
{% endraw %}