Are you looking for a tutorial that will help you to understand on how git works? I create a simple git tutorial just for you!
Setting up your Environment
- Pick the text editor of your choice : You can use Visual Studio Code, Brackets, Sublime or Atom
- Choose your Browser : Personally, I preferred Chrome as my web browser and you can choose Mozilla Firefox, Microsoft Edge or Brave. I use Chrome as my default web browser.
- Command line shell : Familiarity with the command-line shell is needed. A cmd window or power shell with admin rights would be required on Windows. A terminal window can be used on a Mac or in Linux. Please learn how to use the "sudo" command in both OS X and Linux.
Now let's try to learn Git!
Setting up Git
Download and Install Git
To install Git on your computer, go to https://git-scm.com/downloads to download the Git installer for your specific computing platform.
Then, follow the installation steps as you install Git using the installer.
You can find more details about installing Git at https://git-scm.com/book/en/v2/Getting-Started-Installing-Git. This document lists several ways of installing Git on various platforms.
Installing some of the GUI tools like GitHub Desktop will also install Git on your computer.
On a Mac, setting up XCode command-line tools also will set up Git on your computer.
You can choose any of the methods that is most convenient for you.
Configuration on Git
- Open a cmd window or terminal on your computer.
- Check to make sure that Git is installed and available on the command line, by typing the following at the command prompt:
git --version
To configure your user name to be used by Git, type the following at the prompt:
git config --global user.name "Your Name"
To configure your email to be used by Git, type the following at the prompt:
git config --global user.email <your email address>
You can check your default Git global configuration, you can type the following at the prompt:
git config --list
Basic Git Commands
- At a convenient location on your computer, create a folder named git-test.
- Open this git-test folder in your favorite editor.
- Add a file named index.html to this folder, and add the following HTML code to this file:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>This is a Header</h1>
</body>
</html>
Initializing the folder as a Git repository
Go to the git-test folder in your cmd window/terminal and type the following at the prompt to initialize the folder as a Git repository:
git init
Checking your Git repository status
Type the following at the prompt to check your Git repository's status:
git status
Adding files to the staging area
- To add files to the staging area of your Git repository, type:
git add .
Commiting to the Git repository
- To commit the current staging area to your Git repository, type:
git commit -m "first commit"
Checking the log of Git commits
- To check the log of the commits to your Git repository, type
git log --oneline
- Now, modify the index.html file as follows:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>This is a Header</h1>
<p>This is a paragraph</p>
</body>
</html>
- Add a sub-folder named templates to your git-test folder, and then add a file named test.html to the templates folder. Then set the contents of this file to be the same as the index.html file above.
- Then check the status and add all the files to the staging area.
- Then do the second commit to your repository
- Now, modify the index.html file as follows:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>This is a Header</h1>
<p>This is a paragraph</p>
<p>This is a second paragraph</p>
</body>
</html>
- Now add the modified index.html file to the staging area and then do a third commit.
Checking out a file from an earlier commit
- To check out the index.html from the second commit, find the number of the second commit using the git log, and then type the following at the prompt:
git checkout <second commit's number> index.html
Resetting the Git repository
- To discard the effect of the previous operation and restore index.html to its state at the end of the third commit, type:
git reset HEAD index.html
- Then type the following at the prompt:
git checkout -- index.html
- You can also use git reset to reset the staging area to the last commit without disturbing the working directory.
Here are some useful commands that may help you and try!
Pushing a new commit
git checkout -b <branch-name>
git init
git status
git add <specify path to commit files>
git commit -m "<commit message>"
git push origin <remote-branch>
git diff
git log --oneline
Applying commit on an exisiting branch
git fetch
git pull origin <master-branch>
git status
git add <specify path to commit files>
git commit -m "solved git conflicts"
git push origin <branch-name>
For Remote Branch deletion
git push --delete origin your-trash-branch
For Creating New Branch
cd existing_repo
git remote add origin git_url_of_your_repository
git branch -M branch_name_here
git push -uf origin branch_name_here
For Merge Conflicts
npm run prod
git commit
ctrl + c
:qa
git push
Now that you understand the basics of git commands. You can try to git and push your code in your own repository. If you have suggestions and comments. Feel free to comment down below. Happy coding!
credits to : Front-End Web UI Frameworks and Tools: Bootstrap 4
Top comments (0)