Piecing Jekyll together

Using paper-made Jekyll replicas, piece together multiple pages by using Jekyll-like functionality.

Go fullscreen: ⌃⌥F

Piecing Jekyll together

What & why

Jekyll provides us with lots of features to simplify making website and reducing duplication.

It can be difficult to see how everything connects together and see now to use all the available pieces.

We’re going to visualize some of Jekyll’s features without writing any code.

Set up

  1. Form into pairs
  2. Download & print the files
  3. Get a pencil to write with
  4. Create the following pages using snippets of Jekyll code
    1. Look at the patterns & see if they’re missing things
    2. Look at the layouts and determine what to insert
    3. Look at the pages and determine what to insert

Definitions

  • Pattern: a reusable piece of a website

  • Layout: like an InDesign master page: contains all the site’s common elements

  • Page: a combination of layouts & patterns to make something a user would see

Snippets of Jekyll & Patternbot code

HTML
<!-- Finds a pattern, by filename, and inserts it into this location -->
{% pattern __________ %}


<!-- Repeats a pattern multiple times into this location
     You need to specify how many times the loop happens -->
{% for (1..____) %}
  {% pattern __________ %}
{% endfor %}

index.html

products.html

Start

Piecing Jekyll together

Using paper-made Jekyll replicas, piece together multiple pages by using Jekyll-like functionality.