This document provides an overview of Jekyll themes and how to use them. It discusses the basic file structure of Jekyll sites, including posts and configuration files. It explains how to use gem-based themes, modify theme files, and switch between themes. The document recommends finding themes on GitHub and using the bundle command to install themes listed in the Gemfile. It also notes that one can create non-gem or custom themes from scratch.

1. Jekyll theming
By Ryan Brown
November 7, 2018

2. What is Jekyll?

3. From the Jekyll homepage:

4. Why use Jekyll? ⚗️
• Easy to use, your coding knowledge can be limited
• Well-established community
• Use GitHub Pages to deploy your site for free
• Lots of themes to choose from, or easily create your own!

5. Getting started

6. File structure 🗃
• _posts – collection of posts
• _config.yml – site settings and
configuration
• .gitignore – what files Git should not track
• index.md, about.md, 404.html – three
provided layout files
• Gemfile – where your gems live, theme
gems or plugins for example

7. Posts 📝
Post file naming convention:
What a post looks like:
Front matter
Goes at the top of the post in YAML formatting, starting and ending with three
dashes.

8. congif.yml file ⚙️
Site settings:
Site variables that can be used throughout the site.
Build settings:
Where you specify the theme and or plugins you want to use.

9. Gemfile 💎
• The Gemfile tells your project what gem dependencies it has.
• If you download a theme gem or plugin, it needs to be put in here
manually as well.

10. Liquid 💧
• Templating language created by Shopify
• You can use variables from config.yml all throughout your
site like so:
<p>{{site.title}}</p>
• A for loop looks like this:
{% for post in posts %}
<p>{{post.title}}</p>
{% endfor %}

11. Your site at this point:

12. Where are the styles and layout
coming from? 🗃
Your config.yml file is using a default theme
gem:

13. But where are the theme files? 🗃
They’re hidden from view!
But don’t fret, you can see all the files by running the
following in your terminal:
bundle open minima
Jekyll is using them automagically.

14. Gem theme file structure 🗃
• _includes – reusable partials like header
and footer
• _layouts – templates for your homepage
or posts, for example
• _sass – where all of your scss files live
• assets – images, svgs, icons, and where
you initially import your scss files

15. Why use a gem theme? 🙇♂️
• You can keep getting theme updates as new features or
improvements are made
• Allows you to focus on your content
• Switching to another theme via gem is often much easier

16. How to modify a gem theme 👩🎨
Let’s say you want to override the post layout.
1. You’ll need to create a _layouts folder in your project.
2. You can either copy over the post.html file from the
theme, or create your own post.html file inside _layouts
Your files will take precedence over the theme’s, but
they must be named and organized the same.

17. Beware 🗃♂️
• You will no longer receive updates for that file you are
overriding.
• To modify any stylesheet you must also copy the main
sass file. For Minima this would be the
_sass/minima.scss file.
• If all you want to do is modify a few styles, you can
just create a new stylesheet that uses more specific
classes.

18. How to switch gem themes 🎨
1. Go find a theme you like
2. Add the theme to your Gemfile like below:
3. Run bundle install in your terminal
4. Change your theme setting in config.yml
5. Run bundle exec jekyll serve

19. You don’t have to use gem-
based themes 🙅♂️
• You can just copy all the files over from the theme that you
want to use
– Note that if you go this route you must also manually
install all plugins
• Or just create all your own files from scratch!
– This can be an awesome learning opportunity

20. Or you can create your own
gem theme!
• It’s not as hard as you think
• You’ll look really attractive to potential employers

21. ryandevelops.com
Check out my article on how to create your
own Jekyll gem theme!
My theme: jekyll-theme-collider

22. Thank you 🎉
ryandevelops.com
@ryan_develops
@ryancolorcafe