Git and GitHub: Introduction to Advanced Feature
Git A distributed version control system (VCS) that tracks changes in your source code during development. GitHub: A cloud-based hosting platform for Git repositories with collaboration features like pull requests, issues, and CI/CD.
Introduction
Git
A distributed version control system (VCS) that tracks changes in your source code during development.
GitHub
A cloud-based hosting platform for Git repositories with collaboration features like pull requests, issues, and CI/CD.
Example
You can use Git locally on your laptop to track code changes. You use GitHub to collaborate with your team and share the code online.
Difference Between Git and GitHub
Version Control System (VCS) in Git
- Tracks every change made to files.
- Allows reverting, branching, and collaboration.
- Supports distributed teams.
Real time use
Roll back to a previous version when a new feature breaks the code.
Code Synchronization
- Sync changes between local repo and remote GitHub repo.
Key commands
- git push – local → remote
- git pull – remote → local
- git fetch – update metadata only
Use Case
Dev pushes code; tester pulls the latest feature branch to test.
Creating a Repository and Types:
- Local Repo: Created with git init
- Cloud Repo: Created on GitHub
- Cloning: git clone <repo_url> creates a local copy of a remote repo
Types of Repositories
- Public – Open source (e.g., libraries)
- Private – Company or personal projects
Git Commands (Basic to Advanced)
Basic
git init
git add .
git commit -m "initial commit"
git status
Intermediate
git branch
git checkout -b feature-branch
git merge main
git log
Advanced
git rebase
git cherry-pick <commit hash>
git stash – to save local changes temporarily when switching task
git revert
Staging and Unstaging Files (with Example)
Staging
git add file1.js - File is ready to be committed.
Unstaging
git restore --staged file1.js
Removed from the staging area but changes are preserved.
Use Case
Accidentally staged a config file — you can unstage it before commit.
Conventional Commits
The Conventional Commits specification is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with SemVer, by describing the features, fixes, and breaking changes made in commit messages.
The commit message should be structured as follows:
<type> [optional scope]: <description>
[optional body]
[optional footer(s)]
The commit contains the following structural elements, to communicate intent to the consumers of your library:
- fix: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in Semantic Versioning).
- feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in Semantic Versioning).
- BREAKING CHANGE: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in Semantic Versioning). A BREAKING CHANGE can be part of commits of any type.
- types other than fix: and feat: are allowed, for example @commitlint/config-conventional (based on the Angular convention) recommends build:, chore:, ci:, docs:, style:, refactor:, perf:, test:, and others.
- footers other than BREAKING CHANGE: <description> may be provided and follow a convention similar to git trailer format.
Additional types are not mandated by the Conventional Commits specification, and have no implicit effect in Semantic Versioning (unless they include a BREAKING CHANGE). A scope may be provided to a commit’s type, to provide additional contextual information and is contained within parenthesis, e.g., feat(parser): add ability to parse arrays.
Why Use Conventional Commits?
- Automatically generating CHANGELOGs.
- Automatically determining a semantic version bump (based on the types of commits landed).
- Communicating the nature of changes to teammates, the public, and other stakeholders.
- Triggering build and publish processes.
- Making it easier for people to contribute to your projects, by allowing them to explore a more structured commit history.
Examples
Commit message with description and breaking change footer
feat: allow provided config object to extend other configs
BREAKING CHANGE: `extends` key in config file is now used for extending other config files
Commit message with ! to draw attention to breaking change
feat!: send an email to the customer when a product is shipped
Commit message with scope and ! to draw attention to breaking change
feat(api)!: send an email to the customer when a product is shipped
Commit message with both ! and BREAKING CHANGE footer
chore!: drop support for Node 6
BREAKING CHANGE: use JavaScript features not available in Node 6
Commit message with no body
docs: correct spelling of CHANGELOG
Commit message with scope
feat(lang): add Polish language
Commit message with multi-paragraph body and multiple footers
fix: prevent racing of requests
Introduce a request id and a reference to latest request. Dismiss incoming responses other than from latest request.
Remove timeouts which were used to mitigate the racing issue but are obsolete now.
Reviewed-by: Z
Refs: #123
Branching and Merging
Branching
Create isolated environments (git branch feature-X)
Merging
Combine code from different branches (git merge feature-X into main)
Workflow Example
- main → production
- dev → integration
- feature/login → individual feature branch
Resolving Merge Conflicts
What is it?
Occurs when two branches have conflicting changes in the same file.
Steps
- Try git merge branch-name
- Git shows conflict markers <<<<<<< HEAD
- Manually fix the conflict in your editor
- Mark resolved:
git add conflicted-file.js
git commit -m "resolve merge conflict"
Real Case
Two developers update the same CSS file. Git can’t merge them automatically — requires manual fix.