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>