A Beginner's Git Guide with Shopify - Part 2: States, SSH keys and Reverting Commits

A Beginner's Git Guide with Shopify - Part 2: States, SSH keys and Reverting Commits

git guide 2This is part two of a three part beginner’s guide to Git with Shopify. Check out part one, which covers installing Git, adding files, and making your first commit.

In part one of this series, I introduced you to how to use Git with Shopify themes. I explained the importance of Git, how to install it, and covered the process of making your first commit.

This article will focus on more Git concepts that help developers take advantage of its power. We’ll take a look at states, SSH keys, and how to revert a commit. Because Git has so many powerful features, I’ve chosen to dive into the ones I think most beginners will use, and need to understand in order to successfully work with teams.

You might also like: The 20 Best Visual Studio Code Extensions for Front End Developers.

States

Git Part 2: Commit snapshot versions

Many other version control systems just track changes to files over time. The key difference with Git is that it tracks data more like a series of snapshots of the entire file system.

With Git, each commit is like saving the state of your project — think of it like a snapshot of what all your files look like at that given moment. This becomes particularly impactful when you take advantage of branching, which we’ll talk about later.

The way Git tracks these changes is by assigning a special 40-character string called a SHA-1 hash. For each snapshot or save point via commit with Git, there is a unique SHA-1 hash associated with it. It looks something like this:

50ea6db1ca231aeca198bedf249d91deccf74411

To see the SHA-1 hash for your commits, simply type the following into the terminal in the project directory you are tracking with Git already:

git log

git guide 2: git logYou should see a list of commits, with their SHA-1 hash, author, date, and commit message. You can type q to exit the list of commits, which is opened inside a pager program in the command line (which makes the commits scrollable).

When using Git, it’s important to understand the difference between tracked and untracked files.

Tracked — Tracked files are those that were in your last commit or snapshot. Git is aware that they exist, and is following any changes that might be made to them.

Untracked — Untracked files are those that are not being tracked by Git. Often, these are new files that have been added, but we haven’t told Git that we want to track them. You can have Git track these files and set their state to staging by using git add <filename>.

You’ll always need to add new files for Git to track, before you can make a commit that includes those files being added to the repository.

There are three states in Git for tracked files. These include:

Modified — Modified files are those that have been modified, but not committed to your database yet (saved in Git history).

Staged — Staged files are modified files that you’ve marked in their current incarnation to go into your next commit.

Committed — Committed means that the data has already been stored in your local database (or already committed using git commit).

Git Part 2: File states

SSH keys

The next important thing to understand when using Git regularly is SSH keys.

So what is an SSH key? An SSH key serves as a means of identifying yourself to an SSH server, using something called public-key authentication. What this means is instead of having to type in a username and password each time we want to access a server (ie. GitHub), we can authenticate using a special key-pair. Essentially, what we’re doing is creating a way to login to a specific server, without using a password because that server will be able to identify your computer.

Let’s set up an SSH key with GitHub so there’s no need to type in our username and password each time we want to push changes we make locally.

1. Generate your RSA key pair.

Generating an RSA key pair provides you with two long strings of characters: something called a public and a private key. What we then do is place the public key on any server (in this case it will be GitHub), and then unlock it by connecting to it with a client (our computer) that already has the private key.

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

Where the 4096 refers to a 4096 algorithm, which is recommended by GitHub when setting up SSH keys. Make sure to replace your_email@example.com with the email address you used to sign-up for GitHub, and that it matches the email you set Git to use globally on your computer.

2. Store keys and passphrase.

Once you’ve typed in the previous command, you’ll be asked where you want to store the keys.

Enter file in which to save the key (/Users/tiffanytse/.ssh/id_rsa):

Next, you’ll be asked if you want to set a passphrase. For extra security you can use a passphrase, but I would say most people don’t bother to enter one, just because you’ll need to type it every time you use your key pair. To skip entering a passphrase, just hit return on your keyboard when it prompts you for one.

Enter passphrase (empty for no passphrase):

Your public and private key will live wherever you’ve chosen to save them on your computer. Usually this is in a hidden .ssh folder as id_rsa.pub for your public key, and id_rsa for your private one.

3. Copy your SSH public key.

From your terminal, you should be able to type the following to copy your public SSH key to the clipboard:

pbcopy < ~/.ssh/id_rsa.pub

The ~ should take you to the root folder of your user (when I generated my SSH key on a Mac, you saw it was saved inside Users/tiffanytse — the ~ brings me to the same directory).

4. Add your SSH public key to GitHub.

Then go to GitHub, and click onyour profile photo> Settings > SSH and GPG keys > New SSH key / Add SSH key.

git guide 2: add ssh

In the Title field, add a description that will help you identify which machine the new key is for. For example, if you're using a work Macbook Pro, you might call this key "Work MacBook Pro."

