About

This is a prototype to see what kind of static website you an build from a CSV file plus some Jekyll templates.

• Theres a dozen fruit that you can explore by category or colour.
• Each fruit page contains an image and some metadata.
• Each fruit page contains links to view all fruit in that category or colour. eg Gala Apples has links to all apples or all red fruit.
• The index of all fruits has a client side filter to allow some basic searching.

How this prototype is built…

Data

All items are listed in one file fruits.csv which is loaded into site.data.fruits array.

All fruits index

Simply loop through all the items in the data file & display as cards:

{% for fruit in site.data.fruits %}
  {% include card.html %}
{% endfor %}

Where card.html is as below.
This calculates the link for each item from the fruitname; this matches the logic used by the jekyll-datapage_gen plugin when creating the pages.

<div>
  {% assign link = fruit.fruitname | remove: " " | downcase | prepend: "/fruits/"| append: ".html" %}

  title:        {{ fruit.fruitname }}
  thumbnail:    {{ fruit.image }}
  descriptiuon: {{ fruit.blurb }}
</div>

Item pages

Use the jekyll-datapage_gen plugin to generate one page per item (row) in the datafile.

plugins:
  - jekyll-datapage-generator

page_gen:
  - data: 'fruits'                                // datasource
    template: 'fruit'                             // page template
    dir: 'fruits'                                 // output directory
    name_expr: 'record["fruitname"].delete(" ")'  // create filename from this field (+ strip spaces)
    title: 'fruitname'                            // field for page title

Creates page per item in /fruits/ eg Bananas.

Fruit template

All item data from the CSV is available as page variables. The variables are mapped to the CSV column headings eg

<h1> {{ page.fruitname }} </h1>
origin: {{ page.origin }}
category: {{ page.category }}
colour: {{ page.colour }}

Can calculate the link for each category (eg “apples” links to the category page for “apples”) from the category name; this matches the logic used by the jekyll-datapage_gen plugin when creating the category indexes (see below).

{% assign link = page.category | remove: " " | prepend: "/category/" | append: ".html" %}

Category index pages

Use the jekyll-datapage_gen plugin to generate one page per category in the datafile. This category page can be used as an index for all items in this category.

I suspect it creates a page for each item but all items in one category have the same filename so end up with just one file per category.

page_gen:
  - data: 'fruits'                                // datasource
    template: 'cat'                               // page template
    dir: 'category'                               // output directory
    name_expr: 'record["category"].delete(" ")'   // create filename from this field (+ strip spaces)
    title: 'category'                             // field for page title

Cat template

All item data from the CSV is available as page variables. The variables are mapped to the CSV column headings. This includes this category eg

<h1> {{ page.category | capitalize }} </h1>

Like the All fruits index loop through all the items in the data file & display as cards. But first filter so just display ones in this category:

{% assign fruits = (site.data.fruits | where: "category", page.category) %}
{% for fruit in fruits %}
  <div>
    title:        {{ fruit.fruitname }}
    thumbnail:    {{ fruit.image }}
    descriptiuon: {{ fruit.blurb }}
  </div>
{% endfor %}

Creates page per category in /category/ eg Tropical

List of categories

Extract just the field of interest (eg category or colour) from all the items, filter this to remove duplicates and then loop through this to produce a list of categories.

eg Categories: Apples, Berries, Citrus, …
eg Colours: Black, Green, Orange, …

<ul>
<!-- 'map' so only category property + 'uniq' to remove duplicates => simple list of cats -->
{% assign cats = site.data.fruits | map: "category"| uniq | sort %}
{% for cat in cats %}
  <!-- remove spaces + top & tail => /category/<thiscat>.html -->
  {% assign link = cat | remove: " " | prepend: "/category/" | append: ".html" %}
  <li><a href="{{link}}">{{cat | capitalize }}</a></li>
{% endfor %}
</ul>

Tiles of categories

Similarly can create tiles, not just a list, of categories.

The key here is to have a category thumbnail, named after the category. eg /categoryThumbs/ <category>.jpg
eg /categoryThumbs/apples.jpg

ie this is defined by convention not data or configuration (so no extra data required!)

<!-- 'map' so only category property + 'uniq' to remove duplicates => simple list of cats -->
{% assign cats = site.data.fruits | map: "category"| uniq | sort  %}
{% for category in cats %}
  {% include tile.html %}
{% endfor %}

Where tile.html is:

<div class="tile">
  {% assign thumb = category | remove: " " | downcase | prepend: "/categoryThumbs/"| append: ".jpg" %}
  img:   {{ thumb }}
  title: {{category | capitalize }}
  {% assign link = category | remove: " " | downcase | prepend: "/category/"| append: ".html" %}
</div>

Publishing Jekyll site using Github pages

Normal github pages workflow:

• commit sourcecode to master
• exclude _site (ie compiled HTML)
• push to master
  • github builds _site & publishes as github pages

Github pages doesn’t support custom plugins so instead we will compile the site using jekyll locally and then push the resulting compiled HTML to github (eg see Drew).

• commit sourcecode to master
  • exclude _site
  • push to remote master
• create second local repository in _site
  • push to this to a second remote branch eg livesite
  • configure github to serve site from this branch

ie two local repositories pushing to different branches in single remote repository

Details

• make a new local git repository within _site
  • cd _site
  • git init
• make new “livesite” branch
  • git checkout -b livesite
• tell Jekyll to ignore this directory
  • touch .nojekyll
• add files & commit them
  • git add .
  • git commit -m "new site"
• define remote that will push to
  • ie git remote add <nameForRemote> <remoteUrl>
  • eg git remote add fruits https://github.com/drmikeuk/fruits.git
• push to this remote / livesite branch on command line:
  • ie git push <remote> <branch>
  • eg git push fruits livesite