Reverting Changes on GitHub! An Intro to reset, revert, and checkout

In the previous articles, you learned how to use `git add` and `git commit` to record file changes. However, mistakes are a part of development. It's common to think, "Oops, I committed the wrong file!" or "I want to go back to the previous version..."

The power of Git lies in its ability to undo these operational errors safely and easily. This article will gently explain the differences between three main commands for "undoing" changes—`git checkout`, `git reset`, and `git revert`—and their specific use cases in different situations. Once you master these, you no longer need to fear making mistakes!

The 3 "Undo" Commands: When to Use Which?

Git has several commands to revert changes, which can be confusing for beginners. First, let's briefly organize the role and use case for each.

git checkout: Use this when you want to revert changes in your working directory without having committed them. It's perfect for situations where you think, "I want to discard all changes to this file!"
git reset: Use this when you want to cancel a commit in your local repository that you haven't pushed yet. It's a powerful command that can make a commit "as if it never happened," but because it rewrites history, you should never use it on a remote repository that has been shared.
git revert: Use this when you want to undo a commit that has already been pushed and is public. Instead of deleting the commit, it creates a "new commit that undoes the changes of the specified commit." It's a safe way to correct history and is an essential command in team development.

You can think of the difference as `reset` being like "going back in a time machine and erasing the future (the commit)," whereas `revert` is like "publishing a new article to correct a past mistake."

In Practice! "Undo" Procedures for Different Scenarios

Now, let's look at how to use each command in specific scenarios.

Case 1: Discarding Changes in Progress Without Committing (`checkout`)

This is for when you've edited a file but decided, "I want to get rid of all these changes." It's the easiest way to revert changes that haven't been staged yet.

First, modify a file for practice. Then, when you check with `git status`, the file will be shown as "modified." To discard this change, run the following command.

git checkout -- [file_name]

For example, if you want to undo changes to `index.html`, it would look like this:

git checkout -- index.html

Running this command will completely revert the specified file to the state of the last commit. Warning: Changes discarded with this operation cannot be recovered!

Case 2: Undoing the Last Commit (Before Pushing) (`reset`)

This is for when you think, "I just committed, but it was a mistake!" and you haven't shared it with anyone yet (haven't pushed). There are several options for `reset`, but we'll introduce the most common ones.

First, check your commit history with `git log --oneline` to confirm that the commit you want to undo is at the top.

git log --oneline

Option 1: --soft (Undo the commit, but keep the changes)
Use this when you want to cancel only the last commit, but keep the changes from that commit in the staging area. It's useful for times like "I made a mistake in the commit message."

git reset --soft HEAD^

Option 2: --mixed (Undo the commit and the staging)
Use this when you want to cancel the last commit and move the changes back to the working directory. This is the default behavior of the `reset` command. It's useful for when you "forgot to add a file," allowing you to reset, then `add` and `commit` again.

git reset --mixed HEAD^

Option 3: --hard (Completely delete the commit and the changes)
Use this when you want to completely and permanently erase the last commit and its changes. This is a dangerous command as the changes to the files themselves cannot be undone, so use it with extreme caution.

git reset --hard HEAD^

HEAD^ refers to "the previous commit." If you want to go back two commits, you can specify `HEAD^^` or `HEAD~2`.

Case 3: Undoing a Commit That Has Already Been Pushed (`revert`)

When you're working in a team, deleting a commit that has already been pushed with `reset` will create inconsistencies with other people's history and can cause major confusion. Therefore, when undoing a public commit, always use `revert`.

`revert` automatically creates a "new commit" that undoes all the changes of the specified commit. It's a safe method that adds a new history to correct a mistake, rather than erasing history, making it essential for team development.

First, use `git log` to find the ID (hash) of the commit you want to revert.

git log

Copy the hash of the commit you want to revert (e.g., `1a2b3c4d`) and run the following command.

git revert 1a2b3c4d

When you run it, a commit message editor will open. If the default message is fine, you can just save and close it. This creates the "revert commit." Finally, `push` that commit to reflect the correction on the remote repository.

【Copy & Paste to Run】Practice HTML Sample

To practice Git operations, it's useful to have a file you can actually change. Save the following HTML code as `practice.html` or similar, and try using `add`, `commit`, `checkout`, `reset`, etc., on this file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Git Practice Page</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        .box { width: 200px; height: 200px; margin: 20px auto; border: 2px solid #333; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; }
        .box.red { background-color: #ffcccc; }
        .box.blue { background-color: #cceeff; }
        button { padding: 10px 20px; font-size: 1rem; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Practicing Git Operations</h1>
    <div id="colorBox" class="box">Text Here</div>
    <button id="changeColorBtn">Change Color</button>
    <script>
        const colorBox = document.getElementById('colorBox');
        const changeColorBtn = document.getElementById('changeColorBtn');
        changeColorBtn.addEventListener('click', () => {
            if (colorBox.classList.contains('red')) {
                colorBox.classList.remove('red');
                colorBox.classList.add('blue');
                colorBox.textContent = 'Changed to Blue!';
            } else {
                colorBox.classList.remove('blue');
                colorBox.classList.add('red');
                colorBox.textContent = 'Changed to Red!';
            }
        });
    </script>
</body>
</html>

Conclusion: Choose the Best Command for the Situation

Let's summarize simply when to use the three "undo" commands.

Discarding uncommitted changes → git checkout -- [file_name]
Undoing a local commit → git reset [option] HEAD^
Undoing a public commit → git revert [commit_id]

If you can master these three, you no longer have to be afraid of making mistakes in Git. Feel confident to write code and commit often!

To the Next Step 📖

You can now record and undo changes. But as you accumulate many changes, you'll want to look back and ask, "When did I add that feature?" In the next article, we'll learn the basic usage of the `git log` command, which clearly displays the history of commits.

Viewing History! Basic Operations to Check Commit History with git log