Building static websites with Jekyll
Brought to you by Juan Roa
What is Jekyll?
- It's a parsing engine
- Is bundled as a ruby gem
- Is used to build static websites from dynamic components
- Not a blog platform - Just a static website generator
- Create content with markdown and templates with HTML5/CSS3/JS
- Use plugins or build yours
Static: not dynamic (yup!)
Why static?
Traditional dynamic blogs like Wordpress require a database and server-side code. Heavily trafficked dynamic blogs must employ a caching layer that ultimately performs the same job Jekyll sets out to do; serve static content.
- Ability to write content in markdown in your favorite text-editor.
- Ability to publish via git.
- Ability to host your blog on a static web-server, like GitHub Pages
- No database required.
Front Matter
Is where Jekyll starts to get really cool. Any file that contains a YAML front matter block will be processed by Jekyll as a special file. The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines. Here is a basic example:
layout: post
title: Blogging like a caleño
Liquid Tags
Liquid is a secure templating language developed by Shopify. Liquid is designed for end-users to be able to execute logic within template files without imposing any security risk on the hosting server.
Jekyll uses Liquid to generate the post content within the final page layout structure and as the primary interface for working with your site and post/page data.
default.html (example)
<!DOCTYPE html>
<html lang="en">
{% include head.html %}
<body>
{% include header.html %}
<main>
{{ content }}
</main>
</body>
Templates & Partials
Partials are partial views but not templates
Templates:
Customization
Front matter / Liquid tags examples:
Including variables...
Local/Dev environment
Custom Domain ? (yeah!)
Just create a file named: CNAME and put some like
myawesomejekyllsite.co
and... that's all!
Deploy to Github pages
Just as easy as:
git push origin gh-pages
Done!
I'm on github !