Then, paste your key into the Key field using cmd v on a Mac or ctrl v on a PC, and click Add SSH key. If you’re prompted to, confirm your GitHub password and you’re all set!

Now you should be able to push commits from your local machine to GitHub, without having to type your GitHub username and GitHub password every time! Just make sure to start a new terminal or GitBash session for it to take effect.

GitHub Desktop

If you’re using GitHub Desktop, there’s no need to setup your SSH key. This is because logging into the app with your GitHub account with authenticate you automatically.

Revert commits and stepping back in time

So what happens if you make a mistake and need to go back in time? Well we can easily revert a commit, or set of commits, and step back in time. The reason why it’s helpful to commit early and often, is if you do make a mistake, it’s a lot easier to revert to a specific point in time. It’s like stepping back to a previous version, but at a much more granular level. And this is also why descriptive commit messages should always be used; so you know what changed between commits if you do need to go back in time.

Revert undoes the changes that the related commit hashes introduce (for which you specify in your revert), and then you record new commits that keep track of those changes. In other words, when you perform a revert, you never overwrite your history, you are simply changing your code back to a snapshot in your history, then making a new commit. Your working history is preserved, with bad commits intact, in case you do need them later.

Note: To perform a git revert you need to have a clean working tree. This means there cannot be any modifications to your code that need to be committed or staged.

Scenario:  I made a few commits, and broke my theme, and now I want to go back to three commits prior.

1. Run git log.

First, you’ll want to run git log and copy the commit hash for the commit you want to step back to. Type:

git log

And then copy the appropriate commit hash for the commit you want to step back to (the 40 character alpha-numeric string associated with the specific commit).

2. Perform git revert.

Next run the following command, replacing the commit hash with the one you’ve already copied.

git revert --no-commit b407bcdc17f34cd4f4d5cc792bae4ef5e2819462..HEAD

In the example above, the --no-commit flag allows for you to git revert all the commits at once without being prompted for a message for each commit in the range. This removes a bit of clutter from your history with potentially unnecessary new commits if you’ve selected more than one commit to revert. The b407bcdc17f34cd4f4d5cc792bae4ef5e2819462..HEAD part of this command tells Git that you want to step back to a specific hash from the most up-to-date position (which is the HEAD).

There are several other ways you can select which commits to revert. Plus you can still pass the --no-commit flag, using these different options. For example:

To create three separate revert commits:

git revert a867b4af 25eee4ca 0766c053

Git will take ranges, to revert the last two commits:

git revert HEAD~2..HEAD

To revert a range of commits using just commit hashes:

git revert a867b4af..0766c053

3. Make a commit for your revert.

To make sure we keep track of our changes, we need to make a commit to our repository that records the revert we just performed. Run the following command to commit your revert changes:

git commit -m “Revert changes that broke the thing”

Make sure to replace the commit message with something descriptive of what you reverted, what was broken in the code, or even as specific as the commit hashes you reverted.

It’s important to note that when searching online for git revert, you’ll probably find examples that show how to use reset and --hard to reset, erase history, or specific commits. I highly recommend not taking these approaches because you’re essentially sidestepping the entire point of Git when you erase your history.

4. Push your changes to GitHub

Once you’ve made the revert, you want to make sure you sync your changes with your remote repository on GitHub. Should anything ever happen to your laptop, or you need to access your code from another computer, having your changes synced with GitHub is imperative.

git push

Assuming you’ve setup your SSH keys already, and a remote for your repository, you can simply type the previous command, and watch your changes sync (with your reverts) to GitHub!

You might also like: A Beginner's Guide to Sass with Shopify — Part 1: Getting Started With Sass.

GitHub Desktop

git guide 2: github desktopIf you’re using GitHub Desktop, simply click on the History tab of the left hand panel, and right click on the commit you wish to revert to. Select Revert this commit, and a new commit will be created reverting back to the one you specified.

You’re on your way to becoming a Git pro! 🚀

By using SSH keys, understanding file state, and how reverts work, you’re well on your way to becoming proficient with Git! Already you can probably see how much more accurate commit messages are rather than using the versioning dates from the code editor in the Shopify Admin.

Stay tuned next week for part three of this beginner’s guide to Git with Shopify, where we’ll cover branching, conflicts, and workflow tips for Git and Shopify!

Further Reading:

Is it your first time using Git? Tell us what you want to learn more about in the comments below!

About the Author

Tiffany is a Front End Developer Advocate Lead at Shopify. She specializes in front end development, user experience design, accessibility, and is passionate about inspiring young designers and developers. Previously, she was an Ottawa Chapter Lead for Ladies Learning Code and worked as a Front End Developer for Partnerships at Shopify.

Grow your business with the Shopify Partner Program

Learn more