|
| 1 | +# Git Merge Conflict |
| 2 | + |
| 3 | +In this exercise you will learn how to work with two branches that have "diverged". Branches diverge when one branch has a commit that doesn't exist in the other branch. In some cases, git can not merge them and you have a "merge conflict". |
| 4 | + |
| 5 | +Follow the instructions below to create a merge conflict and then learn how to solve the problem. |
| 6 | + |
| 7 | +> _Hint: There are many ways this exercise can cause problems if you don't follow the steps precisely. If you are confused at any time, ask a mentor for help._ |
| 8 | +
|
| 9 | +In [exercise 15](/week-2/15-git-merge) you created and merged a pull request to change the links to `orangered`. But your boss is still not happy. She wants to try a purple colour (`fuchsia`). |
| 10 | + |
| 11 | +First, make sure you are on the `master` branch: |
| 12 | + |
| 13 | +``` |
| 14 | +git checkout master |
| 15 | +git branch |
| 16 | +``` |
| 17 | + |
| 18 | +You should see the following printed to the terminal, which tells you that you are currently on the `master` branch: |
| 19 | + |
| 20 | +``` |
| 21 | + green_links |
| 22 | +* master |
| 23 | + orange_links |
| 24 | + red_links |
| 25 | +``` |
| 26 | + |
| 27 | +Create a new branch for changing the link colour to `fuchsia`: |
| 28 | + |
| 29 | +``` |
| 30 | +git checkout -b purple_links |
| 31 | +``` |
| 32 | + |
| 33 | +Now edit the `style.css` file and change the colour of the links in your messages to `fuchsia`. Check to see if the links have changed to a purple colour. If they have, then add and commit your changes. |
| 34 | + |
| 35 | +Before you can show your boss the purple colour, she calls you into her office. Customers of your messaging service are complaining about the orange links. Some say it is too bright and hard to read. She wants you to put aside your work on the purple links and set the links back to the original colour (`#4491db`) in the `master` branch immediately. |
| 36 | + |
| 37 | +Make sure you are on the `master` branch: |
| 38 | + |
| 39 | +``` |
| 40 | +git checkout master |
| 41 | +``` |
| 42 | + |
| 43 | +> _Hint: Run `git branch` in the terminal to make sure you're on the correct branch._ |
| 44 | +
|
| 45 | +Edit the `style.css` file and change the colour of the links in your messages to `#ff00ea`. Check to see if the links have changed to a purple colour. If they have, then add and commit your changes. |
| 46 | + |
| 47 | +Phew! You have restored the blue links and customers have stopped complaining. The next day your boss decides she wants to launch the purple links. You can do this by merging your `purple_links` branch into master. |
| 48 | + |
| 49 | +In [exercise 15](/week-2/15-git-merge) you merged a branch into `master` using GitHub. This time we'll do the same thing on the command line. |
| 50 | + |
| 51 | +Check out the `master` branch: |
| 52 | + |
| 53 | +``` |
| 54 | +git checkout master |
| 55 | +``` |
| 56 | + |
| 57 | +> _Hint: Don't forget to run `git branch` in the terminal to make sure you're on the correct branch._ |
| 58 | +
|
| 59 | +Now you can merge the `purple_links` branch into `master` with the following command: |
| 60 | + |
| 61 | +``` |
| 62 | +git merge purple_links |
| 63 | +``` |
| 64 | + |
| 65 | +When you try to do this, you will get a message telling you that there is a merge conflict. |
| 66 | + |
| 67 | +``` |
| 68 | +Auto-merging week-3/20-git-conflict/styles.css |
| 69 | +CONFLICT (content): Merge conflict in week-3/20-git-conflict/styles.css |
| 70 | +Automatic merge failed; fix conflicts and then commit the result. |
| 71 | +``` |
| 72 | + |
| 73 | +This tells you that there is a merge conflict in the file `week-3/20-git-conflict/styles.css`. If you open the file you will find that lines have been added to the file. |
| 74 | + |
| 75 | +``` |
| 76 | +/* Add your own CSS code below */ |
| 77 | +.link { |
| 78 | +<<<<<<< HEAD |
| 79 | + color: #4491db; |
| 80 | +======= |
| 81 | + color: fuchsia; |
| 82 | +>>>>>>> purple_links |
| 83 | + font-weight: 700; |
| 84 | + text-decoration: none; |
| 85 | +} |
| 86 | +``` |
| 87 | + |
| 88 | +Why did this happen? When git tried to merge the `purple_links` branch into `master` it found two commits: the commit where you changed the links to blue and the commit where you changed the links to purple. |
| 89 | + |
| 90 | +Since these commits change the same line of code, git doesn't know which one is correct. You have to tell it the correct code. To do this, edit the file to remove the added lines and the blue colour property, so that only the purple colour remains: |
| 91 | + |
| 92 | +``` |
| 93 | +/* Add your own CSS code below */ |
| 94 | +.link { |
| 95 | + color: fuchsia; |
| 96 | + font-weight: 700; |
| 97 | + text-decoration: none; |
| 98 | +} |
| 99 | +``` |
| 100 | + |
| 101 | +Test the changes in your browser. If the links have been changed to a purple colour, you've resolved the merge conflict. Now you need to add and commit the files to complete the merge. Run the following commands: |
| 102 | + |
| 103 | +``` |
| 104 | +git add week-3/20-git-conflict/styles.css |
| 105 | +git commit -m "Merge purple_links branch" |
| 106 | +``` |
| 107 | + |
| 108 | +Way to go! You've now resolved a merge conflict. Merge conflicts are one of the most challenging things you will deal with. If you made it through, give yourself a pat on the back. |
0 commit comments