Skip to content

Instantly share code, notes, and snippets.

@cy-park
Last active June 6, 2017 15:19
Show Gist options
  • Save cy-park/4a583c6db95db50e4db3 to your computer and use it in GitHub Desktop.
Save cy-park/4a583c6db95db50e4db3 to your computer and use it in GitHub Desktop.
Essential Git commands for web designers

Essential Git commands for web designers

Git is an open source version control system. Git is often considered as a software only for programmers and developers, however, it is very useful for web designers as well. If you are a UX/UI designer who can use Git, it would be much easier for you to work with developers. In addition, they will love you.

This is an article for essential Git commands that I use very often. I will not cover the basic concept of it here. Instead, I will list up essential and useful Git commands that I use very often to save your time to look up those commands.

I assume you are using git hosting services such as Github or Bitbucket, and able to use git commands through terminal.

1. Setup local and remote Git repository

If you use git hosting services, it is usual to establish two repositories; I call them local repository and remote repository, respectively. Local repository is the one established on your local machine. Remote is the one that lives on the hosting service such as Github. You will keep backing up your code by syncing your remote repository with your local one.

The first thing to do is to initialize the local repository. Go to your source root directory and initialize Git with the command below:

$ git init

It will create essential files and directories to use Git. If you look up files with ls -la command, you will find hidden .git directory has been created.

Next, you will need to create a remote repository. I write this article with a Github example, but any Git hosting service should work the same. Check this Github article to create a remote repository at Github. If you successfully create one, you will have a repository URL like this: https://github.com/cy-park/test.git

2. Link local repository to remote Git repository

The next step is to link the local repository with the remote one. It can be done with the command below:

$ git remote add origin [remote repository URL]

If we use the example remote repository URL above, the entire syntax will be as below:

$ git remote add origin https://github.com/cy-park/test.git

You will be asked to input password if there is any. Now your local repository is linked to the remote repository. All you need to do from now is to keep syncing local repository to the remote repository. By default, the local and remote repositories are called 'origin' and 'master' respectively.1

3. Check current status

$ git status

Before committing(saving) your code to the local repository, try git status command. You will find a bunch of files listed as untracked files. git status shows all new or modified files to be committed.

4. Register files to local Git repository file index

$ git add [filename]

Frequently used as git add * or git add * --all

This command is to register files to the local Git repository file index. By doing this, the local Git repository will track files you indicate. Usually git add is used with wildcard such as git add * to register all untracked files to the local repository index. If --all option is added, it will remove deleted files from the index. By default, Git does not exclude deleted files from tracking.

5. See code difference

$ git diff [filename]

With git diff command, you can see the difference between the last committed version and the current code.

6. Save current code to local Git repository

$ git commit

Frequently used as:

$ git commit -m "[comment for current commit]"

git commit saves all the source files that are registered to index to the local repository. You can see the commit history with git log command.

7. Sync remote repository with local repository

$ git push origin master

git push command pushes the local repository source code to the remote repository. You will be asked to enter the remote repository's ID and password if necessary. If you have different branch names other than origin or master, you can replace those accordingly.2

This is the basic steps of using Git for version controls. I believe these steps at least will keep your code safe as they will be stored in the repository even though you do not know how to restore. I will cover advanced skills in later articles.

Dangerous Tip 1: Remove a commit

== This action could occur serious problems in the end. Use it with your own risk. For more detail information, check this Stackoverflow thread. ==

  • Remove master push only

      $ git push -f origin HEAD^:master
    

This command removes push from master only. The local repository will stay intact.

  • Remove the latest local commit

      $ git reset --soft HEAD^
    

HEAD^ or HEAD^1 means the first parent of the tip of the current branch. For more information, see this Stackoverflow thread.

After resetting the local commit, you can force-update master with git push origin +master command.

Dangerous Tip 2: Resolve twisted Git issue

== This action could occur serious problems in the end. Use it with your own risk. ==

When Git push sequence is twisted, what you will want to do is to rebase the current branch and add your upstream code on top of it. Here are the steps for it:

  • Step 1: Stash the upstream code

      $ git add .
      $ git stash save
    
  • Step 2: Restore the latest commit from master

      $ git -r (or git --rebase)
    
  • Step 3: Apply the upstream code

      $ git stash pop (or git stash apply)
    
  • Step 4: Push to master

      $ git push origin master
    

Footnotes

1: Actually this is not an accurate explanation as 'origin' or 'master' is the name of the branch of each repository. However, it makes sense until we use only one branch on each repository. I will not cover branch in this article.

2: I do not cover branch in this article. See footnote 1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment