Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting Started with Jekyll for Static Sites

372 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Getting Started with Jekyll for Static Sites

  1. 1. Getting Started with Jekyll Brian Rinaldi @remotesynth
  2. 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. 3. Why Static?
  4. 4. Fast
  5. 5. Secure
  6. 6. Flexible
  7. 7. Tedious?
  8. 8. What's a Static Site Generator?
  9. 9. 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/
  10. 10. There are 437 to choose from! 4 Wintersmith (JavaScript) 4 Metalsmith (JavaScript) 4 Harp (JavaScript) 4 DocPad (CoffeeScript) 4 Gatsby (JavaScript) 4 ...etc.
  11. 11. Why Jekyll?
  12. 12. Why Jekyll? 4 Most mature 4 Biggest community 4 Good documentation 4 Broadest support 4 You (probably) don't need to know Ruby
  13. 13. Getting Set Up Prerequisites 4 Ruby 4 RubyGems 4 Mac OS or Linux
  14. 14. What?! No Windows?
  15. 15. Getting Set Up Once you have the prereqs... gem install jekyll
  16. 16. Creating a New Site jekyll new teentitansgofansite cd teentitansgofansite jekyll serve
  17. 17. 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
  18. 18. Customizing Your Site By default Jekyll uses the Liquid templating language (with added filters/tags)
  19. 19. Liquid Basics
  20. 20. 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>
  21. 21. Include Another Template Useful for breaking up template files... {% include header.html %}
  22. 22. 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 %}
  23. 23. 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 %}
  24. 24. Adding Pages/Posts
  25. 25. 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
  26. 26. 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 ---
  27. 27. Data
  28. 28. Data YAML, JSON or CSV data can be placed in the _data directory. Accessed via site.data.[data_filename] variable.
  29. 29. Deployment
  30. 30. Deployment jekyll build 4 FTP 4 Glynn 4 GitHub Pages 4 Netlify 4 So many other options...
  31. 31. Jekyll Admin https://jekyll.github.io/jekyll-admin/
  32. 32. 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/
  33. 33. What Kinds of Sites Work as Static Sites?
  34. 34. Questions?
  35. 35. Win a MiP Robot!
  36. 36. Win a MiP Robot!

×