Hello everyone! When it comes to writing code, I am sure we all have had that moment where we finished up something in a project and decided to jump from a desktop to a laptop, and boom, we don’t have that project on the laptop! That is why they invented GitHub, the absolutely wonderful file-sharing, file-storing, and open-source version control system that we have all come to love. What? You don’t love it? Or worse? You don’t even know how to use it? Well, we need to fix that! We are about to add, commit, and push our way into how it works!
So, we are going to assume you know what version control is and what git is, and we are going to just dive into the add, push, and commit part of GitHub. So, when you are writing code and you don’t want to lose everything, the best thing to do is save it to a repository. A repository(repo) is like a container, a sort of box that will hold your data. not only does it hold your data, but it will also track changes to your data over time.
Now, we are going to assume you have a folder that you are working out of for a project; in our example, we are going to have a folder called gitPractice. As you can see with this screenshot, we have cd’d into this folder:
now, we have not yet initialized this as a git repository. to do that, we used the command
git init
after running this command, we should see it display a message telling you that it initialized an empty git repository; it will say something like this.
SyntaxJunkie:~/documents/practice/gitPractice $ git init
Initialized empty Git repository in C:/Documents/practice/gitPractice/.git/
So what this means is that we have created an empty git repository, and an initial branch without any commits has been created. We can run the command
git status
to check this, and what this does is it displays the state of the working directory and staging area, the staging area is basically a file in your Git directory that stores information about what will go into your next commit. now, our next steps are to go to GitHub and create a repo, which GitHub will look like this
Click on the plus symbol and then click the new repository button at the top of the dropdown. it will bring you to a page that will let you enter a description and other things. Here is how we fill it out
Repository Name: We can use a different name from the folder on our computer that we created, but I like to keep things consistent and use the same name for both, so for the Repository Name, we put “gitPractice”.
Description: This is optional, you can fill it in with what you want to describe your project.
Public, Private: this will be whether anyone else has access to your repository; for this, we can use public.
so the next couple of things are what you can initialize the repository with, such as a README, add a git ignore, or choose a license. We do not want to add a README right now and the rest can stay the same as well. So let’s click Create Repository!
The next page will look like this
So, they provide you with the steps we do next. We are going to walk through them to get the repository set up and ready, but this is a very handy feature that GitHub provides. But, next, we move back to the command line. what we want to do for this practice is just create a simple file; we will make an index.html so in your terminal run
touch index.html
if you type “ls” in your terminal, you should see this now
Now we have a file. let’s type “git status” again and see what it shows. We have something new!
What this shows is that it reads that we have a new file, we just have not tracked it yet, so to track it, we want to use the add option. first, we have
git add .
What this option means is that when we enter git add . it will stage all changes in the current directory, meaning everything, even subdirectories, that are included inside the directory. Next, we have
git add index.html
What this does is it stages just that file, it will not stage any other untracked file inside the directory. What this also means is if index.html is tracked already but has changes, it will stage those changes, and it will not stage the changes of any of the other tracked or untracked files in the directory. but here, we are going to use the git add . to stage our untracked file. so enter that into your command line, then run “git status” and you should see this
Now, we are ready to commit! To commit, we enter
git commit -m "Our first commit"
What this does is create a new commit inside of the repository, which includes the changes that are currently staged. It also includes a log message, which can be whatever message you want. It is good to keep it short and to describe the purpose of the commit. The -m is a flag that stands for message. After entering that into our command line, we should see this in our terminal
Now, this next step has two parts; the first part is that if you are just initializing the repo and pushing it to GitHub for the first time, then you have to run this command
git branch -M main
This means it renames the current branch to “main,” just in case it is called “master.” The next thing we would need to do is add a remote repository. The second page on your GitHub after you create your repository, add the name, and click create, the page with the directions, will have a command that looks like this
git remote add origin git@github.com:fullstackjunkie/gitPractice.git
What we want to do is grab that command and run it in your terminal. The “git remote add” part of this associates your local Git repository with a remote repository(the one we created). The word “origin” is the name or the alias for your remote repository. You can use any name you want, but it is convention to use origin. This part, “git@github.com:fullstackjunkie/gitPractice.git” is the URL of the remote repository. So, after we run this, your local Git repository will know about the remote repository. now for the final command
git push origin main
or
git push -u origin main
The difference between the two is with the first option, you will always have to use the full line, with the second option, the -u stands for upstream, and what that does is link your local branch to the remote branch, so any push after the first time you would only need to use “git push” instead of the entire “git push origin main.” So let’s enter it. Now, you should see this in your terminal after entering the command
Now if you go back to your GitHub page and click refresh in your browser, you will see your repository now has your index.html file in it. Now, any time after this first setup, you will just have to run the add, commit, and git push commands to update your GitHub repository. Remember to do it often. Also, there are many more features for Git; we will go over more in the future. For now, I hope you had fun and enjoyed the journey.
