Building pages with Jekyll

An overview on how Jekyll works along with out patterns to quickly build out pages.

Go fullscreen: ⌃⌥F

Building pages with Jekyll

Simplify many pages

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
  • Guides our thinking for building website using patterns
  • 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

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>

Videos & tutorials

Start

Building pages with Jekyll

An overview on how Jekyll works along with out patterns to quickly build out pages.