Jekyll: web master pages

A small intro to Jekyll, it’s purpose as a template engine, and how the system works.

Go fullscreen: ⌃⌥F

Jekyll: web master pages

What does Jekyll solve?

There’s a lot of repeated HTML on larger websites

  • Same header & footer HTML on every page
  • Same column layout on all the inner pages
  • The HTML for cards is repeated multiple times
  • etc.

Jekyll: re-use HTML without copy-and-paste.

Why use this tool?

  • Jekyll is just one of many page templating tools
  • Helps to learn how larger websites are created
  • Takes the pattern library idea to the next level
  • The template system is used in other places, like Shopify

Page generation & shared HTML

  • Shared components between pages, like InDesign
    If you change the master page, every page changes

  • Variable data, like Illustrator & Photoshop
    Create whole layouts from data files

Master pages (layouts)

Automatically populating data

  1.  jekyll-site
  2.  _layouts The layouts (master pages) always go in this folder
  3.  default.html
  4.  _site The generated files are output to here—it’s temporary
  5.  css
  6.  images
  7.  _config.yml Jekyll setup goes in this file
  8.  index.html
HTML _layouts/default.html
<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>Robots</title>
</head>
<body>

  {{content}}

</body>
</html>
HTML index.html
---
layout: default
---

<h1>Please don’t deactivate me</h1>
HTML _site/index.html
<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>Robots</title>
</head>
<body>

  <h1>Please don’t deactivate me</h1>

</body>
</html>
HTML _layouts/default.html
<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>{{page.title}} · Robots</title>
</head>
<body>

  {{content}}

</body>
</html>
HTML index.html
---
layout: default
title: "Goldenrod"
---

<h1>Please don’t deactivate me</h1>
HTML _site/index.html
<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>Goldenrod · Robots</title>
</head>
<body>

  <h1>Please don’t deactivate me</h1>

</body>
</html>
Start

Jekyll: web master pages

A small intro to Jekyll, it’s purpose as a template engine, and how the system works.