diff --git a/html_output/2026-01-15_km.html b/html_output/2026-01-15_km.html index cea8954..afd3e66 100644 --- a/html_output/2026-01-15_km.html +++ b/html_output/2026-01-15_km.html @@ -27,14 +27,14 @@ A commit contains this information:
After merging two branches, a merge commit is created. This is an exceptional commit that has two parent commits instead of one.

Use case: you are designing a website for a client and want to show 3 different versions of it with different background colours.
Use case: tracking and collaborating on a repository with others such as a website project, where two online versions of the website exist, a "safe" one that is available to the public, and an "experimental" one that is reserved for trying new features together.

Check first:
git --versionIf missing:
Minimum requirement: you can run git in a terminal.
Create a repository in the current folder. Use this when you are creating and working on your own projects.
git initCreates a .git/ directory containing history + metadata.
For the exercise we will use git clone instead of git init.
git statusShows:
First, create a file
nano index.htmlStage files for the next commit.
git add index.html
Stage everything (use carefully):
git add .
Staging is curatorial: select what belongs together.
Remove a tracked file and stage the removal:
git rm old.html -git commit -m "Remove old page"
For this workshop you probably will not need it.
git commit -m "Added name to my page"
Good commit message pattern:
repeat edit > stage > commit a couple times?
git log --oneline --graph
Gives a quick "finding aid" of earlier commits. Press 'q' to exit.
git checkout your_commit_id
See your working tree as it would have been at a specific commit on the timeline.
You will:
Share your username with us so we can add you as a collaborator
Rules for today:
Resources:
You will build a (deliberately) simple page:
Workflow loop:
clone -> branch -> edit -> status -> add -> commit -> push -> view -> iterate
At least one body element must separate transitions; adjacent transitions are not allowed.
Clone (copy) a repository in the current folder. First, cd to a logical location in your computer, then:
git clone https://git.hackersanddesigners.nl/hrk/braids
That will checkout the repo into a directory /braids, go into this new directory with:
cd braids
You have now downloaded a repo from the web, complete with the full commit history and all changes.
Choose a slug: lowercase, no spaces. This can be your name or an alias. Example: change braids/<your-slug> in the command below to braids/alex. From here on out replace <your-slug> with your chosen name!
List branches:
git branchCreate a branch:
git branch braids/<your-slug>
Switch to branch:
git checkout braids/<your-slug>
Shortcut (create + switch):
git checkout -b braids/<your-slug>
If everything went well, check the repo with:
git status -git branch
Branches are parallel dossiers: safe space for changes.
Edit the root index.html (and optionally add style.css, assets/).
Make a visible change first:
Then check changes:
git diff -git status
git add index.html +git commit -m "Remove old page"
For this workshop you probably will not need it.
git commit -m "Added name to my page"
Good commit message pattern:
repeat edit > stage > commit a couple times?
git log --oneline --graph
Gives a quick "finding aid" of earlier commits. Press 'q' to exit.
git checkout your_commit_id
See your working tree as it would have been at a specific commit on the timeline.
You will:
Share your username with us so we can add you as a collaborator
Rules for today:
Resources:
You will build a (deliberately) simple page:
Workflow loop:
clone -> branch -> edit -> status -> add -> commit -> push -> view -> iterate
Clone (copy) a repository in the current folder. First, cd to a logical location in your computer, then:
git clone https://git.hackersanddesigners.nl/hrk/braids
That will checkout the repo into a directory /braids, go into this new directory with:
cd braids
You have now downloaded a repo from the web, complete with the full commit history and all changes.
Choose a slug: lowercase, no spaces. This can be your name or an alias. Example: change braids/<your-slug> in the command below to braids/alex. From here on out replace <your-slug> with your chosen name!
List branches:
git branchCreate a branch:
git branch braids/<your-slug>
Switch to branch:
git checkout braids/<your-slug>
Shortcut (create + switch):
git checkout -b braids/<your-slug>
If everything went well, check the repo with:
git status +git branch
Branches are parallel dossiers: safe space for changes.
Edit the root index.html (and optionally add style.css, assets/).
Make a visible change first:
Then check changes:
git diff +git status
git add index.html git commit -m "Customize profile page for <your-slug>"
If you added assets:
git add assets/ -git commit -m "Add assets for <your-slug>"
Small commits win. One change = one deposit.
Push your commits to the server, defining a remote branch to track. This is called setting the upstream.
git push -u origin braids/<your-slug>
(Again, change <your-slug>!)
The first time you checkout from https://git.hackersanddesigners.nl the server will ask you for credentials. These will be remembered, so only once. -This pushes your branch to the 'origin' server.
From then on, unless the remote/branch is named, git push will go in that direction.
git pushdisabled push rights for now, only for demonstration purposes, will fail
Open the gallery:
Find your card:
Iterate:
edit -> status -> add -> commit -> push -> refresh
Wrong branch:
git branch +git commit -m "Add assets for <your-slug>"
Small commits win. One change = one deposit.
Push your commits to the server, defining a remote branch to track. This is called setting the upstream.
git push -u origin braids/<your-slug>
(Again, change <your-slug>!)
The first time you checkout from https://git.hackersanddesigners.nl the server will ask you for credentials. These will be remembered, so only once. +This pushes your branch to the 'origin' server.
From then on, unless the remote/branch is named, git push will go in that direction.
git pushdisabled push rights for now, only for demonstration purposes, will fail
Open the gallery:
Find your card:
Iterate:
edit -> status -> add -> commit -> push -> refresh
Wrong branch:
git branch git checkout braids/<your-slug>
Nothing staged:
git status -git add index.html
Push rejected (main protected):
Auth issues:
Bad:
Better:
Rule: message should still make sense in 6 months.
Title underline too short.
Optional: git pull +git add index.html
Push rejected (main protected):
Auth issues:
Bad:
Better:
Rule: message should still make sense in 6 months.
Title underline too short.
Optional: git pull =================
If you want to collaborate with others on the same branch, pull updates from server:
git pullDuring the exercise you mostly push your branch. -Pull is mainly for getting new changes on main (if needed).
fact: git pull is actually a git fetch && git merge
First, go ahead and git fetch --all branches from the remote git repository, so you have them locally.
Then git branch to see the available branches.
Check some of them out with git checkout braids/<branch_name>.
See something you like? Merge with them.
git checkout braids/<your-slug> -git merge braids/<chosen_branch>
Consolidate any merge conflicts manually if you have to. Then, stage, commit and push your changes to your branch.
Learn more:
End: remind participants their branches will be removed after the workshop.