Presented live at FIC's Web Unleashed 2016 conference by Brian Rinaldi FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond Save 10% off any of our events with discount code 'slideshare' Check out our events at http://fitc.ca or follow us at https://twitter.com/fitc Overview Static site development has become popular again partly because they offer great performance and security but also partly because modern tools have made them much easier to develop and maintain. Leading the pack of these tools is Jekyll, a Ruby-based static site generator originally created by Tom Preston-Werner. Jekyll makes it easy to build static sites using customizable templates and plugins. Plus, many Jekyll-powered tools like GitHub Pages make it easy (and even free) to deploy your static site. In this session, you'll learn more about what Jekyll is and how it works. Then, we'll walk through getting it installed, setting up a site, customizing the templates, adding content and finally building and deploying a site. Objective This session will get you ready to start building your own static site using Jekyll. Target Audience This session is suitable for anyone from a developer to a designer, whether beginner or advanced (no Ruby knowledge is required). Assumed Audience Knowledge Basic knowledge of web development/design (HTML/CSS/JS) and comfort working from the command line. Five Things Audience Members Will Learn Benefits of static sites Basic static site development How to install Jekyll How to customize a Jekyll site How to deploy a Jekyll site

1. Getting Started with Jekyll
Brian Rinaldi
@remotesynth

2. A Little Bit About Me
4 Developer Programs Manager for Progress (aka
Telerik)
4 Author of the Static Site Generators report (free
from O'Reilly)
4 Co-author (with Raymond Camden) of the upcoming
book "Working with Static Site Generators" (also
from O'Reilly)

3. Why Static?

4. Fast

5. Secure

6. Flexible

7. Tedious?

8. What's a Static Site
Generator?

10. There are 4371
to choose from!
4 Jekyll (Ruby)
4 Middleman (Ruby)
4 Hugo (Go)
4 Hexo (JavaScript)
4 Pelican (Python)
1
Source - https://staticsitegenerators.net/

11. There are 437 to choose from!
4 Wintersmith (JavaScript)
4 Metalsmith (JavaScript)
4 Harp (JavaScript)
4 DocPad (CoffeeScript)
4 Gatsby (JavaScript)
4 ...etc.

12. Why Jekyll?

13. Why Jekyll?
4 Most mature
4 Biggest community
4 Good documentation
4 Broadest support
4 You (probably) don't need to know Ruby

14. Getting Set Up
Prerequisites
4 Ruby
4 RubyGems
4 Mac OS or Linux

15. What?! No Windows?

16. Getting Set Up
Once you have the prereqs...
gem install jekyll

17. Creating a New Site
jekyll new teentitansgofansite
cd teentitansgofansite
jekyll serve

18. Basic Configuration
title: My Teen Titans Go! Fan Site
email: brian.rinaldi@progress.com
description: > # this means to ignore newlines until "baseurl:"
Because I am a huge dork who thinks Teen Titans Go! is hilarious.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site
twitter_username: remotesynth
github_username: remotesynth # you can add any metadata you want

19. Customizing Your Site
By default Jekyll uses the Liquid templating language
(with added filters/tags)

20. Liquid Basics

21. Output Data
Straight output of a Jekyll variable
<h2>{{ page.title }}</h2>
...or use a filter...
<p>Posted {{ post.date | date: "%b %-d, %Y" }}</p>

22. Include Another Template
Useful for breaking up template files...
{% include header.html %}

23. Conditionals
{% if page.url == "/index.html" %}
<!-- Banner -->
<section id="banner">
<header>
<h2>Explore the Land of Ooo...</h2>
<p>...and its many kingdoms!</p>
</header>
</section>
{% endif %}

24. Loops
{% for post in site.posts limit:5 offset:2 %}
<li>
<span class="date">{{ post.date | date: "%b %-d, %Y" }}</strong></span>
<h3><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h3>
<p>{{ post.excerpt }}</p>
</li>
{% endfor %}

25. Adding Pages/Posts

26. Adding Pages/Posts
Pages can be Markdown or HTML and can go anywhere
in the site structure.
Posts can also be Markdown or HTML, but must go in
_posts and follow a naming convention of YEAR-MONTH-
DAY-title.MARKUP. So...
2016-10-03-the-best-session-webu-was-jekyll.md
2016-10-04-nevermind-i-take-it-back.html

27. FrontMatter
...is YAML-formatted metadata at the start of a file.
---
layout: post # required for posts
title: "Raven is the best Teen Titan" # required for posts
date: 2015-10-03 11:00:00 # required for posts
categories: titans characters
famous_quote: "Azarath... Metrion... ZINTHOS!" # I can add whatever metdata I want
---

28. Data

29. Data
YAML, JSON or CSV data can be placed in the _data
directory.
Accessed via site.data.[data_filename] variable.

30. Deployment

31. Deployment
jekyll build
4 FTP
4 Glynn
4 GitHub Pages
4 Netlify
4 So many other options...

32. Jekyll Admin
https://jekyll.github.io/jekyll-admin/

33. More Examples
4 Static Site Samples
Same site built with 10+ engines
https://github.com/remotesynth/Static-Site-
Samples
4 Getting Started with Jekyll (article)
http://developer.telerik.com/featured/getting-
started-with-jekyll/

34. What Kinds of Sites Work
as Static Sites?

35. Questions?

36. Win a MiP Robot!

37. Win a MiP Robot!