It's Jekyllicious!!
Tips and tricks for blogging with Jekyll
What is Jekyll?
A 60 second introduction
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2701432/noun_8797.png)
Jekyll is a static site generator built with Ruby.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2696200/Screen_Shot_2016-06-01_at_3.38.58_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2696220/ruby_logo_2.png)
Static vs. CMS
What does Static mean?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2696181/Screen_Shot_2016-06-01_at_3.32.46_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2696216/delete_database.png)
Jekyll vs. HTML + CSS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2696371/Screen_Shot_2016-06-01_at_4.08.15_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2696376/Screen_Shot_2016-06-01_at_4.09.52_PM.png)
Sites built with Jekyll
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2696276/Screen_Shot_2016-06-01_at_3.47.40_PM.png)
Github Services
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2696282/Screen_Shot_2016-06-01_at_3.50.19_PM.png)
8th Light Blog
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2696289/Screen_Shot_2016-06-01_at_3.49.56_PM.png)
Healthcare.gov
(Don't blame Jekyll!)
I have a Jekyll site... now what?
YAML
Ain't A
Markup
Language
YAML Front Matter
Liquid Tags
layout: post
title: I Love My Cat
description: A post about my cat
related: ["My Eight Cats and I", "Kittens!!"]
categories: jellybeans, kittens
{{ page.title }}
# => I Love My Cat
{{ page.description }}
# => A post about my cat
{% for post in site.posts %}
{% if page.related contains post.title %}
# display post link
{% endif %}
{% endfor %}
Custom Post Types
We can use YAML and liquid tags to create custom post types.
Add a new file to _layouts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2701554/Screen_Shot_2016-06-02_at_3.40.42_PM.png)
Add code to customize layout
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2701564/Screen_Shot_2016-06-02_at_3.46.27_PM.png)
Customize front matter
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2701580/Screen_Shot_2016-06-02_at_3.41.41_PM.png)
Result:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2701544/Screen_Shot_2016-06-02_at_3.44.17_PM.png)
Social Media Sharing
---
layout: post
title: "It's Jekyllicious!"
description: Tips and Tricks for Blogging with Jekyll
date: 2016-6-03
twitter_text: "It's Jekyllicious!!"
---
https://twitter.com/intent/tweet?text="{{ page.twitter_text }}
"%20{{ site.url }}{{ page.url }}%20via%20@{{ site.twitter_username }}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2705294/Screen_Shot_2016-06-03_at_1.00.47_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2705295/Screen_Shot_2016-06-03_at_1.04.15_PM.png)
Other ideas:
Related Posts
Tags or attributes
style changes
Lists of data
Linking to custom CSS or JS Files
Gems
Do i need a gemfile?
Gems can be included in a Gemfile or installed individually. If you have a lot of customizations, or want to make it easy for others to clone your site, definitely use a Gemfile.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2701641/Screen_Shot_2016-06-02_at_4.04.56_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2701649/Screen_Shot_2016-06-02_at_4.06.24_PM.png)
Popular Gems
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2701663/ruby_logo_2.png)
3rd Party Plugins
Comments
Plugins like Disqus will allow visitors to comment on your posts.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2701725/disqus_comments_panel.jpg)
Comment Forms
These comment form plugins provide a back-end to store form entries and notify you via email.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2701798/world-arcade.jpg)
Google Analytics
Google Analytics provides a tracking code that can be integrated as an HTML file.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2705344/Screen_Shot_2016-06-03_at_1.28.56_PM.png)
Plugins that sound pretty cool
Design
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2704731/bourbon-logo-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2704736/bootstrap.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2704741/55da385022302664040110.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2704745/foundation-header.jpg)
Tricks for lazy designers
- Jekyll comes with a basic theme out of the box.
- While I can't personally endorse any pre-made themes, there are multiple sites where designers can share their themes.
- When in doubt, use Materialize.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2704768/Screen_Shot_2016-06-03_at_10.31.39_AM.png)
The bottom line...
CloudCannon or Octopress might help to make Jekyll more user-friendly for non-developers.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2704835/Screen_Shot_2016-06-03_at_10.49.50_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/2704838/octopress-header.png)
It's Jekyllicious!
By Becca Nelson
It's Jekyllicious!
Tips and tricks for blogging with Jekyll
- 1,122