Just Enough Git: The Commit Dance

Feb 02, 2023

Welcome back! Last time, we got set up. If you haven’t already, you should work through Just Enough Git: Setup first. Git is a little bit of an odd beast; it does complicated things, so by nature, it’s challenging to build a mental model of what it’s doing. Fortunately, you don’t need to fully understand Git to get a massive benefit from it. We’re only going to go over the bare minimum here.

A Brief Vocabulary Lesson

Git
Git is a command-line program that we use in Terminal. It specializes in version control and helps us collaborate, experiment, and move our code to other computers.

Repository
A repository or “repo” is where your code lives. To you, it looks like a regular folder on your computer, but it has an incredible memory and is great at organization.

One repo can be copied to many different computers, including GitHub, and Git can resolve the differences between them. The copy of the repo on your computer is “local,” and copies on other computers are “remote.”

To make a local copy of a remote repository, you “clone” it to your computer.

Commits
Commits are batches of changes that are grouped together and identified by a “message” – a short description of what changed. For a file to be included in a commit, it must be “staged.”

Merging
Merging is how Git incorporates the changes you committed – adding them to the repo's history.

Pushing & Pulling
To incorporate your changes into a remote repo, you “push” your changes to it. To receive changes from a remote repository, you “pull” from it.

There is much more to learn about Git, but these basics are all you need to work by yourself. We’ll cover more in future lessons.

Can we do something already?

Yes. Yes, we can. In our setup, we signed up for a GitHub account and installed GitHub’s CLI (or Command Line Interface). We will use this lovely piece of software to take all the effort out of creating our first repo. Crack open Terminal and LFG!

First, navigate to where you’ll keep your repo. I keep all of my code projects in a directory called “Projects.” If you want to see how to do that, revisit Just Enough Terminal.

cd Projects

Ok. We will set up a “dwc-playground” repo to hone our skills. Let’s get this kicked off by running the following in Terminal:

gh repo create

☝️This uses the GitHub CLI to create a new repo. You’ll be prompted to answer a few questions. Here’s how to proceed:

Q: What would you like to do?
A: Create a new repository
Q: Repository name
A: dwc-playground
Q: Repository owner
A: Your username
Q: Description
A: A playground for learning how to design with code
Q: Visibility
A: Public if you want others to be able to see it or Private if you don’t – it’s up to you!
Q: Would you like to add a README file?
A: N
Q: Would you like to add a .gitignore?
A: N
Q: Would you like to add a license?
A: N
Q: This will create “dwc-playground” as a public repository on GitHub. Continue?
A: Y
Q: Clone the new repository locally?
A: Y

And you’re done!

Now change directory into your new repository like so:

cd dwc-playground

You should notice something new on your command line git:(main). This is a little helper that tells us that we’re in a Git repo and what branch we’re on. We’ll get into branches more in the future.

Back in Terminal, let’s use the GitHub CLI to see our remote repo:

gh browse

☝️When you run this, your browser should open, revealing something like this:

This is your repo. It’s empty right now, but this is a huge deal! Let’s pop an HTML file in there and make our first commit. In Terminal again…

touch index.html

☝️ This makes a new HTML file. Now open it up in VS Code and add the following code to the index.html file and save it:

<html>
  <head>
    <title>Design With Code: Playground</title>
  </head>
  <body>
    <h1>Hello world!</h1>
  </body>
</html>

Just something simple to get us going. Let’s get this change committed! In Terminal:

git status

☝️ This is a command to see what’s going on with our Git repo. Your Terminal should look something like this:

Helpfully, it tells us what we need to do. You can add files individually, but we can take a shortcut and add all of our files simultaneously. This is what I do 90% of the time: