welcome to

Website-Bastelstunde II:
Static Site Generators

with nyakob ^{(they/them/jakob)} :3

historical WWW logo (Robert Cailliau, 1990)

slides: http://jakob.ruckel.de/slides/www-ii/

Previously: Building Websites with HTML+CSS
Today:
- Static site generation with Jekyll
- Hosting with CI (e.g. on M18 GitLab)

What does a static site generator do?

A Website, built by hand

index.html

<!doctype html>
<head>
    <title>home</title>
    <link rel='stylesheet' ... />
</head>
<body>
    <h1>home on my site</h1>
    ...
</body>

links.html

<!doctype html>
<head>
    <title>links</title>
    <link rel='stylesheet' ... />
</head>
<body>
    <h1>links on my site</h1>
    ...
</body>

cat.html

<!doctype html>
<head>
    <title>cat pics</title>
    <link rel='stylesheet' ... />
</head>
<body>
    <h1>cat pics on my site</h1>
    ...
</body>

problem: this involves a lot of copy and paste and manual labor
we’d much prefer the computer to do that copy and paste for us
maybe it could, i dunno, generate this for us?

Generating Sites

input:
- Raw HTML
- Markdown
- Templates
- CSS
- …
output:
- Markdown is rendered as HTML
- Templates are applied
- everything is put together

Generating Sites

→ → → jekyll + → ↘ ↗

someone elses pc web server ur pc html+css html+css html+css templates markdown this is ur whole site upload via (s)ftp(s)

So, Let’s build a site then

reminder: the slides are online at http://jakob.ruckel.de/slides/www-ii/
- also please yell at me if i am yapping too fast
Our tool of choice will be Jekyll
- first released in ‘08, written in ruby (but you do not need Ruby for making sites)
- pretty popular, especially because it is supported in github pages by default:
- some alternatives:
  - hugo: very fast, uses Go templates
  - Next.js: React stuff, but supports static site generation
  - MkDocs: good for software project documentation
  - …any many more

Step 1: Installation

windows:

winget install RubyInstallerTeam.RubyWithDevKit.3.4
...

others:
- see here

Step 2: hello, world

simply run:
```
jekyll new my-cool-site --blank
```
go into the site directory:
```
cd my-cool-site
```
run this:
```
jekyll serve --livereload
```
open the url printed in your terminal (http://127.0.0.1:4000/)
rejoice!

ok what has just happened

take a look at index.md!
- because it’s in the project root and called index, it is served as the root site
- it contains the content of your cool new site
- at the top, in between the --- is some meta data
  - this is called front matter
  - Importantly, this defines the layout for this page

Layouts

layouts live in the _layouts/ directory
- the underscore means jekyll will not process these as pages
if you have some cool html from three weeks ago:
- now is a good time to copy and paste it into a layout file
- make sure to keep the stylesheet, i.e., this line:
```
<link rel="stylesheet"
       href="{{ "/assets/css/main.css" | relative_url }}">
```
- disregard your content and replace it with {{ content }}
  - put the content in index.md instead

Posts

create a layout for posts in _layouts/post.html
```
---
layout: default
---
```
```
{{ content }}
```

Posts

create a post in _posts/2026-06-29-hello.md

---
title: Hello, World!
layout: post
---

this is my cool post.  hello!

Posts

view the post at http://127.0.0.1:4000/2026/06/29/hello
if you want, you can change the link format in _config.yml, e.g.:
```
permalink: "/post/:slug"
```
will put your post at http://127.0.0.1:4000/post/hello note: if u change anything in _config.yml, you have to restart the jekyll server!

Adding a list of posts

let’s add some templating to our index.md:

## posts
<ul>
{% for post in site.posts %}
<li><a href="{{ post.url | relative_url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>

the templates are written in liquid, see here for a tutorial
tip: you can print out something like {{ post | inspect }} to see all properties

Includes

these are smaller templates with parameters that can be included from anywhere
they live in _includes/
example: _includes/post_teaser.html:

<li>
    <a href="{{ include.post.url | relative_url }}">
        <b>{{ include.post.title }}</b>
    </a>
    posted on {{ include.post.date | date: "%Y-%m-%d" }}
    {{ post.content | split: "<!--teaser-->" | first }}
</li>

Includes

we can then add our special HTML comment to our post below the first line:

this is my cool post.  hello!

<!--teaser-->

this is the coolest thing evuuurrrrr x3

any only the stuff above the comment will be shown for the post_teaser.html include

Includes

then, in out index.md we can just do our list of posts like this:

<ul>
{% for post in site.posts %}
{% include post_teaser.html post=post %}
{% endfor %}
</ul>

the cool thing: we can pass data (e.g., the post) on to the Include!

Deploying to GitLab Pages

i found out about this last week and this is huge actually
you can host at smth like https://nyakob.bau-ha.us/
like how cool is that?!

if you don’t have an account already, register
- i think u need an @uni-weimar.de mail
create a repo called yourusernamehere.bau-ha.us
commit ur website there
create and commit Gemfile with the following contents:
```
source "https://rubygems.org"
gem "jekyll"
```

last step: put this in a file called .gitlab-ci.yml:

pages:
  stage: deploy
  image: ubuntu:latest
  script:
    - apt update && apt -y install ruby-full build-essential
    - gem install bundler
    - bundle install
    - bundle exec jekyll build
    - mv _site public
  artifacts:
    paths:
      - public

commit your changes and be amazed at the technology:

Happy webseiten-basteln!!

slides online at: http://jakob.ruckel.de/slides/www-ii/

document.querySelectorAll(“.figure.edit-figure > *”).forEach(el => { console.log(el); let dragging = false; let offsetX = 0; let offsetY = 0;

el.addEventListener("dragstart", e => {
    e.preventDefault();
});

el.addEventListener("mousedown", e => {
    dragging = true;

    const rect = el.getBoundingClientRect();

    offsetX = e.clientX - rect.left;
    offsetY = e.clientY - rect.top;

    e.preventDefault();
});

document.addEventListener("mousemove", e => {
    if (!dragging) return;

    const parent = el.parentElement;
    const parentRect = parent.getBoundingClientRect();

    const x = e.clientX - parentRect.left - offsetX;
    const y = e.clientY - parentRect.top - offsetY;

    const leftPct = (x / parentRect.width) * 100;
    const topPct = (y / parentRect.height) * 100;

    el.style.left = `${leftPct}%`;
    el.style.top = `${topPct}%`;

});

document.addEventListener("mouseup", () => {
    dragging = false;
    dumpPositions();
}); });

function dumpPositions() { const lines = [];

console.log("wruff");

const fig = document.querySelector(".figure.edit-figure");

document.querySelectorAll(".figure.edit-figure > *").forEach(el => {
    lines.push( `#${fig.id} #${el.id} {
left: ${el.style.left};
top: ${el.style.top}; }`);
});

console.log(lines.join("\n\n")); } </script>

Website-Bastelstunde II: Static Site Generators

What does a static site generator *do*?

A Website, built by hand

Generating Sites

Generating Sites

So, Let’s build a site then

Step 1: Installation

Step 2: hello, world

ok what has just happened

Layouts

Posts

Posts

Posts

Adding a list of posts

Includes

Includes

Includes

Deploying to GitLab Pages

Happy webseiten-basteln!!

Website-Bastelstunde II:
Static Site Generators

What does a static site generator do?