links & qr
This commit is contained in:
Heerko
parent
2c06113c9d
commit
eab4f33ca2
BIN
assets/images/qr_hd.jpg
Normal file
BIN
assets/images/qr_hd.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 462 B |
39
html_output/2026-01-14_hrko.html
Normal file
39
html_output/2026-01-14_hrko.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>🪢 Braids 🪢 Intro to git</title><meta charset="UTF-8"></meta><meta name="generator" content="Hovercraft! 1.0 http://regebro.github.com/hovercraft"></meta><meta name="author" content="H&D"></meta><link rel="stylesheet" href="css/hovercraft.css" media="all"></link><link rel="stylesheet" href="css/highlight.css" media="all"></link><link rel="stylesheet" href="slides.css" media="screen,projection"></link><script type="text/x-mathjax-config">
|
||||
MathJax.Hub.Config({
|
||||
showProcessingMessages: false,
|
||||
messageStyle: "none",
|
||||
TeX : { extensions : ['color.js'] }
|
||||
});
|
||||
</script></head><body class="impress-not-supported"><div id="impress-help"></div><div class="header"><p>🪢 Braids 🪢 Introduction to git 🪢 with H&D 🪢</p></div><div id="impress"><div class="step step-level-1" step="0" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="0" data-y="0" data-z="0"><h1 id="braids-intro-to-git">🪢 Braids: Intro to git 🪢</h1><img src="assets/images/qr_hd.jpg" width="150px"></img><div class="notes"><p>Goal: introduce Git as an archiving practice,
|
||||
then do a little branch-based website exercise published live.</p></div></div><div class="step step-level-1" step="1" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="1600" data-y="0" data-z="0"><h1 id="planning-90-min">Planning (90 min)</h1><ol><li>Context: what git is, what it does, who uses it (5 min)</li><li>Core concepts (20 min)</li><li>Recap (5 min)</li><li>Install Git (10 min)</li><li>Core commands (15 min)</li><li>Exercise: accounts + clone/push permissions (10 min)</li><li>Exercise: branch a page, publish live, iterate (20 min)</li><li>Wrap-up: good practices + next steps (5 min)</li></ol></div><div class="step step-level-1" step="2" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="3200" data-y="0" data-z="0"><h1 id="workshop-outcome">Workshop outcome</h1><blockquote><p>Each participant will:</p><ul><li>have basic knowledge of git</li><li>clone a repository</li><li>create a branch</li><li>commit changes</li><li>push branch to our platform</li></ul></blockquote></div><div class="step step-level-1" step="3" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="4800" data-y="0" data-z="0"><h1 id="why-git">Why git?</h1><p>If you have been working on a file on your computer and the directory starts to look like this:</p><pre class="highlight code bash">motivation-letter-first-draft.odt<span class="w">
|
||||
</span>motivation-letter.odt<span class="w">
|
||||
</span>motivation-letter-less-formal.odt<span class="w">
|
||||
</span>motivation-letter-less-formal-comments-HvK.odt<span class="w">
|
||||
</span>motivation-letter-less-formal-comments-HvK-LS.odt<span class="w">
|
||||
</span>motivation-letter-FINAL.odt<span class="w">
|
||||
</span>motivation-letter-FINAL-pictures.odt<span class="w">
|
||||
</span>motivation-letter-FINAL-pictures-small.odt</pre><p>Then git can be helpful!</p><blockquote><div class="notes"><p>this file has different chronological versions, features and collaborators, 3 things git is great at.</p></div></blockquote></div><div class="step step-level-1" step="4" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="6400" data-y="0" data-z="0"><h1 id="what-is-git">What is git?</h1><ul><li>git is a distributed <strong>version control system</strong></li><li>git <strong>tracks changes over time</strong> to files inside a folder</li><li>git operates in a <strong>hidden sub-folder</strong> inside the tracked folder</li><li>git enables <strong>traceability</strong> across time (history), collaboration (authorship) and experimentation (branches)</li></ul><div class="notes"><p>is the archive analogy helpful? it feels a bit like comapring something abstract with something else thats abstract</p><p>Archiving analogy:
|
||||
- commit = deposit with metadata
|
||||
- log = inventory / finding aid
|
||||
- branch = parallel dossier / alternative interpretation</p></div></div><div class="step step-level-1" step="5" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="8000" data-y="0" data-z="0"><h1 id="what-is-git-not">What is git not?</h1><ul><li>git ≠ Github!</li><li>git ≠ backup system (though it can help)</li><li>git ≠ file sync tool (though it can be used like that)</li><li>git ≠ CMS (though we use it like that today)</li><li>git ≠ magic: it records changes, you still choose what to record</li></ul><div class="notes"><p>we will see today that is git is best suited for text-based projects, especially when parsing the text is particularly useful
|
||||
it's not a good choice for recording history on very large files (such as videos) or files where the raw textual data is illegible</p></div></div><div class="step step-level-1" step="6" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="9600" data-y="0" data-z="0"><h1 id="ecosystem">Ecosystem</h1><ul><li><strong>git</strong>: the version control system itself</li><li><strong>git hosts</strong>: platforms where git repositories are hosted<ul><li>GitHub, Bitbucket, GitLab (operated by Big Tech Giants)</li><li>Alternatives<ul><li>Codeberg (non-profit, community led)</li><li>Oxacab (riseup.net for activists, journalists)</li><li>Forgejo / Gitea (self-hosted)</li></ul></li></ul></li><li><strong>git clients</strong>: tools used to work with git on your computer<ul><li><tt>git</tt> command line tool (free & open source)</li><li><tt>tig</tt> command line tool (free & open source)</li><li>sourcetree, Github Desktop, VS Code (operated by Big Tech)</li><li>many code editors (e.g. sublime, atom) have git extensions</li><li>many, many more tools and extensions</li></ul></li></ul></div><div class="step step-level-1" step="7" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="11200" data-y="0" data-z="0"><h1 id="core-concept-commits">Core concept: Commits</h1><div class="row"><div><p>In git, a <strong>commit</strong> is a checkpoint in the repository timeline.
|
||||
A commit contains this information:</p><ol><li><strong>What</strong> changes have taken place?</li><li><strong>Who</strong> made these changes?</li><li><strong>When</strong> were the changes made?</li><li><strong>Why</strong> were the changes made?</li><li><strong>Where</strong> was the last checkpoint?</li></ol><div class="notes"><p>Every time an author makes a set of changes that are meaningful together, she commits her changes by describing them, creating a checkpoint in the timeline to return to in the future.</p><p>The changes possible in a commit are:
|
||||
- editing a file
|
||||
- adding a file
|
||||
- removing a file
|
||||
- renaming (moving) a file</p></div><p>Commits do not know about the timeline they are in. They only know of their preceeding commit, otherwise known as their <strong>parent</strong>.</p><p>You can always <strong>checkout</strong> a commit: visit the repository at that checkpoint on its timeline. Basically time-travel.</p></div><img src="assets/images/commits.png" width="500px"></img></div></div><div class="step step-level-1" step="8" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="12800" data-y="0" data-z="0"><h1 id="core-concept-working-areas">Core concept: Working Areas</h1><ol><li><strong>Working tree</strong>: your files right now</li><li><strong>Staging area</strong>: selection for the next commit</li><li><strong>Repository history</strong>: overview of commits</li></ol><div class="row"><img src="assets/images/working-tree.png" width="400px"></img><img src="assets/images/staging.png" width="400px"></img><img src="assets/images/timeline.png" width="400px"></img></div><div class="notes"><p>This is why Git feels "archival":
|
||||
- you intentionally select what becomes part of the record.</p></div></div><div class="step step-level-1" step="9" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="14400" data-y="0" data-z="0"><h1 id="typical-solo-local-workflow">Typical solo local workflow</h1><ol><li><strong>You initalise a directory on your computer with git</strong>.</li><li><strong>You make changes on the directory</strong>.</li><li><strong>You stage your changes and commit them</strong>.</li><li>Repeat steps <strong>2</strong> and <strong>3</strong>.</li></ol><p><strong>Use case</strong>: tracking changes on a local, private folder, like bookkeeping.</p></div><div class="step step-level-1" step="10" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="16000" data-y="0" data-z="0"><h1 id="typical-solo-remote-workflow">Typical solo remote workflow</h1><ol><li>You clone a repository from a remote host to your local computer.</li><li>You make your changes to the repository.</li><li>You stage and commit your changes.</li><li><strong>You push (upload) your commit up to the remote</strong>.</li><li>Repeat steps <strong>2</strong>, <strong>3</strong> and <strong>4</strong></li></ol><p><strong>Use case</strong>: tracking and backing up a private folder, such as passwords.</p></div><div class="step step-level-1" step="11" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="17600" data-y="0" data-z="0"><h1 id="typical-collaborative-remote-workflow">Typical collaborative remote workflow</h1><ol><li>You clone a repository from a remote host to your local computer.</li><li>You make your changes to the repository.</li><li>You stage and commit your changes.</li><li>You push (upload) your commit up to the remote.</li><li><strong>You pull (download) other people's commits from the remote</strong>.</li><li>Repeat steps <strong>5</strong>, <strong>2</strong>, <strong>3</strong> and <strong>4</strong></li></ol><p><strong>Use case</strong>: tracking and collaborating on a repository with others such as a website project with multiple developers.</p></div><div class="step step-level-1" step="12" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="19200" data-y="0" data-z="0"><h1 id="core-concept-branching">Core concept: Branching</h1><div class="row"><div><p>In git, a <strong>branch</strong> is a named series of commits.</p><div class="notes"><p>In the previous example, there is only one branch, named "main" by default.</p></div><p>When you want to "take a detour" from the main course of a repository, you can create a separate branch.</p><div class="notes"><p>Now, parrallel timelines of the same repository exist next to each other.</p></div><p>Example <strong>use cases</strong> of branching:</p><ul><li>Experiment with a new feature affecting many files</li><li>Proposing an improvement to your collaborators</li><li>Have multiple versions of a website online</li><li>Making existing software compatible somewhere else</li></ul><div class="notes"><p>There is a lot of discourse around when to branch and how often. It varies from person to person and group to group.</p><p>From the perspective of git, since branching doesn't add any technical overload on a project, it is encouraged to branch more and branch often. From a logical perspective, every branch creates a parrallel timeline, and this might be a lot to keep track of mentally.</p><p>Branching allows for and encourages collaboration and is at the core of the free and open source software movement.</p></div></div><img src="assets/images/branching.png" width="500px"></img></div></div><div class="step step-level-1" step="13" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="20800" data-y="0" data-z="0"><h1 id="core-concept-merging">Core concept: Merging</h1><div class="row"><div><p>In git, <strong>merging</strong> is when you consolidate commits from a separate branch into your own.</p><div class="notes"><p>There are various merging techniques, and most of the time, the automated algorithm will work.</p></div><p>Sometimes, you might encounter a <strong>merge confilct</strong>: a section of a file where both branches have conflicting changes that cannot be automatically resolved. Here, you have to manually resolve the conflicts.</p><div class="notes"><p>which can take the form of:
|
||||
- accepting a change from one branch and rejecting the other
|
||||
- accepting and keeping both changes
|
||||
- re-editing the files to incorporate both changes</p></div><p>After merging two branches, a <strong>merge commit</strong> is created. This is an exceptional commit that has two parent commits instead of one.</p></div><img src="assets/images/merge.png" width="400px"></img></div></div><div class="step step-level-1" step="14" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="22400" data-y="0" data-z="0"><h1 id="complex-collaborative-remote-workflow">Complex collaborative remote workflow</h1><ol><li>You clone a repository from a remote host to your local computer.</li><li><strong>You create a new branch "my-feature" for your changes</strong>.</li><li>You make your changes to the repository.</li><li>You stage and commit your changes.</li><li>You push your commit (and new branch) up to the remote.</li><li>You pull other people's commits on this branch from the remote.</li><li>Repeat steps <strong>6</strong>, <strong>3</strong>, <strong>4</strong> and <strong>5</strong></li><li><strong>You switch back to "main" and merge "my-feature" into it</strong>.</li><li><strong>You push your new merge commit up to the "main" branch</strong>.</li></ol><p><strong>Use case</strong>: you are designing a website for a client and want to show 3 different versions of it with different background colours.</p><p><strong>Use case</strong>: 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.</p></div><div class="step step-level-1" step="15" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="24000" data-y="0" data-z="0"><img src="assets/images/braids.png" width="100%"></img></div><div class="step step-level-1" step="16" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="25600" data-y="0" data-z="0"><h1 id="recap">Recap</h1><ul><li><strong>repository</strong>: a directory initialised with git</li><li><strong>commit</strong>: a checkpoint in the repository timeline(s)</li><li><strong>checkout</strong>: to visit the repository at a specific commit in its history.</li><li><strong>working tree</strong>: your files as they are right now in the repository</li><li><strong>staging area</strong>: a place to add changes to</li><li><strong>remote</strong>: a copy of the repository on a different host</li><li><strong>clone</strong>: to download an identical copy of a repository</li><li><strong>push</strong>: to upload local commits to a remote repository</li><li><strong>pull</strong>: to re-download commits from the remote repository</li><li><strong>branch</strong>: a named series of commits, a detour, a parallel timeline</li><li><strong>merge</strong>: a consolidation of commits from another branch</li></ul></div><div class="step step-level-1" step="17" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="27200" data-y="0" data-z="0"><h1 id="install-git">Install Git</h1><p>Check first:</p><pre class="highlight code bash">git<span class="w"> </span>--version</pre><p>If missing:</p><ul><li>macOS: <a href="https://www.mikegopsill.com/posts/install-xcode-command-line-tools/">Xcode Command Line Tools</a></li><li>Windows: <a href="https://git-scm.com/install/windows">Git for Windows</a></li><li>Linux: package manager (apt/dnf/pacman)</li></ul><p>Minimum requirement: you can run git in a terminal.</p></div><div class="step step-level-1" step="18" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="28800" data-y="0" data-z="0"><h1 id="commands-the-essentials">Commands: the essentials</h1><ul><li><tt>git init</tt> (initalise a repo)</li><li><tt>git status</tt> (what's happening?)</li><li><tt>git add</tt> (add changes to the commit)</li><li><tt>git rm</tt> (remove a tracked file)</li><li><tt>git commit</tt> (store changes in the repo)</li><li><tt>git log</tt> (see the timeline)</li><li><tt>git checkout</tt> (visit the timeline at a specific checkpoint)</li><li><tt>git clone</tt> (an existing repo)</li><li><tt>git push</tt> (your commits to a remote server)</li><li><tt>git pull</tt> (sync with a repo online and merge)</li><li><tt>git branch</tt> (take a detour)</li><li><tt>git merge</tt> (merge branches)</li></ul></div><div class="step step-level-1" step="19" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="30400" data-y="0" data-z="0"><h1 id="command-git-init">Command: git init</h1><p>Create a repository in the current folder.
|
||||
Use this when you are creating and working on your own projects.</p><pre class="highlight code bash">git<span class="w"> </span>init</pre><p>Creates a .git/ directory containing history + metadata.</p><div class="notes"><p>For the exercise we will use git clone instead of git init.</p></div></div><div class="step step-level-1" step="20" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="32000" data-y="0" data-z="0"><h1 id="command-git-status-your-dashboard">Command: git status (your dashboard)</h1><pre class="highlight code bash">git<span class="w"> </span>status</pre><p>Shows:</p><ul><li>current branch</li><li>staged vs unstaged changes</li><li>untracked files</li></ul></div><div class="step step-level-1" step="21" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="33600" data-y="0" data-z="0"><h1 id="command-git-add-select-files">Command: git add (select files)</h1><p>First, create a file</p><pre class="highlight code bash">nano<span class="w"> </span>index.html</pre><p>Stage files for the next commit.</p><pre class="highlight code bash">git<span class="w"> </span>add<span class="w"> </span>index.html</pre><p>Stage everything (use carefully):</p><pre class="highlight code bash">git<span class="w"> </span>add<span class="w"> </span>.</pre><div class="notes"><p>Staging is curatorial: select what belongs together.</p></div></div><div class="step step-level-1" step="22" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="35200" data-y="0" data-z="0"><h1 id="optional-git-rm">Optional: git rm</h1><p>Remove a tracked file and stage the removal:</p><pre class="highlight code bash">git<span class="w"> </span>rm<span class="w"> </span>old.html<span class="w">
|
||||
</span>git<span class="w"> </span>commit<span class="w"> </span>-m<span class="w"> </span><span class="s2">"Remove old page"</span></pre><p>For this workshop you probably will not need it.</p></div><div class="step step-level-1" step="23" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="36800" data-y="0" data-z="0"><h1 id="command-git-commit-checkpoint">Command: git commit (checkpoint)</h1><pre class="highlight code bash">git<span class="w"> </span>commit<span class="w"> </span>-m<span class="w"> </span><span class="s2">"Added name to my page"</span></pre><p>Good commit message pattern:</p><ul><li>What changed</li><li>Why it changed (reason/intent)</li><li>Scope stays small</li></ul><div class="notes"><p>repeat edit > stage > commit a couple times?</p></div></div><div class="step step-level-1" step="24" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="38400" data-y="0" data-z="0"><h1 id="command-git-log-timeline">Command: git log (timeline)</h1><pre class="highlight code bash">git<span class="w"> </span>log<span class="w"> </span>--oneline<span class="w"> </span>--graph</pre><p>Gives a quick "finding aid" of earlier commits. Press 'q' to exit.</p></div><div class="step step-level-1" step="25" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="40000" data-y="0" data-z="0"><h1 id="command-git-checkout-timetravel">Command: git checkout (timetravel)</h1><pre class="highlight code bash">git<span class="w"> </span>checkout<span class="w"> </span>your_commit_id</pre><p>See your working tree as it would have been at a specific commit on the timeline.</p></div><div class="step step-level-1" step="26" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="41600" data-y="0" data-z="0"><h1 id="command-git-clone">Command: git clone</h1><p>Clone (copy) a repository in the current folder. First, <tt>cd</tt> to a logical location in your computer, then:</p><pre class="highlight code bash">git<span class="w"> </span>clone<span class="w"> </span>https://git.hackersanddesigners.nl/hrk/braids<span class="w">
|
||||
</span><span class="nb">cd</span><span class="w"> </span>braids</pre><p>Downloads a repo from the web, complete with the full commit history and all changes.</p><p>Make edits here as you wish then stage and commit them.</p></div><div class="step step-level-1" step="27" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="43200" data-y="0" data-z="0"><h1 id="command-git-push">Command: git push</h1><p>Push your commits to the server, defining the remote branch to track (setting the upstream)</p><pre class="highlight code bash">git<span class="w"> </span>push<span class="w"> </span>-u<span class="w"> </span>origin<span class="w"> </span>main</pre><p>From then on, unless the remote/branch is named, git push will go in that direction.</p><pre class="highlight code bash">git<span class="w"> </span>push</pre><div class="notes"><p>disabled push rights for now, only for demonstration purposes, will fail</p></div></div><div class="step step-level-1" step="28" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="44800" data-y="0" data-z="0"><h1 id="command-git-pull">Command: git pull</h1><div class="notes"><p>before we do this, one of us changes the background colour and pushes</p></div><p>Pull updates from server:</p><pre class="highlight code bash">git<span class="w"> </span>pull</pre><div class="notes"><p>During the exercise you mostly push your branch.
|
||||
Pull is mainly for getting new changes on main (if needed).</p><p>fact: git pull is actually a git fetch && git merge</p></div></div><div class="step step-level-1" step="29" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="46400" data-y="0" data-z="0"><h1 id="command-git-branch">Command: git branch</h1><p>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.</p><p>List branches:</p><pre class="highlight code bash">git<span class="w"> </span>branch</pre><p>Create a branch:</p><pre class="highlight code bash">git<span class="w"> </span>branch<span class="w"> </span>braids/<your-slug></pre><p>Switch to branch:</p><pre class="highlight code bash">git<span class="w"> </span>checkout<span class="w"> </span>braids/<your-slug></pre><p>Shortcut (create + switch):</p><pre class="highlight code bash">git<span class="w"> </span>checkout<span class="w"> </span>-b<span class="w"> </span>braids/<your-slug></pre><div class="notes"><p>Branches are parallel dossiers: safe space for changes.</p></div></div><div class="step step-level-1" step="30" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="48000" data-y="0" data-z="0"><h1 id="forgejo-what-we-use-today">Forgejo: what we use today</h1><ul><li>Forgejo is an open-source alternative to Github</li><li>Forgejo hosts the central repository (remote)</li></ul><p>You will:</p><ul><li>create an account</li><li>clone via HTTPS</li><li>push your branch</li></ul><p>Share your username with us so we can add you as a collaborator</p><p>Rules for today:</p><ul><li>do NOT push to main</li><li>create your branch under braids/<your-slug></li></ul></div><div class="step step-level-1" step="31" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="49600" data-y="0" data-z="0"><h1 id="forgejo-account-setup">Forgejo: account setup</h1><ol><li>Create account at: <a href="git.hackersanddesigners.nl">git.hackersanddesigners.nl</a></li><li>Confirm you can sign in</li></ol><p>Resources:</p><ul><li><a href="https://git.hackersanddesigners.nl/hrk/braids">https://git.hackersanddesigners.nl/hrk/braids</a> - the repo we will be working in</li><li>live gallery URL: <a href="https://braids.hackersanddesigners.nl">https://braids.hackersanddesigners.nl</a></li><li>these slides: <a href="https://braids.hackersanddesigners.nl/slides">https://braids.hackersanddesigners.nl/slides</a></li></ul></div><div class="step step-level-1" step="32" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="51200" data-y="0" data-z="0"><h1 id="exercise-overview">Exercise overview</h1><p>You will build a (deliberately) simple page:</p><ul><li>"Hi, I'm …"</li><li>maybe a gif?</li><li>a link?</li><li>optional: background, glitter, bad taste encouraged</li></ul><p>Workflow loop:</p><p>clone -> branch -> edit -> status -> add -> commit -> push -> view -> iterate</p></div><div class="step step-level-1" step="33" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="52800" data-y="0" data-z="0"><h1 id="exercise-step-1-clone-branch">Exercise: step 1 (clone & branch)</h1><p>If everything went well in your initial clone & branch, check the repo with:</p><pre class="highlight code bash">git<span class="w"> </span>status<span class="w">
|
||||
</span>git<span class="w"> </span>branch</pre><p>The first time you checkout from <a href="https://git.hackersanddesigners.nl">https://git.hackersanddesigners.nl</a> the server will ask you for credentials. These will be remembered, so only once.</p></div><div class="step step-level-1" step="34" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="54400" data-y="0" data-z="0"><h1 id="exercise-step-2-edit-the-page">Exercise: step 2 (edit the page)</h1><p>Edit the root index.html (and optionally style.css, assets/).</p><p>Make a visible change first:</p><ul><li>Change the name to your name (or your alias)</li></ul><p>Then check changes:</p><pre class="highlight code bash">git<span class="w"> </span>diff<span class="w">
|
||||
</span>git<span class="w"> </span>status</pre></div><div class="step step-level-1" step="35" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="56000" data-y="0" data-z="0"><h1 id="exercise-step-3-stage-commit">Exercise: step 3 (stage + commit)</h1><pre class="highlight code bash">git<span class="w"> </span>add<span class="w"> </span>index.html<span class="w">
|
||||
</span>git<span class="w"> </span>commit<span class="w"> </span>-m<span class="w"> </span><span class="s2">"Customize profile page for <your-slug>"</span></pre><p>If you added assets:</p><pre class="highlight code bash">git<span class="w"> </span>add<span class="w"> </span>assets/<span class="w">
|
||||
</span>git<span class="w"> </span>commit<span class="w"> </span>-m<span class="w"> </span><span class="s2">"Add assets for <your-slug>"</span></pre><div class="notes"><p>Small commits win. One change = one deposit.</p></div></div><div class="step step-level-1" step="36" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="57600" data-y="0" data-z="0"><h1 id="exercise-step-4-push-your-branch">Exercise: step 4 (push your branch)</h1><pre class="highlight code bash">git<span class="w"> </span>push<span class="w"> </span>-u<span class="w"> </span>origin<span class="w"> </span>braids/<your-slug></pre><p>(Again, change <your-slug>!)</p><p>If prompted for credentials, use your Forgejo login method.</p></div><div class="step step-level-1" step="37" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="59200" data-y="0" data-z="0"><h1 id="exercise-step-5-view-live">Exercise: step 5 (view live)</h1><p>Open the gallery:</p><ul><li><a href="https://braids.hackersanddesigners.nl/">https://braids.hackersanddesigners.nl/</a></li></ul><p>Find your card:</p><ul><li>braids/<your-slug>/</li></ul><p>Iterate:</p><p>edit -> status -> add -> commit -> push -> refresh</p></div><div class="step step-level-1" step="38" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="60800" data-y="0" data-z="0"><h1 id="common-problems-fast-fixes">Common problems (fast fixes)</h1><p>Wrong branch:</p><pre class="highlight code bash">git<span class="w"> </span>branch<span class="w">
|
||||
</span>git<span class="w"> </span>checkout<span class="w"> </span>braids/<your-slug></pre><p>Nothing staged:</p><pre class="highlight code bash">git<span class="w"> </span>status<span class="w">
|
||||
</span>git<span class="w"> </span>add<span class="w"> </span>index.html</pre><p>Push rejected (main protected):</p><ul><li>You are on main. Switch to your branch.</li></ul><p>Auth issues:</p><ul><li>HTTPS: check username/password</li></ul></div><div class="step step-level-1" step="39" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="62400" data-y="0" data-z="0"><h1 id="suggested-good-enough-commit-messages">Suggested “good enough” commit messages</h1><p>Bad:</p><ul><li>"update"</li><li>"stuff"</li><li>"changes"</li></ul><p>Better:</p><ul><li>"Add animated gif and profile link"</li><li>"Change background and typography"</li><li>"Fix broken image path"</li></ul><p>Rule: message should still make sense in 6 months.</p></div><div class="step step-level-1" step="40" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="64000" data-y="0" data-z="0"><h1 id="optional-git-merge">Optional: git merge</h1><p>First, go ahead and <tt>git fetch --all</tt> branches from the remote git repository, so you have them locally.</p><p>Then <tt>git branch</tt> to see the available branches.</p><p>Check some of them out with <tt>git checkout braids/<branch_name></tt>.</p><p>See something you like? Merge with them.</p><pre class="highlight code bash">git<span class="w"> </span>checkout<span class="w"> </span>braids/<your-slug><span class="w">
|
||||
</span>git<span class="w"> </span>merge<span class="w"> </span>braids/<chosen_branch></pre><p>Consolidate any merge conflicts manually if you have to. Then, stage, commit and push your changes to your branch.</p></div><div class="step step-level-1" step="41" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="65600" data-y="0" data-z="0"><h1 id="optional-extension-if-time-remains">Optional extension (if time remains)</h1><ul><li>Compare two branches visually (gallery view)</li><li>Show git log to narrate your work as a documented process</li></ul></div><div class="step step-level-1" step="42" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="67200" data-y="0" data-z="0"><h1 id="wrap-up">Wrap-up</h1><p>Learn more:</p><ul><li><a href="https://learngitbranching.js.org/">Learn Git Branching</a></li><li><a href="https://ohmygit.org/">Oh My Git</a></li></ul><div class="notes"><p>End: remind participants their branches will be removed after the workshop.</p></div></div></div><script type="text/javascript" src="js/impress.js"></script><script type="text/javascript" src="js/gotoSlide.js"></script><script type="text/javascript" src="js/hovercraft.js"></script></body></html>
|
||||
BIN
html_output/assets/images/qr_hd.jpg
Normal file
BIN
html_output/assets/images/qr_hd.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 462 B |
|
|
@ -4,7 +4,7 @@
|
|||
messageStyle: "none",
|
||||
TeX : { extensions : ['color.js'] }
|
||||
});
|
||||
</script></head><body class="impress-not-supported"><div id="impress-help"></div><div class="header"><p>🪢 Braids 🪢 Introduction to git 🪢 with H&D 🪢</p></div><div id="impress"><div class="step step-level-1" step="0" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="0" data-y="0" data-z="0"><h1 id="braids-intro-to-git">🪢 Braids: Intro to git 🪢</h1><div class="notes"><p>Goal: introduce Git as an archiving practice,
|
||||
</script></head><body class="impress-not-supported"><div id="impress-help"></div><div class="header"><p>🪢 Braids 🪢 Introduction to git 🪢 with H&D 🪢</p></div><div id="impress"><div class="step step-level-1" step="0" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="0" data-y="0" data-z="0"><h1 id="braids-intro-to-git">🪢 Braids: Intro to git 🪢</h1><img src="assets/images/qr_hd.jpg" width="150px"></img><div class="notes"><p>Goal: introduce Git as an archiving practice,
|
||||
then do a little branch-based website exercise published live.</p></div></div><div class="step step-level-1" step="1" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="1600" data-y="0" data-z="0"><h1 id="planning-90-min">Planning (90 min)</h1><ol><li>Context: what git is, what it does, who uses it (5 min)</li><li>Core concepts (20 min)</li><li>Recap (5 min)</li><li>Install Git (10 min)</li><li>Core commands (15 min)</li><li>Exercise: accounts + clone/push permissions (10 min)</li><li>Exercise: branch a page, publish live, iterate (20 min)</li><li>Wrap-up: good practices + next steps (5 min)</li></ol></div><div class="step step-level-1" step="2" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="3200" data-y="0" data-z="0"><h1 id="workshop-outcome">Workshop outcome</h1><blockquote><p>Each participant will:</p><ul><li>have basic knowledge of git</li><li>clone a repository</li><li>create a branch</li><li>commit changes</li><li>push branch to our platform</li></ul></blockquote></div><div class="step step-level-1" step="3" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="4800" data-y="0" data-z="0"><h1 id="why-git">Why git?</h1><p>If you have been working on a file on your computer and the directory starts to look like this:</p><pre class="highlight code bash">motivation-letter-first-draft.odt<span class="w">
|
||||
</span>motivation-letter.odt<span class="w">
|
||||
</span>motivation-letter-less-formal.odt<span class="w">
|
||||
|
|
@ -25,15 +25,15 @@ A commit contains this information:</p><ol><li><strong>What</strong> changes hav
|
|||
- you intentionally select what becomes part of the record.</p></div></div><div class="step step-level-1" step="9" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="14400" data-y="0" data-z="0"><h1 id="typical-solo-local-workflow">Typical solo local workflow</h1><ol><li><strong>You initalise a directory on your computer with git</strong>.</li><li><strong>You make changes on the directory</strong>.</li><li><strong>You stage your changes and commit them</strong>.</li><li>Repeat steps <strong>2</strong> and <strong>3</strong>.</li></ol><p><strong>Use case</strong>: tracking changes on a local, private folder, like bookkeeping.</p></div><div class="step step-level-1" step="10" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="16000" data-y="0" data-z="0"><h1 id="typical-solo-remote-workflow">Typical solo remote workflow</h1><ol><li>You clone a repository from a remote host to your local computer.</li><li>You make your changes to the repository.</li><li>You stage and commit your changes.</li><li><strong>You push (upload) your commit up to the remote</strong>.</li><li>Repeat steps <strong>2</strong>, <strong>3</strong> and <strong>4</strong></li></ol><p><strong>Use case</strong>: tracking and backing up a private folder, such as passwords.</p></div><div class="step step-level-1" step="11" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="17600" data-y="0" data-z="0"><h1 id="typical-collaborative-remote-workflow">Typical collaborative remote workflow</h1><ol><li>You clone a repository from a remote host to your local computer.</li><li>You make your changes to the repository.</li><li>You stage and commit your changes.</li><li>You push (upload) your commit up to the remote.</li><li><strong>You pull (download) other people's commits from the remote</strong>.</li><li>Repeat steps <strong>5</strong>, <strong>2</strong>, <strong>3</strong> and <strong>4</strong></li></ol><p><strong>Use case</strong>: tracking and collaborating on a repository with others such as a website project with multiple developers.</p></div><div class="step step-level-1" step="12" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="19200" data-y="0" data-z="0"><h1 id="core-concept-branching">Core concept: Branching</h1><div class="row"><div><p>In git, a <strong>branch</strong> is a named series of commits.</p><div class="notes"><p>In the previous example, there is only one branch, named "main" by default.</p></div><p>When you want to "take a detour" from the main course of a repository, you can create a separate branch.</p><div class="notes"><p>Now, parrallel timelines of the same repository exist next to each other.</p></div><p>Example <strong>use cases</strong> of branching:</p><ul><li>Experiment with a new feature affecting many files</li><li>Proposing an improvement to your collaborators</li><li>Have multiple versions of a website online</li><li>Making existing software compatible somewhere else</li></ul><div class="notes"><p>There is a lot of discourse around when to branch and how often. It varies from person to person and group to group.</p><p>From the perspective of git, since branching doesn't add any technical overload on a project, it is encouraged to branch more and branch often. From a logical perspective, every branch creates a parrallel timeline, and this might be a lot to keep track of mentally.</p><p>Branching allows for and encourages collaboration and is at the core of the free and open source software movement.</p></div></div><img src="assets/images/branching.png" width="500px"></img></div></div><div class="step step-level-1" step="13" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="20800" data-y="0" data-z="0"><h1 id="core-concept-merging">Core concept: Merging</h1><div class="row"><div><p>In git, <strong>merging</strong> is when you consolidate commits from a separate branch into your own.</p><div class="notes"><p>There are various merging techniques, and most of the time, the automated algorithm will work.</p></div><p>Sometimes, you might encounter a <strong>merge confilct</strong>: a section of a file where both branches have conflicting changes that cannot be automatically resolved. Here, you have to manually resolve the conflicts.</p><div class="notes"><p>which can take the form of:
|
||||
- accepting a change from one branch and rejecting the other
|
||||
- accepting and keeping both changes
|
||||
- re-editing the files to incorporate both changes</p></div><p>After merging two branches, a <strong>merge commit</strong> is created. This is an exceptional commit that has two parent commits instead of one.</p></div><img src="assets/images/merge.png" width="400px"></img></div></div><div class="step step-level-1" step="14" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="22400" data-y="0" data-z="0"><h1 id="complex-collaborative-remote-workflow">Complex collaborative remote workflow</h1><ol><li>You clone a repository from a remote host to your local computer.</li><li><strong>You create a new branch "my-feature" for your changes</strong>.</li><li>You make your changes to the repository.</li><li>You stage and commit your changes.</li><li>You push your commit (and new branch) up to the remote.</li><li>You pull other people's commits on this branch from the remote.</li><li>Repeat steps <strong>6</strong>, <strong>3</strong>, <strong>4</strong> and <strong>5</strong></li><li><strong>You switch back to "main" and merge "my-feature" into it</strong>.</li><li><strong>You push your new merge commit up to the "main" branch</strong>.</li></ol><p><strong>Use case</strong>: you are designing a website for a client and want to show 3 different versions of it with different background colours.</p><p><strong>Use case</strong>: 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.</p></div><div class="step step-level-1" step="15" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="24000" data-y="0" data-z="0"><img src="assets/images/braids.png" width="100%"></img></div><div class="step step-level-1" step="16" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="25600" data-y="0" data-z="0"><h1 id="recap">Recap</h1><ul><li><strong>repository</strong>: a directory initialised with git</li><li><strong>commit</strong>: a checkpoint in the repository timeline(s)</li><li><strong>checkout</strong>: to visit the repository at a specific commit in its history.</li><li><strong>working tree</strong>: your files as they are right now in the repository</li><li><strong>staging area</strong>: a place to add changes to</li><li><strong>remote</strong>: a copy of the repository on a different host</li><li><strong>clone</strong>: to download an identical copy of a repository</li><li><strong>push</strong>: to upload local commits to a remote repository</li><li><strong>pull</strong>: to re-download commits from the remote repository</li><li><strong>branch</strong>: a named series of commits, a detour, a parallel timeline</li><li><strong>merge</strong>: a consolidation of commits from another branch</li></ul></div><div class="step step-level-1" step="17" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="27200" data-y="0" data-z="0"><h1 id="install-git">Install Git</h1><p>Check first:</p><pre class="highlight code bash">git<span class="w"> </span>--version</pre><p>If missing:</p><ul><li>macOS: Xcode Command Line Tools</li><li>Windows: Git for Windows</li><li>Linux: package manager (apt/dnf/pacman)</li></ul><p>Minimum requirement: you can run git in a terminal.</p></div><div class="step step-level-1" step="18" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="28800" data-y="0" data-z="0"><h1 id="commands-the-essentials">Commands: the essentials</h1><ul><li><tt>git init</tt> (initalise a repo)</li><li><tt>git status</tt> (what's happening?)</li><li><tt>git add</tt> (add changes to the commit)</li><li><tt>git rm</tt> (remove a tracked file)</li><li><tt>git commit</tt> (store changes in the repo)</li><li><tt>git log</tt> (see the timeline)</li><li><tt>git checkout</tt> (visit the timeline at a specific checkpoint)</li><li><tt>git clone</tt> (an existing repo)</li><li><tt>git push</tt> (your commits to a remote server)</li><li><tt>git pull</tt> (sync with a repo online and merge)</li><li><tt>git branch</tt> (take a detour)</li><li><tt>git merge</tt> (merge branches)</li></ul></div><div class="step step-level-1" step="19" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="30400" data-y="0" data-z="0"><h1 id="command-git-init">Command: git init</h1><p>Create a repository in the current folder.
|
||||
- re-editing the files to incorporate both changes</p></div><p>After merging two branches, a <strong>merge commit</strong> is created. This is an exceptional commit that has two parent commits instead of one.</p></div><img src="assets/images/merge.png" width="400px"></img></div></div><div class="step step-level-1" step="14" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="22400" data-y="0" data-z="0"><h1 id="complex-collaborative-remote-workflow">Complex collaborative remote workflow</h1><ol><li>You clone a repository from a remote host to your local computer.</li><li><strong>You create a new branch "my-feature" for your changes</strong>.</li><li>You make your changes to the repository.</li><li>You stage and commit your changes.</li><li>You push your commit (and new branch) up to the remote.</li><li>You pull other people's commits on this branch from the remote.</li><li>Repeat steps <strong>6</strong>, <strong>3</strong>, <strong>4</strong> and <strong>5</strong></li><li><strong>You switch back to "main" and merge "my-feature" into it</strong>.</li><li><strong>You push your new merge commit up to the "main" branch</strong>.</li></ol><p><strong>Use case</strong>: you are designing a website for a client and want to show 3 different versions of it with different background colours.</p><p><strong>Use case</strong>: 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.</p></div><div class="step step-level-1" step="15" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="24000" data-y="0" data-z="0"><img src="assets/images/braids.png" width="100%"></img></div><div class="step step-level-1" step="16" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="25600" data-y="0" data-z="0"><h1 id="recap">Recap</h1><ul><li><strong>repository</strong>: a directory initialised with git</li><li><strong>commit</strong>: a checkpoint in the repository timeline(s)</li><li><strong>checkout</strong>: to visit the repository at a specific commit in its history.</li><li><strong>working tree</strong>: your files as they are right now in the repository</li><li><strong>staging area</strong>: a place to add changes to</li><li><strong>remote</strong>: a copy of the repository on a different host</li><li><strong>clone</strong>: to download an identical copy of a repository</li><li><strong>push</strong>: to upload local commits to a remote repository</li><li><strong>pull</strong>: to re-download commits from the remote repository</li><li><strong>branch</strong>: a named series of commits, a detour, a parallel timeline</li><li><strong>merge</strong>: a consolidation of commits from another branch</li></ul></div><div class="step step-level-1" step="17" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="27200" data-y="0" data-z="0"><h1 id="install-git">Install Git</h1><p>Check first:</p><pre class="highlight code bash">git<span class="w"> </span>--version</pre><p>If missing:</p><ul><li>macOS: <a href="https://www.mikegopsill.com/posts/install-xcode-command-line-tools/">Xcode Command Line Tools</a></li><li>Windows: <a href="https://git-scm.com/install/windows">Git for Windows</a></li><li>Linux: package manager (apt/dnf/pacman)</li></ul><p>Minimum requirement: you can run git in a terminal.</p></div><div class="step step-level-1" step="18" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="28800" data-y="0" data-z="0"><h1 id="commands-the-essentials">Commands: the essentials</h1><ul><li><tt>git init</tt> (initalise a repo)</li><li><tt>git status</tt> (what's happening?)</li><li><tt>git add</tt> (add changes to the commit)</li><li><tt>git rm</tt> (remove a tracked file)</li><li><tt>git commit</tt> (store changes in the repo)</li><li><tt>git log</tt> (see the timeline)</li><li><tt>git checkout</tt> (visit the timeline at a specific checkpoint)</li><li><tt>git clone</tt> (an existing repo)</li><li><tt>git push</tt> (your commits to a remote server)</li><li><tt>git pull</tt> (sync with a repo online and merge)</li><li><tt>git branch</tt> (take a detour)</li><li><tt>git merge</tt> (merge branches)</li></ul></div><div class="step step-level-1" step="19" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="30400" data-y="0" data-z="0"><h1 id="command-git-init">Command: git init</h1><p>Create a repository in the current folder.
|
||||
Use this when you are creating and working on your own projects.</p><pre class="highlight code bash">git<span class="w"> </span>init</pre><p>Creates a .git/ directory containing history + metadata.</p><div class="notes"><p>For the exercise we will use git clone instead of git init.</p></div></div><div class="step step-level-1" step="20" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="32000" data-y="0" data-z="0"><h1 id="command-git-status-your-dashboard">Command: git status (your dashboard)</h1><pre class="highlight code bash">git<span class="w"> </span>status</pre><p>Shows:</p><ul><li>current branch</li><li>staged vs unstaged changes</li><li>untracked files</li></ul></div><div class="step step-level-1" step="21" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="33600" data-y="0" data-z="0"><h1 id="command-git-add-select-files">Command: git add (select files)</h1><p>First, create a file</p><pre class="highlight code bash">nano<span class="w"> </span>index.html</pre><p>Stage files for the next commit.</p><pre class="highlight code bash">git<span class="w"> </span>add<span class="w"> </span>index.html</pre><p>Stage everything (use carefully):</p><pre class="highlight code bash">git<span class="w"> </span>add<span class="w"> </span>.</pre><div class="notes"><p>Staging is curatorial: select what belongs together.</p></div></div><div class="step step-level-1" step="22" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="35200" data-y="0" data-z="0"><h1 id="optional-git-rm">Optional: git rm</h1><p>Remove a tracked file and stage the removal:</p><pre class="highlight code bash">git<span class="w"> </span>rm<span class="w"> </span>old.html<span class="w">
|
||||
</span>git<span class="w"> </span>commit<span class="w"> </span>-m<span class="w"> </span><span class="s2">"Remove old page"</span></pre><p>For this workshop you probably will not need it.</p></div><div class="step step-level-1" step="23" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="36800" data-y="0" data-z="0"><h1 id="command-git-commit-checkpoint">Command: git commit (checkpoint)</h1><pre class="highlight code bash">git<span class="w"> </span>commit<span class="w"> </span>-m<span class="w"> </span><span class="s2">"Added name to my page"</span></pre><p>Good commit message pattern:</p><ul><li>What changed</li><li>Why it changed (reason/intent)</li><li>Scope stays small</li></ul><div class="notes"><p>repeat edit > stage > commit a couple times?</p></div></div><div class="step step-level-1" step="24" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="38400" data-y="0" data-z="0"><h1 id="command-git-log-timeline">Command: git log (timeline)</h1><pre class="highlight code bash">git<span class="w"> </span>log<span class="w"> </span>--oneline<span class="w"> </span>--graph</pre><p>Gives a quick "finding aid" of earlier commits. Press 'q' to exit.</p></div><div class="step step-level-1" step="25" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="40000" data-y="0" data-z="0"><h1 id="command-git-checkout-timetravel">Command: git checkout (timetravel)</h1><pre class="highlight code bash">git<span class="w"> </span>checkout<span class="w"> </span>your_commit_id</pre><p>See your working tree as it would have been at a specific commit on the timeline.</p></div><div class="step step-level-1" step="26" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="41600" data-y="0" data-z="0"><h1 id="command-git-clone">Command: git clone</h1><p>Clone (copy) a repository in the current folder. First, <tt>cd</tt> to a logical location in your computer, then:</p><pre class="highlight code bash">git<span class="w"> </span>clone<span class="w"> </span>https://git.hackersanddesigners.nl/hrk/braids<span class="w">
|
||||
</span><span class="nb">cd</span><span class="w"> </span>braids</pre><p>Downloads a repo from the web, complete with the full commit history and all changes.</p><p>Make edits here as you wish then stage and commit them.</p></div><div class="step step-level-1" step="27" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="43200" data-y="0" data-z="0"><h1 id="command-git-push">Command: git push</h1><p>Push your commits to the server, defining the remote branch to track (setting the upstream)</p><pre class="highlight code bash">git<span class="w"> </span>push<span class="w"> </span>-u<span class="w"> </span>origin<span class="w"> </span>main</pre><p>From then on, unless the remote/branch is named, git push will go in that direction.</p><pre class="highlight code bash">git<span class="w"> </span>push</pre><div class="notes"><p>disabled push rights for now, only for demonstration purposes, will fail</p></div></div><div class="step step-level-1" step="28" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="44800" data-y="0" data-z="0"><h1 id="command-git-pull">Command: git pull</h1><div class="notes"><p>before we do this, one of us changes the background colour and pushes</p></div><p>Pull updates from server:</p><pre class="highlight code bash">git<span class="w"> </span>pull</pre><div class="notes"><p>During the exercise you mostly push your branch.
|
||||
Pull is mainly for getting new changes on main (if needed).</p><p>fact: git pull is actually a git fetch && git merge</p></div></div><div class="step step-level-1" step="29" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="46400" data-y="0" data-z="0"><h1 id="command-git-branch">Command: git branch</h1><p>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.</p><p>List branches:</p><pre class="highlight code bash">git<span class="w"> </span>branch</pre><p>Create a branch:</p><pre class="highlight code bash">git<span class="w"> </span>branch<span class="w"> </span>braids/<your-slug></pre><p>Switch to branch:</p><pre class="highlight code bash">git<span class="w"> </span>checkout<span class="w"> </span>braids/<your-slug></pre><p>Shortcut (create + switch):</p><pre class="highlight code bash">git<span class="w"> </span>checkout<span class="w"> </span>-b<span class="w"> </span>braids/<your-slug></pre><div class="notes"><p>Branches are parallel dossiers: safe space for changes.</p></div></div><div class="step step-level-1" step="30" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="48000" data-y="0" data-z="0"><h1 id="forgejo-what-we-use-today">Forgejo: what we use today</h1><ul><li>Forgejo is an open-source alternative to Github</li><li>Forgejo hosts the central repository (remote)</li></ul><p>You will:</p><ul><li>create an account</li><li>clone via HTTPS</li><li>push your branch</li></ul><p>Share your username with us so we can add you as a collaborator</p><p>Rules for today:</p><ul><li>do NOT push to main</li><li>create your branch under braids/<your-slug></li></ul></div><div class="step step-level-1" step="31" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="49600" data-y="0" data-z="0"><h1 id="forgejo-account-setup">Forgejo: account setup</h1><ol><li>Create account at: git.hackersanddesigners.nl</li><li>Confirm you can sign in</li></ol><p>Resources:</p><ul><li><a href="https://git.hackersanddesigners.nl/hrk/braids">https://git.hackersanddesigners.nl/hrk/braids</a> - the repo we will be working in</li><li>live gallery URL: <a href="https://braids.hackersanddesigners.nl">https://braids.hackersanddesigners.nl</a></li><li>these slides: <a href="https://braids.hackersanddesigners.nl/slides">https://braids.hackersanddesigners.nl/slides</a></li></ul></div><div class="step step-level-1" step="32" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="51200" data-y="0" data-z="0"><h1 id="exercise-overview">Exercise overview</h1><p>You will build a (deliberately) simple page:</p><ul><li>"Hi, I'm …"</li><li>maybe a gif?</li><li>a link?</li><li>optional: background, glitter, bad taste encouraged</li></ul><p>Workflow loop:</p><p>clone -> branch -> edit -> status -> add -> commit -> push -> view -> iterate</p></div><div class="step step-level-1" step="33" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="52800" data-y="0" data-z="0"><h1 id="exercise-step-1-clone-branch">Exercise: step 1 (clone & branch)</h1><p>If everything went well in your initial clone & branch, check the repo with:</p><pre class="highlight code bash">git<span class="w"> </span>status<span class="w">
|
||||
Pull is mainly for getting new changes on main (if needed).</p><p>fact: git pull is actually a git fetch && git merge</p></div></div><div class="step step-level-1" step="29" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="46400" data-y="0" data-z="0"><h1 id="command-git-branch">Command: git branch</h1><p>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.</p><p>List branches:</p><pre class="highlight code bash">git<span class="w"> </span>branch</pre><p>Create a branch:</p><pre class="highlight code bash">git<span class="w"> </span>branch<span class="w"> </span>braids/<your-slug></pre><p>Switch to branch:</p><pre class="highlight code bash">git<span class="w"> </span>checkout<span class="w"> </span>braids/<your-slug></pre><p>Shortcut (create + switch):</p><pre class="highlight code bash">git<span class="w"> </span>checkout<span class="w"> </span>-b<span class="w"> </span>braids/<your-slug></pre><div class="notes"><p>Branches are parallel dossiers: safe space for changes.</p></div></div><div class="step step-level-1" step="30" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="48000" data-y="0" data-z="0"><h1 id="forgejo-what-we-use-today">Forgejo: what we use today</h1><ul><li>Forgejo is an open-source alternative to Github</li><li>Forgejo hosts the central repository (remote)</li></ul><p>You will:</p><ul><li>create an account</li><li>clone via HTTPS</li><li>push your branch</li></ul><p>Share your username with us so we can add you as a collaborator</p><p>Rules for today:</p><ul><li>do NOT push to main</li><li>create your branch under braids/<your-slug></li></ul></div><div class="step step-level-1" step="31" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="49600" data-y="0" data-z="0"><h1 id="forgejo-account-setup">Forgejo: account setup</h1><ol><li>Create account at: <a href="git.hackersanddesigners.nl">git.hackersanddesigners.nl</a></li><li>Confirm you can sign in</li></ol><p>Resources:</p><ul><li><a href="https://git.hackersanddesigners.nl/hrk/braids">https://git.hackersanddesigners.nl/hrk/braids</a> - the repo we will be working in</li><li>live gallery URL: <a href="https://braids.hackersanddesigners.nl">https://braids.hackersanddesigners.nl</a></li><li>these slides: <a href="https://braids.hackersanddesigners.nl/slides">https://braids.hackersanddesigners.nl/slides</a></li></ul></div><div class="step step-level-1" step="32" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="51200" data-y="0" data-z="0"><h1 id="exercise-overview">Exercise overview</h1><p>You will build a (deliberately) simple page:</p><ul><li>"Hi, I'm …"</li><li>maybe a gif?</li><li>a link?</li><li>optional: background, glitter, bad taste encouraged</li></ul><p>Workflow loop:</p><p>clone -> branch -> edit -> status -> add -> commit -> push -> view -> iterate</p></div><div class="step step-level-1" step="33" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="52800" data-y="0" data-z="0"><h1 id="exercise-step-1-clone-branch">Exercise: step 1 (clone & branch)</h1><p>If everything went well in your initial clone & branch, check the repo with:</p><pre class="highlight code bash">git<span class="w"> </span>status<span class="w">
|
||||
</span>git<span class="w"> </span>branch</pre><p>The first time you checkout from <a href="https://git.hackersanddesigners.nl">https://git.hackersanddesigners.nl</a> the server will ask you for credentials. These will be remembered, so only once.</p></div><div class="step step-level-1" step="34" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="54400" data-y="0" data-z="0"><h1 id="exercise-step-2-edit-the-page">Exercise: step 2 (edit the page)</h1><p>Edit the root index.html (and optionally style.css, assets/).</p><p>Make a visible change first:</p><ul><li>Change the name to your name (or your alias)</li></ul><p>Then check changes:</p><pre class="highlight code bash">git<span class="w"> </span>diff<span class="w">
|
||||
</span>git<span class="w"> </span>status</pre></div><div class="step step-level-1" step="35" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="56000" data-y="0" data-z="0"><h1 id="exercise-step-3-stage-commit">Exercise: step 3 (stage + commit)</h1><pre class="highlight code bash">git<span class="w"> </span>add<span class="w"> </span>index.html<span class="w">
|
||||
</span>git<span class="w"> </span>commit<span class="w"> </span>-m<span class="w"> </span><span class="s2">"Customize profile page for <your-slug>"</span></pre><p>If you added assets:</p><pre class="highlight code bash">git<span class="w"> </span>add<span class="w"> </span>assets/<span class="w">
|
||||
</span>git<span class="w"> </span>commit<span class="w"> </span>-m<span class="w"> </span><span class="s2">"Add assets for <your-slug>"</span></pre><div class="notes"><p>Small commits win. One change = one deposit.</p></div></div><div class="step step-level-1" step="36" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="57600" data-y="0" data-z="0"><h1 id="exercise-step-4-push-your-branch">Exercise: step 4 (push your branch)</h1><pre class="highlight code bash">git<span class="w"> </span>push<span class="w"> </span>-u<span class="w"> </span>origin<span class="w"> </span>braids/<your-slug></pre><p>(Again, change <your-slug>!)</p><p>If prompted for credentials, use your Forgejo login method.</p></div><div class="step step-level-1" step="37" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="59200" data-y="0" data-z="0"><h1 id="exercise-step-5-view-live">Exercise: step 5 (view live)</h1><p>Open the gallery:</p><ul><li>https://braids.hackersanddesigners.nl/</li></ul><p>Find your card:</p><ul><li>braids/<your-slug>/</li></ul><p>Iterate:</p><p>edit -> status -> add -> commit -> push -> refresh</p></div><div class="step step-level-1" step="38" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="60800" data-y="0" data-z="0"><h1 id="common-problems-fast-fixes">Common problems (fast fixes)</h1><p>Wrong branch:</p><pre class="highlight code bash">git<span class="w"> </span>branch<span class="w">
|
||||
</span>git<span class="w"> </span>commit<span class="w"> </span>-m<span class="w"> </span><span class="s2">"Add assets for <your-slug>"</span></pre><div class="notes"><p>Small commits win. One change = one deposit.</p></div></div><div class="step step-level-1" step="36" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="57600" data-y="0" data-z="0"><h1 id="exercise-step-4-push-your-branch">Exercise: step 4 (push your branch)</h1><pre class="highlight code bash">git<span class="w"> </span>push<span class="w"> </span>-u<span class="w"> </span>origin<span class="w"> </span>braids/<your-slug></pre><p>(Again, change <your-slug>!)</p><p>If prompted for credentials, use your Forgejo login method.</p></div><div class="step step-level-1" step="37" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="59200" data-y="0" data-z="0"><h1 id="exercise-step-5-view-live">Exercise: step 5 (view live)</h1><p>Open the gallery:</p><ul><li><a href="https://braids.hackersanddesigners.nl/">https://braids.hackersanddesigners.nl/</a></li></ul><p>Find your card:</p><ul><li>braids/<your-slug>/</li></ul><p>Iterate:</p><p>edit -> status -> add -> commit -> push -> refresh</p></div><div class="step step-level-1" step="38" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="60800" data-y="0" data-z="0"><h1 id="common-problems-fast-fixes">Common problems (fast fixes)</h1><p>Wrong branch:</p><pre class="highlight code bash">git<span class="w"> </span>branch<span class="w">
|
||||
</span>git<span class="w"> </span>checkout<span class="w"> </span>braids/<your-slug></pre><p>Nothing staged:</p><pre class="highlight code bash">git<span class="w"> </span>status<span class="w">
|
||||
</span>git<span class="w"> </span>add<span class="w"> </span>index.html</pre><p>Push rejected (main protected):</p><ul><li>You are on main. Switch to your branch.</li></ul><p>Auth issues:</p><ul><li>HTTPS: check username/password</li></ul></div><div class="step step-level-1" step="39" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="62400" data-y="0" data-z="0"><h1 id="suggested-good-enough-commit-messages">Suggested “good enough” commit messages</h1><p>Bad:</p><ul><li>"update"</li><li>"stuff"</li><li>"changes"</li></ul><p>Better:</p><ul><li>"Add animated gif and profile link"</li><li>"Change background and typography"</li><li>"Fix broken image path"</li></ul><p>Rule: message should still make sense in 6 months.</p></div><div class="step step-level-1" step="40" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="64000" data-y="0" data-z="0"><h1 id="optional-git-merge">Optional: git merge</h1><p>First, go ahead and <tt>git fetch --all</tt> branches from the remote git repository, so you have them locally.</p><p>Then <tt>git branch</tt> to see the available branches.</p><p>Check some of them out with <tt>git checkout braids/<branch_name></tt>.</p><p>See something you like? Merge with them.</p><pre class="highlight code bash">git<span class="w"> </span>checkout<span class="w"> </span>braids/<your-slug><span class="w">
|
||||
</span>git<span class="w"> </span>merge<span class="w"> </span>braids/<chosen_branch></pre><p>Consolidate any merge conflicts manually if you have to. Then, stage, commit and push your changes to your branch.</p></div><div class="step step-level-1" step="41" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="65600" data-y="0" data-z="0"><h1 id="optional-extension-if-time-remains">Optional extension (if time remains)</h1><ul><li>Compare two branches visually (gallery view)</li><li>Show git log to narrate your work as a documented process</li></ul></div><div class="step step-level-1" step="42" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1" data-x="67200" data-y="0" data-z="0"><h1 id="wrap-up">Wrap-up</h1><p>Learn more:</p><ul><li><a href="https://learngitbranching.js.org/">Learn Git Branching</a></li><li><a href="https://ohmygit.org/">Oh My Git</a></li></ul><div class="notes"><p>End: remind participants their branches will be removed after the workshop.</p></div></div></div><script type="text/javascript" src="js/impress.js"></script><script type="text/javascript" src="js/gotoSlide.js"></script><script type="text/javascript" src="js/hovercraft.js"></script></body></html>
|
||||
|
|
@ -33,6 +33,11 @@ a {
|
|||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.step {
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
.step strong {
|
||||
/* color: ; */
|
||||
/* font-weight: normal; */
|
||||
|
|
@ -96,6 +101,10 @@ h1, h2, h3, h4 {
|
|||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-list ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
**/*.rst **/*.css {
|
||||
**/*.rst **/*.css !html_output/** {
|
||||
prep: make html
|
||||
daemon: devd -m ./html_output
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,6 +33,11 @@ a {
|
|||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.step {
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
.step strong {
|
||||
/* color: ; */
|
||||
/* font-weight: normal; */
|
||||
|
|
|
|||
20
slides.rst
20
slides.rst
|
|
@ -9,9 +9,15 @@
|
|||
|
||||
----
|
||||
|
||||
|
||||
🪢 Braids: Intro to git 🪢
|
||||
============================
|
||||
|
||||
|
||||
.. image:: assets/images/qr_hd.jpg
|
||||
:width: 150px
|
||||
:scale: 100 %
|
||||
|
||||
.. note::
|
||||
|
||||
Goal: introduce Git as an archiving practice,
|
||||
|
|
@ -368,8 +374,8 @@ Check first:
|
|||
|
||||
If missing:
|
||||
|
||||
- macOS: Xcode Command Line Tools
|
||||
- Windows: Git for Windows
|
||||
- macOS: `Xcode Command Line Tools <https://www.mikegopsill.com/posts/install-xcode-command-line-tools/>`_
|
||||
- Windows: `Git for Windows <https://git-scm.com/install/windows>`_
|
||||
- Linux: package manager (apt/dnf/pacman)
|
||||
|
||||
Minimum requirement: you can run `git` in a terminal.
|
||||
|
|
@ -660,14 +666,14 @@ Rules for today:
|
|||
Forgejo: account setup
|
||||
======================
|
||||
|
||||
1. Create account at: `git.hackersanddesigners.nl`
|
||||
1. Create account at: `<git.hackersanddesigners.nl>`_
|
||||
2. Confirm you can sign in
|
||||
|
||||
Resources:
|
||||
|
||||
- https://git.hackersanddesigners.nl/hrk/braids - the repo we will be working in
|
||||
- live gallery URL: https://braids.hackersanddesigners.nl
|
||||
- these slides: https://braids.hackersanddesigners.nl/slides
|
||||
- `<https://git.hackersanddesigners.nl/hrk/braids>`_ - the repo we will be working in
|
||||
- live gallery URL: `<https://braids.hackersanddesigners.nl>`_
|
||||
- these slides: `<https://braids.hackersanddesigners.nl/slides>`_
|
||||
|
||||
|
||||
|
||||
|
|
@ -762,7 +768,7 @@ Exercise: step 5 (view live)
|
|||
|
||||
Open the gallery:
|
||||
|
||||
- `https://braids.hackersanddesigners.nl/`
|
||||
- `<https://braids.hackersanddesigners.nl/>`_
|
||||
|
||||
Find your card:
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue