Git and GitHub
Keep track of your code
From an early age, it is instilled into us that we must always
command-S every chance we get, so that we don't lose precious work. But what if we want to work on two versions of a project simultaneously? Or we're working with 4 other people, all on the same file? Or 100 people? The need for version control is great, and Git is our savior.
A long time ago, I told you to set up git and register for GitHub, so if you haven't already, do so now! You'll need them to get through the lesson; instead of going through content and then doing a mini-project at the end, this will be a little more interactive.
Mac users, open your terminals; Windows users, open Command Prompt. Let's get to it!
Before we start looking at Git, let's make sure we have enough knowledge about our terminal to be able to move around folders and files.
If you're a Mac user, in your terminal, type
pwd and press enter. This is the first of several commands we'll cover, and it shows you exactly where you are in your terminal. That's why the command is called
pwd: it stands for Print Working Directory.
Windows users won't have to worry about
pwd, because Command Prompt will always show your complete location.
If you're ever confused or want to learn more about a specific command, just run
man [command] on Macs, or
HELP [command] on Windows. For example, you can type
man ls and you'll see more information than you'd ever want to know about
ls! On Macs, you'll have to press
q in order to exit the manual view.
Once you've figured out what directory you're in inside your terminal, run
dir on Windows). You'll see a list of all the files and folders inside your current directory.
Now that you can see all your files and folders, we'll talk about navigating between folders. If you've just run
dir, you'll be able to see a bunch of folders, like Documents and Downloads. Try running
cd Documents now. This will bring you into the Documents folder, and you can
dir to see how poorly organized your Documents folder is.
To get back to where you were, type
.. always stands for the parent directory, and
. always stands for the current directory.
We'll cover one more command, and it's actually a command we'll install ourselves! For Mac users, run the following command (don't worry about understanding it):
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" ~/bin/subl
For Windows users, follow this tutorial.
Now, we'll be able to open files with Sublime right from the command line! Just type
subl [filename] to do so. If you type
subl ., Sublime will automatically open all files in your current folder. Super userful!
OK, now we're ready to get started with git!
First, login to GitHub and create a new repository. Name the repository [username].github.io, make it public, and check the box that says “Initialize this repository with a README”.
Once you've created the repository (repo for short), GitHub will take you to the repo's freshly created page. Find the box on the page that contains a link; it should look like this:
Copy the link, then open your terminal, navigate to a folder where you're comfortable keeping coding projects, and run the following command:
git clone [link-you-copied]
This will copy the repository and all its contents onto your computer, and it'll create a new folder inside whatever folder you ran
git clone from.
You can do this with any project on GitHub, whether or not it belongs to you. People who use GitHub to store their projects are participating in open source development, so that everyone can contribute to everyone else's projects. Now you're entering into that world!
While you should still be saving your work habitually, Git enables you to create certain checkpoints. Whenever you feel that you've completed a task, solved a problem, or you just want to save the work that you've done as a complete unit, you make a Git commit.
There are a couple of different steps to doing this. First, let's get our repository to a state that's ready to be committed. Right now, if you
dir inside the directory you just cloned, there should only be one file: README.md. Let's fix that by adding an
index.html! You can either reuse your HTML from our assignments or create something new, but it doesn't matter as long as you save it in your
Now, try running the following command:
git status. Your terminal will respond with some information; importantly, it tells us that we have “untracked files”. Don't worry about the other information for now.
git status is a really important command, because it shows us what Git thinks the current state of the repository is. It's a powerful debugging tool, and also helps us understand what other git commands are actually doing behind the scenes.
Let's run another command:
git add index.html. Now, if we run
git status again, we'll see that we no longer have any untracked files; instead, we have a section called “Changes to be committed”, and it tells us that Git is now aware of a new file called
index.html is now staged to be committed.
You can stage all of the files in a directory by running
git add -A.
So what does it mean for a file to be staged to be committed? It means that if we run
git commit, our changes will be included in that commit, which, like I mentioned before, is essentially a checkpoint for our repo. Let's do this now by running
git commit -m "Create index.html". Whenever you make a commit, you include a commit message that explains the changes you've made, and it goes inside quotes after
If you run
git log, you'll see the entire history of your repository. Now that you've committed something, the log will contain two commits: the initial commit, made on GitHub, and your own commit, “Create index.html”.
So far, all of these commands have only been relevant to our local work. But the magic of Git is that it makes it really easy to share your code with other people and store it in one centralized location. Run
git push origin master and watch the magic unfold! It'll print some garbage, like
Delta compression using up to 4 threads, but what's important is that it gets your remote repository (i.e., GitHub's version) up to the same point as your local repo. The GitHub page for your repo will reflect the changes you've made.
These commands are all you need to maintain a repo on your own. You should develop a consistent workflow with Git, and it should look something like this:
- Do some good work.
git add: Most of the time, you'll use
git add -A, but you can specify individual files if need be.
git commit -m "Extra informative commit message"
git push origin master
- Repeat steps 1–4 until code is perfect
There's another command that will be helpful to you as you start to work with bigger and bigger files and projects. Running
git diff will show the differences between the lines of code in your currently saved files and the code from your most recent commit. If you ever spend more than an hour working on something, you'll probably find yourself wondering what's actually changed and how it's changed before you want to
git add anything. This is a great way to ensure that you're only committing exactly the code you want to commit.
This lesson is a little shorter, but there's still a lot of technical language to learn!
- A version control system developed by Linus Torvalds in 2005.
- version control
- Software that makes it easy to organize and control revisions.
- A program you can run from the command line. You should be familiar with
- Repository (repo)
- A folder that contains a project that's tracked by Git.
- A platform that hosts Git projects and facilitates open source collaboration.
- Describes changes that are ready to be committed.
git addstages your changes.
- A savepoint in Git history.
- A version of a Git project that is hosted on an outside network. GitHub contains the remote version of your username.github.io repo.
- Git commands to be familiar with:
git status: current state of the git repo
git add: stage files for being committed
git commit: save all staged files into a definitive savepoint
git log: shows commit history
git push: pushes local commits to remote
git diff: shows difference between repo and most recent commit
In your browser, go to
[username].github.io: surprise! GitHub hosts a free website for all of its users, because they are an amazing company. If you're interested in customizing your domain name, we'll talk about it in the next section.
This marks the end of our curriculum. I hope you've enjoyed it! I spent a really long time trying to make it as good as I could, but I know there are a million things that could be better. If you have any feedback at all, open a GitHub issue or DM me or email me or find me and talk to me in real life.
Thank you so much for reading this far! I really mean it.
If you are still thirsting for more knowledge and more stuff to do, don't worry: I'm on the same page. There's one more page full of extra things to learn about that will make you an even better web developer.