DEV Community

Cover image for GIT & GITHUB
Frank
Frank

Posted on • Updated on

GIT & GITHUB

GIT

Image description

I had a project I wanted to bring to life, and I told my friend about it. After thorough discussion and brainstorming, we decided to start the project. But distance was a barrier; my friend stays in another state. Communication was through text, phone calls, and video calls; we wanted something more than that. To be precise, we wanted to be able to write code together, i.e., be physically present. It was a drawback for us, and the project ended up being prolonged until we came across git after our research. With git, we figured out that we could seamlessly collaborate on our project, regardless of the physical distance between us. Both I and my friend could work on the project from different locations without being physically present. The feeling after we came across git was out of this world.

Image description

SO WHAT EXACTLY IS GIT ?

Git is like a super-powered notebook that keeps track of every change anyone makes to the project. It is a version control system that allows multiple people to work on the same project (collaborate) without interfering with each other. It tracks changes to files and coordinates work on those files among multiple people.

Let's say I have a super big notebook called BIGBOY, which you can download onto your PC. After downloading BIGBOY, I and my friends can each create and edit files within it. As we all work on your parts independently, BIGBOY keeps track of everyone's changes. When we're all done writing, I can then use some commands to merge everyone’s contributions together, ensuring that all the work is combined seamlessly without any conflicts.

  1. Repository (Repo):

Image description

Repository is one of the basic concept in learning git. You'll definitely come across manipulating one as you delve into git. A repo as it is widely called is a special type of directory/folder that includes version control features which contains all your project work, including the full history of all the change you made.
It can be local (on your computer) or remote (hosted on platforms like GitHub), not only does it contains file and folders but also tracks changes to these files over time. A repository includes metadata such as commit history, branches, and tags.

Difference between a repo and a directory
While both repositories and directories contain files, a repository has version control and collaboration features that a standard directory doesn't provide.
Repository:

  • A repository (often shortened to "repo") is also a place where files are stored, but it includes additional features provided by version control systems like Git.
  • Besides holding files, a repository tracks changes made to those files over time.
  • It can exist locally on your computer and remotely on platforms like GitHub.
  • A repository includes metadata (like commit history, branches, and tags) that a simple directory doesn't have.

Directory (or Folder):

  • A directory is a location on your computer where files are stored.
  • It organizes files hierarchically, allowing you to navigate through them.
  1. Commit: A snapshot of your repository at a specific point in time.
  2. Branch: A parallel version of a repository. The default branch name in Git is main or master.
  3. Merge: Combining changes from different branches into one.
  4. Clone: Creating a copy of an existing repository.

BASIC COMMANDS

Image description

Initializing a Repository:
git init
This command turns the directory into a Git repository.

Cloning a Repository:
git clone <repository-url>
This command creates a copy of an existing repository.

Checking Status:
git status
This command shows the status of changes as untracked, modified, or staged.

Adding Changes:
git add <file-name>
git add .
This command stages changes for the next commit. Using . stages all changes in the directory.

Committing Changes:
git commit -m "commit message"
This command commits the staged changes with a message describing what was done.

Pushing Changes:
git push origin <branch-name>
This command sends your committed changes to a remote repository.

Pulling Changes:
git pull origin <branch-name>
This command fetches and merges changes from the remote repository to your local repository.

Creating a Branch:
git branch <branch-name>
This command creates a new branch.

Switching Branches:
git checkout <branch-name>
This command switches to the specified branch.

Merging Branches:
git merge <branch-name>
This command merges the specified branch into the current branch.


Scenario: Building a Website

  • Initialization: Open git after you must have successfully installed it on you PC, you start by creating a new directory for your project and initialize it as a Git repository.

mkdir my_website
cd my_website
git init

You then create the initial structure for your website:

echo "<html><body><h1>Welcome to My Website</h1></body></html>" > index.html
git add index.html
git commit -m "Initial commit with index.html"

  • Collaborator Setup: You push this initial version to a remote repository (e.g., on GitHub).

git remote add origin https://github.com/yourusername/my_website.git
git push -u origin main

Your friend clones the repository to their local machine.

git clone https://github.com/yourusername/my_website.git

  • Feature Development: You decide to work on adding a navigation bar, while your friend works on a contact form. You create a new branch for your navigation bar feature.

git checkout -b add-navbar

Your friend creates a new branch for the contact form.

git checkout -b add-contact-form

  • Working Independently: You add the navigation bar in index.html and commit your changes.

echo "<nav><ul><li>Home</li><li>About</li><li>Contact</li></ul></nav>" > navbar.html
git add navbar.html
git commit -m "Add navigation bar"

Your friend adds the contact form and commits their changes.

echo "<form><input type='text' placeholder='Your Name'><button>Submit</button></form>" > contact.html
git add contact.html
git commit -m "Add contact form"

  • Pushing Changes: Both of you push your changes to the remote repository.

git push origin add-navbar
git push origin add-contact-form

  • Merging Changes:
    You create a pull request (PR) to merge your add-navbar branch into the main branch.
    Your friend reviews and merges the PR.
    Your friend also creates a PR to merge their add-contact-form branch into the main branch, which you review and merge.

  • Resolving Conflicts:
    Suppose there is a conflict because both changes affect the same lines in index.html.
    You pull the latest changes from the main branch and resolve the conflicts.

git checkout main
git pull origin main
git checkout add-navbar
git merge main

Git indicates the conflict, and you edit index.html to include both the navigation bar and the contact form. After resolving the conflict, you add and commit the changes.

git add index.html
git commit -m "Resolve merge conflict by including navbar and contact form"
Finally, you push the resolved branch and merge it.

git push origin add-navbar

  • Deployment: Once everything is merged into main, you both decide to deploy the website. You pull the latest changes from the main branch to ensure you have the updated code.

git pull origin main


Summary

This scenario illustrates how Git helps manage collaboration by allowing you to:

Work independently on different features using branches.
Push and pull changes to/from a remote repository.
Merge changes while resolving conflicts if they arise.
Maintain a clean and organized history of changes through commits and pull requests.


HOW GIT ACTUALLY WORKS?
Checkout out this video to understand how git works


You’ve made it to the end and gotten smarter by learning about Git. Now, try practicing what you’ve learned. Good luck!

If you enjoyed this journey and would like to show your support, here’s how you can:

  • Follow me on Medium for more insightful content.

  • Connect with me on X, LinkedIn, and GitHub, where I consistently share valuable programming resources for free.

Top comments (2)

Collapse
 
dev_frank profile image
Frank

Welcome to our most recent Git content! We explore the specifics of Git branching in this article. This guide intends to offer valuable insight and useful tips on branch creation, management, and merging—whether you're a beginner or seasoned developer.

We hope you find this content informative and helpful. Happy coding!

Collapse
 
ivan_okafor_6160194c9d649 profile image
Ivan Okafor

💯 Thanks so much for this