Static Website Generator: Creating your first website using Jekyll and GitHub Pages

Static vs Dynamic Websites

Static

- does not make use of any external database

- content is same every time the page is loaded.

 

Dynamic

- make use of database

- content is generated quickly and changes regularly

What is Jekyll?

 

Jekyll is a Blog-Aware Static Site Generator written in Ruby

 

https://jekyllrb.com/

Why use a Static Site Generator?

  • It’s simple: for SiteOps, for devs and for content creators
  • It’s safe: it’s no ”WordPress”
  • It’s fast: serve only static content, on github pages or wherever you can!
  • It’s personalized: themes & co. available
  • It’s extensible: you can write plugins, extensions, etc…
  • It’s cool: the coolest kids out there use Jekyll: Atlassian, Bootstrap, StackOverflow, Github, etc.

Jekyll is simple – SiteOps & Devs 

  • You just need a server capable of serving static content, even Dropbox!
  • Simplified deployment pipeline (from copying files via FTP to git hooks)
  • Themes structure is simple and developers can easily customize it
  • Plugins can be written using Ruby
  • Configuration based on YAML file(s)

Jekyll is simple – SiteOps & Devs 

  • Every page (or post) lives in a separate file
  • Write only content. No layout or anything else
  • You can use MarkDown, Liquid Syntax, HTML, mixed together
  • You can easily define page/post “meta” in the “Front Matter”
  • You can install it on your computer and see changes in realtime
  • Built-in pagination, permalinks, tags, etc…

Jekyll is safe 

  • No back-end, means (almost) no security concerns

Let's do it

  • gem install jekyll bundler
  • jekyll new friday-lab
  • cd friday-lab
  • bundle exec jekyll serve --watch

 

Jekyll is now up and running on http://localhost:4000, watch it change in realtime! 

Let's do a demo

"A demo is worth a thousand words"

Your first post

  • Posts are in the _posts folder
  • You can use markdown or HTML syntax 

 

 

Your first post - Structure

---

layout: post

title: "Welcome to Jekyll!”

date: 2017-02-09 12:43:18 +0100

categories: jekyll

---

 

The quick brown fox jumps over the lazy dog.

Your first post - Liquid

Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts..

 

{% if page.title == "Awesome Post" %} 
     This post is awesome!
{% endif %}

 

You can see the list of available Jekyll variables here: https://jekyllrb.com/docs/variables/

Configuration

  • Jekyll config file is called _config.yml
  • You can use already defined variables / structures or define your own
  • Define here “global stuff” you’ll use everywhere:
    • Navigation
    • Common tags
    • Website data
    • Etc.