Skip to content

Plugins & Site Components

Luna edited this page Dec 3, 2019 · 1 revision

Jekyll works with plugins that handle things like Caching, Sitemaps, SEO, Redirection, etc.

GitHub Pages

GitHub Pages restricts what plugins it will allow to run. While you can run other plugins locally, their effects might not show up on GH Pages - so it's best to stick with what's on the Approved list. I've made an exception for the jekyll-admin plugin.

GitHub Pages Default Plugins:

  • jekyll-coffeescript
  • jekyll-gist
  • jekyll-github-metadata
  • jekyll-paginate
  • jekyll-relative-links
  • jekyll-optional-front-matter
  • jekyll-readme-index
  • jekyll-default-layout
  • jekyll-titles-from-headings

GitHub Pages Optional Plugins:

  • jekyll-feed
  • jekyll-redirect-from
  • jekyll-seo-tag
  • jekyll-sitemap
  • jekyll-avatar
  • jemoji
  • jekyll-mentions
  • jekyll-include-cache

Local Development

FOr local development, you might not want to have all the plugins running, as they may slow things down. Example: there's no reason you'd need jekyll-feed or jekyll-seo-tag off. A good way to deal with this is to have an untracked secondary config file (see Using Git).

I'd recommend setting your local plugins in _config_local.yml to the following:

plugins:
  - github-pages
  - jekyll-admin
  - jekyll-include-cache
  # - jekyll-feed
  - jekyll-redirect-from
  # - jekyll-seo-tag
  # - jekyll-sitemap
  - jekyll-titles-from-headings

Jekyll Without Plugins

While plugins are super useful for most things, sometimes a plugin-less solution ends up being better. For example, the Search Bar was implemented using Simple Jekyll Search

Plugin Docs

Here are links to the Plugins' documentation pages

Jekyll SEO Tag

See jekyll-seo-tag - Basic Usage , as well as jekyll-seo-tag - Advanced Usage for more info

The SEO tag will respect the following YAML front matter if included in a post, page, or document:

  • title - The title of the post, page, or document
  • description - A short description of the page's content
  • image - URL to an image associated with the post, page, or document (e.g., /assets/page-pic.jpg)
  • author - Page-, post-, or document-specific author information (see Advanced usage)
  • lang - Page-, post-, or document-specific language information

Note: Front matter defaults can be used for any of the above values as described in advanced usage with an image example.

Prefix-Free

A script that lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

Including it is as simple as adding a line of code to _includes/head.html

<!-- _includes/head.html - no more CSS Prefixing!! -->
<script src="{{ "/scripts/prefixfree.min.js" | relative_url }}" type="text/javascript" charset="utf-8" async></script>

See Github - prefix-free docs for more info.

Clone this wiki locally