In this post we’re going to cover our first Git commands.
Making a Commit
Typically each project will have its own Git repository. You can tell a git repository exists by the hidden
.git/ directory in a project. Let’s make a demo project to mess around in, “initialize the Git repository” so we can use Git, and create a file to use.
There are several “states” of a commit.
- Unstaged: Git is not keeping track of the changes to these files. “Discarding” the file takes that file back to how it was at the last commit.
- Staged: this is the preparation step to commit changes to the history of the project.
- Committed: Changes have been recorded in the history of the project. I typically commit when I have a completed feature or have fixed a bug. After committing the cycle starts over.
- untracked: These are new files, or files that are not being kept track of by Git.
$ mkdir tutGit $ git init $ touch index.html #create a file however you want.
Now that a file is created, run
git status in your terminal to see the file is “untracked” meaning Git is not keeping track of it yet:
Next step is to have Git keep track of the file by running
git add . to start tracking ALL files in the directory, or run
git add index.html to only add the individual file to tracking.
git status again to see the file is ready to be committed:
If you like the changes you’ve made to the file (pretend that we have…) then it’s time to commit the changes to the Git history. run this command:
git commit -m "The start of a great project".
git log --oneline (–oneline just gets rid of fluff and is optional) to see the current state of your project being permanently etched into history.
Commits are useful for checkpoints. Any time you make some progress then make a commit so you can get back to it if you ever want to get back to this point in time.
time to add a button! Add this “code” to your index.html file and hit save:
Let's pretend this is a button.
Now that a file has been changed, run $ git status in the terminal to see what happened. You should see “changes not staged for commit” with your index.html file.
This means the new changes are “unstaged”. If we want to remove the changes from the file and get back to where this file was at our last commit, we can do that with
git restore index.html After running the restore command, look at the contents of the index.html file. The text we added is gone. Proceed with the following steps:
- add “this is a better button” to our index.html file.
git add .to add the new changes to that file to the staging area.
Now the changes to the file are in the staging area. Next time we run “git commit” the file as it is now will be added to the commit history. If we wanted to “undo” our changes we’d have to first remove the file from the staging area, and then discard those changes. Let’s try that.
git restore --staged index.html
git restore index.html
And now the file is gone!
The primary difference between staging and unstaged is that a staged file will be committed to history on the next commit. The unstaged file will not be committed.
If you ever get confused on what to do, just run git status and the terminal will usually tell you how to unstage / discard:
Let’s make our “best” button, and commit it to Github.
- add “This is the BEST button” to
git add index.html
git commit -m "added the best button"
git log --onelineto see your second commit written to history
Getting your code into Github
Github is basically Git but on the web. If someone breaks into your house and steals your computer and throws it into a lake then all your code will be at the bottom of a lake and you’ll never get it back. If you pushed your code to Github, GitLab or BitBucket you can just download it from the internet on a shiny new computer.
Create a Github repository (Go to github.com and click the “new” button”
Create a name for your repository and then click “Create Repository”.
Once you click “Create Repository” You’ll get a set of instructions. Just type those commands into your command line and you’re good to go. If you already have a commit then run the bottom section. $ git remote add is what creates the connection between your local computer and Github. $ git push -u origin master pushes the code up from your computer to the internet! Note: The password they ask for is the same password you use to login to github.
Once you’ve pushed your code refresh the page and you’ll see all your code stored in the web.
That’s all for this post. Check out all our Git tutorials here.