Photo by Simon Berger on Unsplash

Getting Started with Git: Part 2

Now that we have a Git project setup, we can get started on our work! Git brings a host of advantages when working on a project. Some of the advantages that we’ll go through in this post is safely saving your work, modifying your work without fear and storing our repo on GitHub. We’ll start by adding a few files to our project and exploring all that Git can do along the way!

You can use Git for virtually any project, from writing a book to creating a game. For our purposes though, I’m going to create a simple website.

Let’s start off by creating a web page, in any editor you like. Here’s what my page looks like:

Truly a work of art. Now that we’re done with this first draft, let’s add it into Git. But first, let’s see what Git sees. We do this by using the command git status

As you can see, Git sees that we’ve created a new file, index.html, but it doesn't really care about it right now. Let's change that, by adding this file.

index.html is now staged in our Git repo. Staged means that Git knows about the file and it's contents. However, it's not permanent in the repository yet. To do so, we will need to commit to the changes that we've made. We can do this, with the aptly named command, git commit.

These two steps, adding and commiting are steps that you'll use most often when working with Git. Now, you might be thinking "This seems like a lot of steps, don't you have anything easier?" Luckily, this is such a common thing in Git that they have made a shortcut for us: git commit -am 'your message here'. This will both add and commit the changes, however only if you've already added those files earlier.

Now, that we have some work in our Git repo, let’s see the power of Git.

Branching

I’m very impressed with my awesome website, but I want to experiment with it. Normally, if you weren’t using Git, you would probably make a copy of your website, and name it something like website-working-copy. That seems okay for now, but then I would make another copy for some other changes website-working-real, and eventually I'd end up with something like website-working-really-real-copy-trust-me.

That’s not healthy. I would get so lost in the copies that it would be impossible to know what changed. This is where Git comes to the rescue. We can use a feature of Git, called branches, to work on a separate version of our project without modifying the main version, until we’re ready of course.

Let’s continue with our example. I like my website, but I’d like to experiment with different color and style. So, I’m going to work on a branch to see how it looks.

The git checkout -b branch-name command lets me create a new branch from my current branch, master. Now, all the change I do on here will only affect this branch and not master. If I ever want to switch between branches, I can use the command git checkout branch-name (without the -b). For example, I can switch to the master branch with git checkout master and back to the styling branch with git checkout styling.

I’ve added some awesome new styling to my branch, and my index.html now looks like this:

I’m satisfied with this, so I’ll commit these changes. Let’s use the handy command we learned a bit earlier.

In fact, I like this change so much that I want to bring in this change to my main branch.

Git lets you do this very easily with the merge command.

Merging

Once we are ready for our branch to be a part of the main project, we can merge in that branch to our master branch. To do so, we have to first be in the branch where we want the changes, in our case master.

Then, we can merge in our changes from our styling branch.

It’s as easy as that. Now your changes in the styling branch have been merged into the master branch!

GitHub

If you’re like me, you want to share what you’ve made with the rest of the world! Git is an awesome way to do that, and GitHub makes it super easy and convenient.

GitHub is a place for keeping a Git repository. You can have multiple repositories and other people can download a copy of your repository to work on as well.

I want to share my awesome website so that everyone can see how amazing it is. I also want others to be able to collaborate on it with me, so I’m going to push my repo onto GitHub.

Once you’ve created an account, you can create a new repository to get started.

Create a new repository in GitHub
Name your repository and select if you want it to be public or private

Note: Do not select to add any README file, .gitignore or license for now. We already have an existing repository so we don’t want to create conflicts.

Once you’ve created your repository, we want to track it and push our branch as well. We can do so like below, however make sure you replace https://github.com/shitalgiri/my-awesome-website.git with your own repo url!

Now, if you refresh your GitHub repo, you should see your files there! So cool!

Note the command we used to push our branch git push -u origin master. Once you make more changes to your repo, you can use git push origin master to push those changes into GitHub for the world (or your collaborators) to see.

Similarly, if someone else has pushed their changes to GitHub, you can use the command git pull origin master to pull their changes to your repository.

I hope you enjoy your journey with Git! It’s an awesome tool that will save you in many many situations. Stay tuned for more on this Git series.

A developer on a journey.