inherentlee/leecat.art-site
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drone build Sun Sep 20 15:08:31 PDT 2026

Browse Source
This commit is contained in:
inherentlee
2026-09-20 22:08:31 +00:00
parent 1d51eaebec
commit 207d8c1cd5
731 changed files with 8308 additions and 5281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
an-intro-to-git/index.html
+264 -103
View File
@@ -40,7 +40,80 @@
<style>.post-metadata {
<style>#toc {
float: right;
margin: 1rem 0 1.5rem 1.5rem;
width: min(calc(100% - 1.5rem), 23rem);
/* 23rem is the width of the words 'table of contents' in my header font */
/* yes, it's a bit hacky */
}
@media (max-width: 850px) {
#toc {
float: unset;
margin-top: 2rem;
margin-left: .5rem;
width: calc(100% - .5rem);
}
}
#toc details {
border: thick solid var(--color-pink);
border-radius: 1rem;
margin-top: 1rem;
}
#toc summary {
position: relative;
top: -1.5rem;
left: -.75rem;
width: fit-content;
background: var(--color-bg);
border-radius: .5rem;
}
#toc summary:focus-visible {
outline: .15rem solid var(--color-teal);
}
#toc summary::marker {
font-size: 2.35rem;
}
#toc h2 {
margin-top: 0;
display: inline;
line-height: normal;
}
#toc nav {
position: relative;
top: -1.25rem;
}
#toc li {
margin-block: .45rem 0;
}
@media (max-width: 650px) {
#toc nav > ol {
margin-left: .5rem;
}
}
/* basically we want to style this `ol` as a `ul` */
#toc ol > li {
list-style: disc;
}
#toc ol > li > ol > li {
list-style: circle;
}
#toc ol > li > ol > li > ol > li {
list-style: square;
}
.post-metadata {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
@@ -438,6 +511,8 @@ body:has(dialog[open]) {
color-scheme: light dark;
--font-family: 'Atkinson Hyperlegible Next', sans-serif;
/* if you change the header font, go to post-toc.css and fuck about with the width
of the table of contents */
--font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif;
--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
@@ -496,7 +571,6 @@ body:has(dialog[open]) {
}
/* Base */
* {
box-sizing: border-box;
margin: 0;
@@ -1814,7 +1888,7 @@ switch (currentThemeValue) {
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article data-pagefind-body="">
<h1 id="an-intro-to-git">an intro to git</h1>
<h1>an intro to git</h1>
<div class="post-metadata">
<p>
@@ -1843,88 +1917,172 @@ switch (currentThemeValue) {
<img class="hero" src="/img/goldeneye-tail.jpg" alt="Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash." loading="lazy" decoding="async" width="1000" height="666">
<p>alrighty, this one's a real doozy. Strap in.</p>
<hr>
<!-- TOC -->
<ul>
<li><a href="#versioning">versioning</a></li>
<li><a href="#problem-statement">problem statement</a></li>
<li><a href="#what-is-git">what is git?</a>
<ul>
<li><a href="#where-can-i-use-git">where can I use git?</a>
<ul>
<li><a href="#what-is-a-cli">what is a CLI?</a></li>
</ul>
</li>
<li><a href="#where-can-i-use-the-git-cli">where can I use the git CLI?</a>
<ul>
<li><a href="#git-for-windows">git for Windows</a></li>
<li><a href="#wsl">WSL</a></li>
<li><a href="#a-few-terminal-operations">a few terminal operations</a></li>
<li><a href="#edit-files">edit files</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#git-version">git version</a>
<ul>
<li><a href="#a-few-handy-settings">a few handy settings</a></li>
</ul>
</li>
<li><a href="#git-going">git going</a>
<ul>
<li><a href="#git-init">git init</a></li>
<li><a href="#git-clone">git clone</a></li>
</ul>
</li>
<li><a href="#git-status">git status</a>
<ul>
<li><a href="#branch-main">branch main</a></li>
<li><a href="#no-commits--nothing-to-commit">no commits / nothing to commit</a></li>
</ul>
</li>
<li><a href="#commits-and-history">commits and history</a>
<ul>
<li><a href="#git-log">git log</a></li>
<li><a href="#creating-a-commit">creating a commit</a></li>
</ul>
</li>
<li><a href="#the-staging-area">the staging area</a>
<ul>
<li><a href="#git-add">git add</a></li>
</ul>
</li>
<li><a href="#git-commit">git commit</a>
<ul>
<li><a href="#checking-our-work">checking our work</a></li>
</ul>
</li>
<li><a href="#changes-to-existing-files">changes to existing files</a>
<ul>
<li><a href="#git-restore">git restore</a></li>
</ul>
</li>
<li><a href="#git-revert">git revert</a></li>
<li><a href="#git-remote">git remote</a>
<ul>
<li><a href="#git-fetch-and-git-pull">git fetch and git pull</a></li>
<li><a href="#git-push-take-one">git push, take one</a></li>
<li><a href="#authentication">authentication</a></li>
<li><a href="#ssh-keys">SSH keys</a>
<ul>
<li><a href="#creation">creation</a></li>
<li><a href="#an-alias">an alias...</a></li>
<li><a href="#and-a-function">and a function</a></li>
<li><a href="#ssh-keys-and-the-remote">SSH keys and the remote</a></li>
</ul>
</li>
<li><a href="#git-push-take-two">git push, take two</a></li>
</ul>
</li>
<li><a href="#summary">summary</a></li>
</ul>
<!-- /TOC -->
<hr>
<aside id="toc">
<details>
<summary><h2>table of contents</h2></summary>
<nav class="toc">
<ol>
<li><a href="#versioning">versioning</a>
</li>
<li><a href="#problem-statement">problem statement</a>
</li>
<li><a href="#what-is-git%3F">what is git?</a>
<ol>
<li><a href="#where-can-i-use-git%3F">where can I use git?</a>
<ol>
<li><a href="#what-is-a-cli%3F">what is a CLI?</a>
</li>
</ol>
</li>
<li><a href="#where-can-i-use-the-git-cli%3F">where can I use the git CLI?</a>
<ol>
<li><a href="#git-for-windows">git for Windows</a>
</li>
<li><a href="#wsl">WSL</a>
</li>
<li><a href="#a-few-terminal-operations">a few terminal operations</a>
</li>
<li><a href="#edit-files">edit files</a>
</li>
</ol>
</li>
</ol>
</li>
<li><a href="#git-version">git version</a>
<ol>
<li><a href="#a-few-handy-settings">a few handy settings</a>
</li>
</ol>
</li>
<li><a href="#git-going">git going</a>
<ol>
<li><a href="#git-init">git init</a>
</li>
<li><a href="#git-clone">git clone</a>
</li>
</ol>
</li>
<li><a href="#git-status">git status</a>
<ol>
<li><a href="#branch-main">branch main</a>
</li>
<li><a href="#no-commits-%2F-nothing-to-commit">no commits / nothing to commit</a>
</li>
</ol>
</li>
<li><a href="#commits-and-history">commits and history</a>
<ol>
<li><a href="#git-log">git log</a>
</li>
<li><a href="#creating-a-commit">creating a commit</a>
</li>
</ol>
</li>
<li><a href="#the-staging-area">the staging area</a>
<ol>
<li><a href="#git-add">git add</a>
</li>
</ol>
</li>
<li><a href="#git-commit">git commit</a>
<ol>
<li><a href="#checking-our-work">checking our work</a>
</li>
</ol>
</li>
<li><a href="#changes-to-existing-files">changes to existing files</a>
<ol>
<li><a href="#git-restore">git restore</a>
</li>
</ol>
</li>
<li><a href="#git-revert">git revert</a>
</li>
<li><a href="#git-remote">git remote</a>
<ol>
<li><a href="#git-fetch-(and-git-pull)">git fetch (and git pull)</a>
</li>
<li><a href="#git-push%2C-take-one">git push, take one</a>
</li>
<li><a href="#authentication">authentication</a>
</li>
<li><a href="#ssh-keys">SSH keys</a>
<ol>
<li><a href="#creation">creation</a>
</li>
<li><a href="#an-alias...">an alias...</a>
</li>
<li><a href="#and-a-function">and a function</a>
</li>
<li><a href="#ssh-keys-and-the-remote">SSH keys and the remote</a>
</li>
</ol>
</li>
<li><a href="#git-push%2C-take-two">git push, take two</a>
</li>
</ol>
</li>
<li><a href="#summary">summary</a>
</li>
</ol>
</nav>
</details>
</aside>
<p>alrighty, this one's a real doozy. Strap in.</p>
<h2 id="versioning">versioning</h2>
<p>have you ever tried to revert to a previous version of a document in MS Office or Google Docs and found that your revision history is cluttered with small changes that by all rights should be grouped into one set of edits, but they aren't, and it's tedious to pick through all the versions?</p>
<p>or, more uniquely and/or uncommonly:</p>
@@ -1939,12 +2097,12 @@ switch (currentThemeValue) {
<p>this walkthrough also focuses on the &quot;happy path,&quot; without much discussion of troubleshooting. I may write more on the topic in the future, but we're already over <em>4,500 words</em>, so we're calling it a day.</p>
<p>finally, I wrote this walkthrough primarily with knowledge from using <strong>WSL</strong> [more on this later] on <strong>Windows</strong> and with <strong>Zed</strong> as my text editor. While I've tried to cover my bases with other OSes and options, there's a solid chance I'm missing things!</p>
<p>that all said, let's get (git?) into it!</p>
<h2 id="what-is-git">what is <code>git</code>?</h2>
<h2 id="what-is-git%3F">what is <code>git</code>?</h2>
<p><code>git</code> is a <em>version control system</em>. We can use it to track changes we make to a set of files.</p>
<blockquote>
<p>tip: it's important to understand that despite the examples of MS Office and Google Docs above, <code>git</code> <em>isn't useful</em> with word documents. <code>git</code> shines with plain text files - .txt, .md, or basically any type of code.</p>
</blockquote>
<h3 id="where-can-i-use-git">where can I use <code>git</code>?</h3>
<h3 id="where-can-i-use-git%3F">where can I use <code>git</code>?</h3>
<p>many, many tools interact with <code>git</code>:</p>
<ul>
<li>a lot of modern text editors have graphical user interfaces (GUIs) that let you perform <code>git</code> operations, like <a href="https://code.visualstudio.com/docs/sourcecontrol/overview" target="_blank" rel="external">VSCode</a>, <a href="https://zed.dev/docs/git" target="_blank" rel="external">Zed</a>, or <a href="https://www.sublimetext.com/docs/git_integration.html" target="_blank" rel="external">Sublime Text</a></li>
@@ -1952,9 +2110,9 @@ switch (currentThemeValue) {
<li>and many <code>git</code> users use the <code>git</code> command line interface (CLI), which is fully text-based</li>
</ul>
<p>today we're going to talk about the <code>git</code> CLI... technically. But <strong>don't let that scare you</strong> - we'll talk about <em>concepts</em> and <em>actions</em> that can be applied to other <code>git</code> interfaces as well.</p>
<h4 id="what-is-a-cli">what is a CLI?</h4>
<h4 id="what-is-a-cli%3F">what is a CLI?</h4>
<p>a CLI a way to interact with your computer and with software in text-only form. Rather than using the mouse and clicking on things, you type in commands and see output.</p>
<h3 id="where-can-i-use-the-git-cli">where can I use the <code>git</code> CLI?</h3>
<h3 id="where-can-i-use-the-git-cli%3F">where can I use the <code>git</code> CLI?</h3>
<p>if you want to use the <code>git</code> CLI, you'll need a terminal. You've got a couple options here:</p>
<ul>
<li>on Linux or Mac, you should have one built in! This is the easy path, congrats :) Even better, <code>git</code> generally ships with these systems, so there's no installation required. Search for an application called 'Terminal' or similar
@@ -2069,7 +2227,7 @@ nothing to commit (create/copy files and use "git add" to track)</code></pre>
<p>let's dissect this.</p>
<h3 id="branch-main">branch main</h3>
<p><code>git</code> has a concept of <strong>branches</strong>, which are different paths our file history has taken. While branches are <em>incredibly</em> powerful, we're going to stay away from branches during this walkthrough and focus on working on a single branch - in this case, <code>main</code>.</p>
<h3 id="no-commits-nothing-to-commit">no commits / nothing to commit</h3>
<h3 id="no-commits-%2F-nothing-to-commit">no commits / nothing to commit</h3>
<p>&quot;no commits&quot; means that the project has no history whatsoever. &quot;Nothing to commit&quot; means we've made no changes. But what is a commit?</p>
<h2 id="commits-and-history">commits and history</h2>
<p>a <strong>commit</strong> is one set of changes made to our work. We get to choose which changes are part of any given commit, and we write a message describing the commit so that future-us knows what we did if for some reason we need to undo something.</p>
@@ -2177,13 +2335,13 @@ Date: Wed Jan 7 15:18:45 2026 -0800
<pre class="language-txt"><code class="language-txt">codeberg https://codeberg.org/inherentlee/git-intro.git (fetch)
codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
<p>cool! we have a remote set up. What does &quot;fetch&quot; and &quot;push&quot; mean?</p>
<h3 id="git-fetch-and-git-pull"><code>git fetch</code> (and <code>git pull</code>)</h3>
<h3 id="git-fetch-(and-git-pull)"><code>git fetch</code> (and <code>git pull</code>)</h3>
<p><code>git fetch</code> brings <strong>remote</strong> changes to our local machine. So does a command called <code>git pull</code>. Why are there two?</p>
<p><code>fetch</code> brings the remote changes down, but <em>doesn't combine them yet with our local work</em>. This gives us a chance to explore what those changes are before we actually integrate them into our work!</p>
<p>this may seem unhelpful if we're thinking about this project as something only we work on, but imagine there's a team of people all contributing to the project. What if we <em>and</em> another person both work on the same file? Our changes might overlap!</p>
<p>if we're working alone and <em>from one machine</em>, we'll pretty much never have to use <code>git fetch</code> or <code>git pull</code>! If we happen to do our work on multiple machines - for example, I do some work on my PC and some on my fruitpad (using an app called <a href="https://workingcopy.app/" target="_blank" rel="external">Working Copy</a>) - we'll probably update the remote from one machine, then need to pull that work down onto the other machine.</p>
<p>for our use case, we can pretty safely stick to <code>git pull</code> (if we ever even need to use it!), but if you're working in a larger collaborative project, <code>git fetch</code> is your friend!</p>
<h3 id="git-push-take-one"><code>git push</code>, take one</h3>
<h3 id="git-push%2C-take-one"><code>git push</code>, take one</h3>
<p><code>git push</code> is the opposite of <code>git pull</code> - it takes your local changes and adds them to the remote.</p>
<p>the first time we use it on any given branch, we'll want to set what's called the <strong>upstream</strong> - the remote branch that our local branch is connected to by default. We can do this with the following command:</p>
<pre class="language-sh"><code class="language-sh"><span class="token function">git</span> push --set-upstream codeberg main
@@ -2212,7 +2370,7 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
<p>running <code>ssh-keygen</code> will take us through a series of prompts. Assuming we don't already have an SSH key, the default file location is fine.</p>
<p>when you choose a passphrase, <em>write it down</em>. If you lose it, there is no recourse. You will have to generate a new SSH key.</p>
<p>after generation, we will have two files at the location specified by the tool (or the custom location we chose). Generally, that's the folder <code>.ssh</code> in our home directory. If we navigate to that directory (<code>cd $HOME/.ssh</code>) and look at the files (<code>ls</code>), we'll see files named <code>id_rsa</code> and <code>id_rsa.pub</code>. The one that ends with <code>.pub</code> is the <em>public</em> key.</p>
<h4 id="an-alias">an alias...</h4>
<h4 id="an-alias...">an alias...</h4>
<p>time for a little more terminal knowledge!</p>
<p>I have two handy pieces of tooling in my terminal that I use for SSH operations.</p>
<p>the first one is an <em>alias</em> - basically a simple shortcut for a command. I've written an alias for outputting my public key so that when I need it, I can get it without having to write out the path to the key. Laziness is a virtue, okay?</p>
@@ -2241,7 +2399,7 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
<pre class="language-sh"><code class="language-sh"><span class="token function">git</span> remote set-url codeberg <span class="token operator">&lt;</span>new-url<span class="token operator">></span></code></pre>
<p>we'll notice that the SSH URL starts with <code>git@</code>, whereas the HTTPS URL started with <code>https://</code>.</p>
<p>in order for all this to be useful, we need to tell Codeberg about our SSH key. In Codeberg, navigate to <a href="https://codeberg.org/user/settings/keys" target="_blank" rel="external">settings, then find the left-hand tab for SSH keys</a>. Choose 'Add key' and paste in the <strong>public</strong> key (if you set up that <code>sshcat</code> alias, use it now to output your key for ease of copying). Save and we'll now be set up to authenticate with SSH!</p>
<h3 id="git-push-take-two"><code>git push</code>, take two</h3>
<h3 id="git-push%2C-take-two"><code>git push</code>, take two</h3>
<p>we can now call <code>git push</code> again and again now without having to repeat our credentials every time. We can also call <code>git pull</code> for our private repositories.</p>
<h2 id="summary">summary</h2>
<p>let's talk about what we've done.</p>
@@ -2260,6 +2418,7 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
</ol>
<p>congratulations, and welcome to <code>git</code>!</p>
</article>
@@ -2297,26 +2456,28 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
<section class="related-posts">
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility </h2>
<a class="postlink" href="/designing-a-bag/">
<h2 data-ha-exclude="">designing a bag </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>software</li>
</ul>
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don&#39;t slide out." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
<li class="post">
<a class="postlink" href="/my-favorite-git-flag/">
<h2 data-ha-exclude="" id="my-favorite-git-flag">my favorite git flag </h2>
<h2 data-ha-exclude="">my favorite git flag </h2>
<ul class="postlist-tags">
@@ -2329,15 +2490,15 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
</li>
<li class="post">
<a class="postlink" href="/eleventy-lessons/">
<h2 data-ha-exclude="" id="eleventy-lessons">eleventy lessons </h2>
<a class="postlink" href="/screen-reader-optimizations/">
<h2 data-ha-exclude="">screen reader optimizations </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/hellebore.jpg" alt="Image unrelated to post. Close up on a pale green hellebore flower." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/crow.jpg" alt="Image unrelated to post. A crow poses on driftwood against a whitish sky." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -2394,6 +2555,6 @@ codeberg https://codeberg.org/inherentlee/git-intro.git (push)</code></pre>
</footer>
<!-- This page `/an-intro-to-git/` was built on 2026-09-20T00:40:39.763Z -->
<!-- This page `/an-intro-to-git/` was built on 2026-09-20T22:08:14.587Z -->
</body>
</html>