Getting Started with Jekyll for Static Sites

Getting Started with JekyllBrian Rinaldi@remotesynth

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)

Why Static?

Fast

Secure

Flexible

Tedious?

What's a Static Site Generator?

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/

There are 437 to choose from!4 Wintersmith (JavaScript)

4 Metalsmith (JavaScript)

4 Harp (JavaScript)

4 DocPad (CoffeeScript)

4 Gatsby (JavaScript)

4 ...etc.

Why Jekyll?

Why Jekyll?4 Most mature

4 Biggest community

4 Good documentation

4 Broadest support

4 You (probably) don't need to know Ruby

Getting Set UpPrerequisites

4 Ruby

4 RubyGems

4 Mac OS or Linux

What?! No Windows?

Getting Set UpOnce you have the prereqs...

gem install jekyll

Creating a New Sitejekyll new teentitansgofansitecd teentitansgofansitejekyll serve

Basic Configurationtitle: My Teen Titans Go! Fan Siteemail: [email protected]: > # 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. /blogurl: "" # the base hostname & protocol for your sitetwitter_username: remotesynthgithub_username: remotesynth # you can add any metadata you want

Customizing Your SiteBy default Jekyll uses the Liquid templating language (with added filters/tags)

Liquid Basics

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>

Include Another Template

Useful for breaking up template files...

{% include header.html %}

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 %}

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 %}

Adding Pages/Posts

Adding Pages/PostsPages 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.md2016-10-04-nevermind-i-take-it-back.html

^ Pages do not need a particular naming

FrontMatter...is YAML-formatted metadata at the start of a file.---layout: post # required for poststitle: "Raven is the best Teen Titan" # required for postsdate: 2015-10-03 11:00:00 # required for postscategories: titans charactersfamous_quote: "Azarath... Metrion... ZINTHOS!" # I can add whatever metdata I want---

Data

DataYAML, JSON or CSV data can be placed in the _data directory.

Accessed via site.data.[data_filename] variable.

Deployment

Deploymentjekyll build

4 FTP

4 Glynn

4 GitHub Pages

4 Netlify

4 So many other options...

Jekyll Adminhttps://jekyll.github.io/jekyll-admin/

More Examples4 Static Site Samples

Same site built with 10+ engineshttps://github.com/remotesynth/Static-Site-Samples

4 Getting Started with Jekyll (article)http://developer.telerik.com/featured/getting-started-with-jekyll/

What Kinds of Sites Work as Static Sites?

Questions?

Win a MiP Robot!

Win a MiP Robot!