10 minute read
Up and Running With Git and GitHub
Getting started using git can seem a bit daunting at first. Trust me; I have been there. When I started coding in 1996, I didn’t know that version control was a thing—even though I was doing it. Now, by doing it, I mean saving my
index.html as such;
index2.html—lol. I even saved all the
.txt files. Oh, how times have changed. Anyhow, today we are lucky enough to have a great solution to track our versions and changes.
So what is git? Git is a distributed version control system to help track changes and manage code. Great, what is GitHub? GitHub is a cloud storage provider that allows you to host and maintain code in a public forum. But only if your repos are public.
Follow along with me as I walk through getting up to speed using git and GitHub.
There are three different scenarios that come to mind when learning git and GitHub. These are things that you will probably be doing at some point in your career. They are as follows:
- Working on your own projects
- Committing code to your organization’s repo(s)
- Contributing code to an open-source project
All three of those situations require varying levels of knowledge in terms of using git and GitHub. Before we break any of that down, if you are using the terminal or CLI (command line interface) to learn git, you should know some introductory Linux commands to set things up.
Introductory Linux Commands
You will most likely want to set up a folder if you are creating files from scratch. You might be running npx, npm, or yarn to scaffold out your project. All of these things are done in the terminal you are working in. Below are some intro commands and what they mean:
pwd (print working directory) – lets you know where you are on the system
clear – clears out the terminal if it gets too cluttered
mkdir (make directory) – creates a folder inside any current directory or location
touch – creates a file inside any terminal or directory
cd (change directory) – moves you forward or backward depending on where you are in your system
ls – lists files and folders in the current directory
Great! Now we have a basic understanding of some Linux commands to get us started working in the terminal. Let’s move on to working with git.
You have an idea for a project you want to start, in any language. We know one thing about that project: It is something awesome, and you want to start tracking it. You also want to push it to GitHub. So you can use it in your arsenal when the time comes to show it off to a potential employer. We need to get git setup on our machine first. Go to https://git-scm.com/ and download the latest release for your operating system (I am on a Mac). At the time of this writing, it will be 2.39.2.
Once that is downloaded, go through the install steps. Keep the defaults for now and everything should go smoothly. After git is set up, we can move on to getting our project set up.
In this example, I am going to be showing a project with a js folder and file, css folder and file, and an
index.html file. Your mileage may vary.
Here I am using the tree command to show the structure of the git-intro directory. To install
tree on a Mac, you need to have brew installed.
Perfect, we have our structure set up with the folders and files we need. If we want to start tracking these artifacts, we need to have git initialized in the directory. In order to do that, we run
Above, you can see that you will get a prompt to change the name of the branch to main. It would be wise to make that chance using
git branch -m main. Now we are ready to start making changes to our files.
Adding and Tracking Our Changes
We can start adding some code to our files and learn a bit more about some git commands to help us along the way. Below I have scaffolded out a project in the
index.html file, added some styles to the CSS file, and wrote a
console.log statement in the JS for simplicity.
The following screenshots will all be inside VS Code and the integrated terminal.
We are going to run git status to see if anything is being tracked yet. Git status is the most important command to run. I run git status after everything I do just to make sure I don’t make any mistakes. As a result, I can visually see where I am in the process from adding to pushing changes.
Git is telling us a few different things here after running git status. We are on the main branch, there are no commits yet or code that is ready to be moved to the next level. It is telling us that we have untracked files and folders and that we need to run git add in order to start tracking the changes. So let’s do that.
git add, we are telling git to start tracking changes on any of the files in these directories including the root directory. Running
git status checks your work.
One thing to be sure of is that you are in the root directory of the project when doing anything git-related. If not, you might only add a file or a directory and the rest of the project will be untracked.
If you want to “unstage” the files, you can run git
rm –cached <file> to stop tracking.
Let’s say we make a change to a file; we have to add it back to staging in order to track it.
If we change a file as we did with
index.html, it has to be added to the working directory in order to be tracked, so we run git add
index.html again. Once we do that, the
index.html file will move back into the working directory to be tracked and eventually committed.
I think we are ready to throw this up on GitHub before we go too far and have too many things that are untracked/tracked. We want to make an initial commit to get it up and running inside GitHub. You can commit locally, but the changes will be stored locally and nowhere else.
Let’s go over to https://github.com/ and create a repo. If you haven’t created an account yet, be sure to do that first. For these GitHub examples, I will be using my account. When you are on your profile, you will see a “+” sign in the top right corner. If you click on that, you will be presented with a dropdown with some options. You want to click on “New repository.”
Clicking on “New repository” will bring you to a page that looks like the one below. This page is where you can set up a remote repo—a cloud code storage—on GitHub. What is on GitHub is not the same as what you have locally. Not until you push your changes up from your local repo, or pull down changes from GitHub to your local repo. Using GitHub is a two-way street.
Give your repo a name, something memorable. Leave “Public” selected unless you really want to make your repo private, which you most likely won’t need to do. You can add a README if you want, but at this point, it isn’t necessary. You also don’t have to add a gitignore or license at this point. Once you are done, click “Create repository.”
Since we have an existing repo ready to be pushed up to GitHub, we can copy and paste these commands in our terminal, sans the branch name change since we did that already. But first, there is one very important git command we need to run:
Running Git Commit
We added files and folders to be tracked, and we have our repo ready and set up on GitHub. Now the only thing we have left to do is commit and push our changes, right? That’s right. Let’s go back to our terminal and run
git commit on all the files and folders, then run
git status to see where we are at.
There are a couple of other things you see here that follow the
git commit command. Make sure to add a
-m with a message in quotes after the commit command. This is a message flag with your message on what the commit is. If not, git will throw you into the default editor on your machine. That default editor could be vim, neo, etc. If you aren’t familiar with either of those, exiting out of them can be a pain in itself. Never forget the “-m.”
Most of what is in the output you really don’t need to know. It is saying that three files have changed and are committed and ready to be pushed. Let’s push them up to GitHub.
We did it! Nice, we have all our code pushed up to GitHub on the main branch. Now, if you go back to GitHub, you will see that the repo you created now has files and folders and is in sync with your local repo.
As we can see, getting set up with git and GitHub doesn’t have to be painful. With a bit of knowledge of Linux commands and a handful of intro git commands, we can get the code we are working on locally to a remote location in GitHub.
In the following posts, I will take us through how to get started working in an environment, and working on an open-source project. I will cover more in-depth topics like forking, cloning, branching, pull requests, and squashing and merging code!
Want to Dive Deeper?
For additional education and relevant content, be sure to check out the following articles:
- 4 Considerations When Integrating Systems Using APIs
- A Guide to APIs: REST, SOAP, GraphQL, and gRPC
- Kubernetes Labels: Best Practices
Deliver Features That Matter, Faster with Split.
Split is a feature management platform that attributes insightful data to everything you release. Whether your team is looking to test in production, perform gradual rollouts, or experiment with new features–Split ensures your efforts are safe, visible, and highly impactful. What a Release. Get going with a free account today, Schedule a demo to learn more, or contact us for further questions and support.