Git and GitHub: The Complete Guides - Chapter 6: GitHub Merging

In the previous chapters we talked about how to merge branches, how to solve merge conflicts using different methods, namely fast-forward and three-way merge and we also saw how we can change the base commit using Git Rebase.

Until now we have been working locally, but with what we already understand it is time to work on GitHub.

What we will cover here:

• Merge branches on GitHub
• Dealing with merge conflicts on GitHub

Merge branches on GitHub

We will be merging branches on GitHub. Let's login to our repository and recall what we have.

Firstly lets create a new branch, lets call it new-feature.

Now lets make two commits on the new-feature branch. We will be editing the style.css file.

After making the commits, our new-feature branch is two commits ahead of the master branch. Suppose we are happy with the changes, in order to merge them we can do the following.

1. First we switch to the master branch.

2. To the right of the screen you should see a green button that has 'compare and pull request', click on it.

We are taken to a new page. Lets dive into some key concepts.

1. To merge branches in GitHub we need to create a pull request. That is why we see the heading on top that says 'Open a pull request', below that you will see it says 'Create a new pull request by comparing changes across two branches'.

2. Below that we see the branches that are being compared, namely master and new-feature. We see a green check mark next to it that says 'Able to merge'. 'These branches can be automatically merged.' This means we don't have any merging conflicts.

3. Below that we can see two input fields, where we may insert some comments.

If you scroll down below you will see the two commits we made and below that we see where in the file we made those changes.

1. Everything is ready to create a pull request, to do this we click the green button that says 'create pull request'.

2. We are take to another page, where we see the name of the user who want to merge two commits into master from new-feature. Also down below we see it says 'This branch has no conflicts with the base branch'.

3. We are all good to go! lets click the green button that says 'merge pull request' and finally 'confirm merge'.

4. As you can see the pull request has successfully merged and closed, and now we can delete the branch. No worries, you all set, the new-feature branch can be safely deleted by clicking the 'delete branch' button.

Now when we check the commits history, we will see three new commits, the first two commits describe the changes made in the style.css file. The last commit says that we have merged the pull request from the new-feature branch.

This is the way we can mege branches on GitHub. In this case we were working on the repository from just one account.

In the real world, when you want to contribute to someone else's repository, then you might not have the permission to merge the branches, you need to send a pull request to the owner of the repository, who will check the changes and then merge the branches. More on this later...

For now lets see how we can deal with merge conflicts on GitHub.

Dealing with merge conflicts on GitHub

As it was the case on the local repository, sometimes we might have some merge conflicts on the remote repository as well. We will simulate a scenario to create a merge conflict and then show how to deal with the conflict.

Firstly lets create a new branch, lets call it demo-1.

Now lets make two commits on the demo-1 branch. We will be editing the script.js file.

After making the commits, our demo-1 branch is two commits ahead of the master branch. Suppose someone else is working on the master branch and is making a change on the same line of the script.js file and finally commit their changes.

Since we are still working on the demo-1 branch we have no idea that the script.js file has been edited on the master branch yet.

We are happy with the changes we made to the script.js file on the demo-1 branch and we are ready to merge them with the master branch.

To the right of the screen you should see a green button that has 'compare and pull request', click on it.

At first glance, you should already see the difference here, with the red colored text that says 'Can’t automatically merge', however next to it says 'Don’t worry, you can still create the pull request.'

We are facing a merge conflict, because we tried to edit the same line of code from two different branches. But despite this we can still create the pull request.

Lets update the input field and then click the 'create pull request' button. We are taken to the next page and it lets us know that 'This branch has conflicts that must be resolved'.

Below the message we see the files where the conflicts are occuring, in this case it is the script.js file and right next to it we see the button that says 'Resolve conflicts'. click the button.

We are then taken to a text editor enviroment, in here its the same as how it was when we ran into this problem locally, we are able to decide which code we want to keep.

Once we have decided, we can click the button 'mark as resolved', then click 'commit merge'.

We are all good to go! lets click the green button that says 'merge pull request' and finally 'confirm merge'.

As you can see the pull request has successfully merged and closed, and now we can delete the branch. No worries, you all set, the demo-1 branch can be safely deleted by clicking the 'delete branch' button

If we check the commits history we will see a couple of new commits that were automatically made during the process of merging.

This is how we can resolve merge conflicts on GitHub. Next we are going to discuss how to copy our remote repo on our GitHub account. How we can clone it to our local computer and how to contribute to someone else's repo.

Thanks you reading and enjoy the rest of your day...