diff --git a/docs/git/_category_.json b/docs/git/_category_.json new file mode 100644 index 0000000..0f39725 --- /dev/null +++ b/docs/git/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Git", + "position": 4, + "link": { + "type": "generated-index", + "description": "Learn React.js for building user interfaces, and learn how to use React.js with other technologies like Redux, Webpack, and ES6." + } + } \ No newline at end of file diff --git a/docs/git/advanced.mdx b/docs/git/advanced.mdx new file mode 100644 index 0000000..62d0eb0 --- /dev/null +++ b/docs/git/advanced.mdx @@ -0,0 +1,259 @@ +--- +title: "Advanced Git Concepts" +description: "Master advanced Git concepts including rebase, cherry-pick, tagging, submodules, squashing, and reflog to handle complex version control workflows like a pro." +tags: ["git advanced", "rebase", "cherry-pick", "git hooks", "submodules", "squash commits"] +keywords: ["advanced git tutorial", "git rebase", "git cherry pick", "git submodules", "git hooks", "git reflog"] +sidebar_position: 6 +--- + +Welcome to the **Advanced Git Concepts** tutorial — where you’ll move beyond basic commands and learn how professionals handle complex workflows, cleaner histories, and recovery techniques. By the end of this section, you'll confidently use commands like `rebase`, `cherry-pick`, `tag`, `reflog`, and more to manage any situation in Git. + +## 1. Rebasing — Cleaner Commit History + +**Rebase** helps you *rewrite commit history* by placing your commits on top of another branch’s latest changes. + +### Example: + +```bash +# Switch to your feature branch +git checkout feature-branch + +# Rebase it with the main branch +git rebase main +``` + +> Instead of merging (which creates an extra merge commit), rebasing keeps history linear — perfect for clean commit timelines. + +
+ +:::warning +Never rebase public branches that others are working on — it rewrites commit history. +::: + +## 2. Cherry-Picking Commits + +**Cherry-pick** allows you to *apply specific commits* from one branch to another without merging everything. + +### Example: + +```bash +# Copy a commit from another branch +git cherry-pick +``` + +Use this when you want to move a single fix or feature to another branch without merging unrelated changes. + +## 3. Tagging Versions (Releases) + +**Tags** are references that mark specific commits — often used for version releases. + +### Create a lightweight tag: + +```bash +git tag v1.0.0 +``` + +### Create an annotated tag: + +```bash +git tag -a v1.0.0 -m "Initial stable release" +``` + +### Push tags to remote: + +```bash +git push origin --tags +``` + +> Tags are ideal for marking milestones in projects or generating release versions on GitHub. + +## 4. Submodules — Managing Nested Repositories + +Submodules allow you to **embed one Git repository inside another** — useful for managing libraries or dependencies. + +### Example: + +```bash +# Add a submodule +git submodule add https://github.com/user/library.git lib/ + +# Initialize and update +git submodule init +git submodule update +``` + +> Use submodules when you need an external repository but want to control its version manually. + + +## 5. Squashing Commits + +**Squash** combines multiple commits into one — keeping your history neat and readable before merging. + +### Example (Interactive Rebase): + +```bash +git rebase -i HEAD~3 +``` + +This opens an editor — change `pick` to `squash` for the commits you want to merge. + +:::tip +Ideal for cleaning up “WIP” commits before submitting a pull request. +::: + +## 6. Git Hooks — Automate Actions + +**Git Hooks** are scripts that automatically run when certain Git events occur (like committing or pushing). + +### Example: + +* `.git/hooks/pre-commit` — runs before each commit. +* `.git/hooks/post-merge` — runs after a merge. + +You can use hooks to: + +* Run tests before committing +* Format code automatically +* Enforce commit message rules + +> Try tools like **Husky** to manage Git hooks in JavaScript projects easily. + +## 7. Reflog — Recover Lost Commits + +**Reflog** records every change to your HEAD — perfect for recovering commits after resets or mistakes. + +### Example: + +```bash +git reflog +``` + +Find the commit hash and restore it: + +```bash +git checkout +``` + +
+ +:::tip Lifesaver +Even if you accidentally delete branches or commits, `reflog` can bring them back. +::: + +## 8. Bisect — Debugging with Binary Search + +Use **`git bisect`** to find which commit introduced a bug. + +### Example: + +```bash +git bisect start +git bisect bad +git bisect good +``` + +Git checks out commits one by one until it identifies the problematic one. + +> Perfect for debugging large projects efficiently. + +## 9. Amend Last Commit + +Fix small mistakes (like typos or missed files) without creating a new commit. + +```bash +git add . +git commit --amend -m "Updated commit message" +``` + +> Keep commit history clean without unnecessary “fix” commits. + +## 10. Worktrees — Multiple Working Directories + +Worktrees allow you to work on multiple branches **simultaneously** without switching context. + +```bash +git worktree add ../feature feature-branch +``` + +Now you can work on `feature-branch` in another folder while keeping `main` active elsewhere. + +## Advanced Git Flow Tips + +| Technique | Use Case | +| --------------- | ------------------------------- | +| **Rebase** | Clean, linear history | +| **Cherry-pick** | Move specific commits | +| **Squash** | Combine multiple commits | +| **Hooks** | Automate tasks | +| **Reflog** | Recover deleted commits | +| **Worktree** | Manage multiple branches easily | + +## Example Workflow + +Here’s how professionals maintain a clean project history: + +1. Create feature branch + + ```bash + git checkout -b feature/login + ``` +2. Make several commits +3. Squash and rebase before merging + + ```bash + git rebase -i main + ``` +4. Push clean history to remote + + ```bash + git push origin feature/login + ``` + +:::tip Git Tips + +* Use **Git aliases** for faster workflows: + + ```bash + git config --global alias.st status + git config --global alias.co checkout + git config --global alias.br branch + git config --global alias.cm "commit -m" + ``` + +* Add color output for better readability: + + ```bash + git config --global color.ui auto + ``` + +* Use `git log --oneline --graph` to visualize your history beautifully. + +::: + +## Coming Next + +Now that you’ve mastered the advanced Git toolkit, move on to: 👉 [GitHub Actions — Automate Your Workflows](#) + +## 📚 Additional Resources + +* [Pro Git Book — Chapter 7: Advanced Git](https://git-scm.com/book/en/v2/Git-Tools-Advanced-Merging) +* [Git Documentation: Rebase](https://git-scm.com/docs/git-rebase) +* [Git Hooks Guide](https://git-scm.com/docs/githooks) +* [Git Submodules Explained](https://git-scm.com/book/en/v2/Git-Tools-Submodules) +* [Learn Git Branching (Advanced)](https://learngitbranching.js.org/?demo) + +### Summary + +| Concept | Description | +| --------------- | ------------------------------------------- | +| **Rebase** | Reapply commits for clean history. | +| **Cherry-pick** | Apply specific commits from another branch. | +| **Squash** | Combine multiple commits. | +| **Submodules** | Manage external repositories. | +| **Hooks** | Automate Git actions. | +| **Reflog** | Recover lost commits. | +| **Worktrees** | Work on multiple branches at once. | + +--- + +💙 *This tutorial is part of the CodeHarborHub Git & GitHub learning series — helping you build professional version control skills used in real-world development.* diff --git a/docs/git/basics.mdx b/docs/git/basics.mdx new file mode 100644 index 0000000..096c361 --- /dev/null +++ b/docs/git/basics.mdx @@ -0,0 +1,219 @@ +--- +title: "Git Basics: Create, Commit & Track Changes" +description: "Learn essential Git commands like init, add, commit, and log to start tracking your projects efficiently with Git." +tags: ["git basics", "git init", "git commit", "version control", "git tutorial"] +keywords: ["git basics", "git commands", "git add commit", "how to use git", "track changes git"] +sidebar_position: 2 +--- + +Welcome to **Part 2** of the **Git & GitHub Tutorial Series** by **CodeHarborHub**. Now that you understand what Git is, let’s dive into **practical commands** that help you start tracking and managing your project history. + +## 1. Create a New Repository + +A **repository (repo)** is like a project folder where Git tracks your files and changes. + +### Initialize a new repository + +```bash +git init +```` + +> This creates a hidden folder `.git/` inside your project directory that stores all Git data. + +:::tip +You only need to run this once per project. +::: + +## 2. Clone an Existing Repository + +If you want to work on an existing project hosted on GitHub or another server: + +```bash +git clone https://github.com/username/repo-name.git +``` + +This command downloads the entire project and its history. + +> Cloning = downloading the repo + linking it to the remote GitHub repository. + +## 3. Check Repository Status + +At any time, see which files have been changed or staged: + +```bash +git status +``` + +- 🟢 **Green** → files ready to commit (staged) +- 🔴 **Red** → files modified but not yet staged + +## 4. Add Changes to Staging Area + +Before committing, you must **stage** the files you want to include: + +```bash +git add filename +``` + +Or, to add all modified files: + +```bash +git add . +``` + +> Think of **staging** as preparing your changes for a “snapshot”. + +## 5. Commit Changes + +Once staged, you can **commit** your changes — a permanent snapshot in history. + +```bash +git commit -m "Add new feature or fix bug" +``` + +- Every commit has a **message** describing what changed. +- Use clear, meaningful commit messages. + +Example: + +```bash +git commit -m "Add homepage UI and update styles" +``` + +## 6. View Commit History + +To see your commit history: + +```bash +git log +``` + +This shows: + +* Commit ID (unique hash) +* Author name & email +* Date & time +* Commit message + +For a one-line summary: + +```bash +git log --oneline +``` + +> Each commit acts like a “save point” in your project timeline. + +--- + +## 7. Ignore Unwanted Files + +Use a `.gitignore` file to tell Git which files or folders to skip. + +Example `.gitignore`: + +``` +node_modules/ +.env +.DS_Store +dist/ +``` + +> This keeps your repository clean and free from temporary or sensitive files. + +## 8. Remove or Rename Files + +To delete a tracked file: + +```bash +git rm filename +``` + +To rename a file: + +```bash +git mv oldname newname +``` + +> After renaming or deleting, don’t forget to **commit** your changes. + +--- + +## 9. See File Differences + +Check what has changed before committing: + +```bash +git diff +``` + +After staging changes: + +```bash +git diff --staged +``` + +> Use this to review your modifications before finalizing them. + +## 10. Typical Workflow Example + +Here’s a simple end-to-end Git flow: + +```bash +# Step 1: Initialize Git +git init + +# Step 2: Check repo status +git status + +# Step 3: Add your files +git add . + +# Step 4: Commit your changes +git commit -m "Initial project setup" + +# Step 5: View history +git log --oneline +``` + +Done — your local Git repository is now tracking your project! + + +## 11. Understanding Git States + +| State | Description | +| ------------- | ------------------------------------------ | +| **Untracked** | File not yet tracked by Git. | +| **Modified** | File changed after the last commit. | +| **Staged** | File marked to be included in next commit. | +| **Committed** | Changes saved in local repository. | + +Visual representation: + +``` +Working Directory → git add → Staging Area → git commit → Repository +``` + +## Summary + +| Command | Description | +| --------------- | -------------------------------- | +| `git init` | Start a new Git repository | +| `git clone` | Copy an existing repository | +| `git status` | View current file states | +| `git add` | Stage changes for commit | +| `git commit -m` | Save snapshot with message | +| `git log` | Show commit history | +| `git diff` | Compare changes between versions | +| `.gitignore` | Ignore unwanted files | + +## Next Up + +Now that you’ve mastered the basics, it’s time to explore **branching and merging** — the power that makes Git truly flexible. 👉 [Next: Branching & Merging →](./branching-merging) + +## Additional Resources + +* [Pro Git Book — Chapter 2: Git Basics](https://git-scm.com/book/en/v2/Git-Basics-Getting-a-Git-Repository) +* [Git Reference Manual](https://git-scm.com/docs) +* [Atlassian Git Tutorials](https://www.atlassian.com/git/tutorials) + +💙 *This lesson is part of CodeHarborHub’s Git & GitHub series — empowering you to code, commit, and collaborate effectively.* diff --git a/docs/git/branching-merging.mdx b/docs/git/branching-merging.mdx new file mode 100644 index 0000000..597006a --- /dev/null +++ b/docs/git/branching-merging.mdx @@ -0,0 +1,217 @@ +--- +title: "Git Branching and Merging" +description: "Learn how to create, switch, merge, and manage branches in Git — the key to parallel development and teamwork." +tags: ["git", "branching", "merging", "version control", "tutorial"] +keywords: ["git branch", "git merge", "merge conflict", "git checkout", "feature branching"] +sidebar_position: 3 +--- + +Welcome to the **Branching & Merging** section of the **CodeHarborHub Git Tutorials**. Branching is one of Git’s most powerful features — allowing developers to experiment, fix bugs, and work on features **without affecting the main code**. + +--- + +## What is a Branch? + +A **branch** in Git is like a separate timeline of your project. Each branch lets you work independently from others — perfect for building new features or fixing bugs safely. + +> Think of branches as “parallel universes” for your code — you can switch between them anytime without disturbing the main project. + +## Default Branch + +When you create a new Git repository, Git automatically creates a **default branch** called: +- `master` (in older versions) or +- `main` (in newer repositories) + +You can rename it anytime using: + +```bash +git branch -M main +``` + +## Creating a New Branch + +Use this command to create a new branch: + +```bash +git branch feature-login +``` + +This creates a branch called **feature-login** but doesn’t switch to it yet. To both create and switch at once: + +```bash +git checkout -b feature-login +``` + +You’re now working inside your new branch! + +## Switching Between Branches + +To view all branches in your repository: + +```bash +git branch +``` + +To switch to another branch: + +```bash +git checkout main +``` + +In modern Git versions, you can also use: + +```bash +git switch main +``` + +## Merging Branches + +When your work in a branch is complete, you’ll want to **merge it back** into the main branch. + +### Steps: + +1. Switch to the branch you want to merge **into**: + + ```bash + git checkout main + ``` +2. Merge the feature branch: + + ```bash + git merge feature-login + ``` +3. If everything is fine, Git will perform a **fast-forward merge** (simple merge). + +## Merge Conflicts + +Sometimes, two branches modify the **same part of a file**, causing a **merge conflict**. Git will stop and ask you to resolve it manually. + +### Example Conflict Marker: + +```text +<<<<<<< HEAD +console.log("Hello from main branch"); +======= +console.log("Hello from feature branch"); +>>>>>>> feature-login +``` + +### Steps to Fix: + +1. Edit the file to keep the correct version. +2. Mark conflict as resolved: + + ```bash + git add + ``` +3. Complete the merge: + + ```bash + git commit + ``` + +Merge conflicts are normal — they simply mean collaboration needs coordination. + + +## Fast-Forward vs Recursive Merge + +| Merge Type | Description | +| ---------------------- | -------------------------------------------------------------------------------------------------- | +| **Fast-Forward Merge** | Happens when no new commits exist on the target branch; Git just moves the branch pointer forward. | +| **Recursive Merge** | Used when both branches have new commits — Git combines them together. | + +## Deleting Branches + +Once you’ve merged a feature branch, you can safely delete it: + +```bash +git branch -d feature-login +``` + +If you want to force-delete it (even if not merged yet): + +```bash +git branch -D feature-login +``` + + +## Viewing Branch History + +Use this to visualize your branches and merges: + +```bash +git log --oneline --graph --all +``` + +Example Output: + +```bash +* 9e15b3a Merge branch 'feature-login' +|\ +| * 9d0c5b1 Added login feature +* | 2f1e3f9 Updated README +|/ +* 4a8c7f2 Initial commit +``` + +## Best Practices for Branching + +* **Create branches per feature** — keeps code clean and isolated. +* **Use meaningful names** — e.g., `feature/signup-form` or `bugfix/navbar-alignment`. +* **Regularly pull from main** — keeps your branch up to date. +* **Delete merged branches** — avoids clutter. +* **Protect main branch** on GitHub to prevent accidental pushes. + + +## Team Workflow Example + +Here’s how most teams collaborate: + +```bash +# Developer A +git checkout -b feature-homepage +# works and commits changes + +# Developer B +git checkout -b feature-navbar +# works and commits changes + +# Both push branches +git push origin feature-homepage +git push origin feature-navbar + +# After review, merge them into main via Pull Request +``` + +## Useful Commands Summary + +| Command | Description | +| --------------------------- | ----------------------------- | +| `git branch` | List all branches | +| `git branch ` | Create a new branch | +| `git checkout ` | Switch to a branch | +| `git switch ` | Switch branch (modern syntax) | +| `git merge ` | Merge a branch into current | +| `git branch -d ` | Delete a branch | +| `git log --graph --oneline` | Visualize branch history | + +--- + +## Next Step + +Now that you’ve mastered branching and merging, move on to the next tutorial: 👉 [Working with Remote Repositories](./remotes) + +Here, you’ll learn how to push, pull, and collaborate using GitHub remotes. + +--- + +## Additional Resources + +* [Git Branch Documentation](https://git-scm.com/docs/git-branch) +* [Git Merge Documentation](https://git-scm.com/docs/git-merge) +* [Atlassian Git Branching Guide](https://www.atlassian.com/git/tutorials/using-branches) +* [Learn Git Branching (Interactive)](https://learngitbranching.js.org/) + +--- + +💙 *This tutorial is part of the CodeHarborHub Git & GitHub learning path — helping developers collaborate, experiment, and innovate with confidence.* \ No newline at end of file diff --git a/docs/git/introduction.mdx b/docs/git/introduction.mdx new file mode 100644 index 0000000..1fae5e7 --- /dev/null +++ b/docs/git/introduction.mdx @@ -0,0 +1,149 @@ +--- +title: "Introduction to Git & GitHub" +description: "Learn what Git and GitHub are, why they’re essential for developers, and how to get started with version control effectively." +tags: ["git", "github", "version control", "open source", "tutorial"] +keywords: ["what is git", "git tutorial", "github basics", "version control system", "git setup guide"] +sidebar_position: 1 +--- + +Welcome to the **Git & GitHub Tutorial Series** by **CodeHarborHub** — your ultimate guide to mastering version control and collaboration. Whether you’re a beginner or a developer looking to refine your workflow, this guide will help you understand how Git and GitHub work and how to use them efficiently. + +## What is Version Control? + +**Version Control** is a system that tracks changes to your project’s files over time. + +It allows developers to: + +- Save different versions of a project. +- Revert to previous states if needed. +- Collaborate with multiple people without conflicts. +- Keep track of who made what changes and when. + +> Imagine working on a big project with your team. Instead of sending updated files manually, Git handles all version tracking automatically — making teamwork seamless. + +## What is Git? + +**Git** is a **distributed version control system (DVCS)** created by **Linus Torvalds** (the creator of Linux) in 2005. It helps you **track, manage, and synchronize code changes locally and remotely**. + +### Key Features of Git +- **Version Tracking:** Keeps a full history of your project. +- **Branching & Merging:** Safely experiment without affecting main code. +- **Offline Work:** All operations can be done locally. +- **Distributed System:** Every developer has a full copy of the repository. + +## What is GitHub? + +**GitHub** is a **web-based platform** that hosts your Git repositories online. It adds collaboration features like **issues, pull requests, project boards, actions, and discussions** — making it the world’s largest community for developers and open-source projects. + +:::tip In Short +- **Git = Tool for version control** +- **GitHub = Platform to host and collaborate on Git repositories** +::: + +## Installing Git + +Before using Git, install it on your system. + +### Windows +1. Visit [git-scm.com/downloads](https://git-scm.com/downloads) +2. Download the Windows installer. +3. Follow the setup wizard (keep default settings). + +### macOS +```bash +brew install git +``` + +### Linux (Ubuntu/Debian) + +```bash +sudo apt install git +``` + +Once installed, verify: + +```bash +git --version +``` + +## First-Time Setup + +Before committing code, configure your Git identity: + +```bash +git config --global user.name "Your Name" +git config --global user.email "your.email@example.com" +``` + +To check your setup: + +```bash +git config --list +``` + +You’re now ready to start using Git! + +--- + +## Git Workflow Overview + +Git follows a **3-stage workflow**: + +| Stage | Description | +| --------------------- | ------------------------------------------------ | +| **Working Directory** | Where you make changes to files. | +| **Staging Area** | Where you prepare changes before saving them. | +| **Repository** | Where committed versions are stored permanently. | + +### Basic Flow: + +``` +git add → git commit → git push +``` + +--- + +## Git vs GitHub vs GitLab vs Bitbucket + +| Tool | Type | Description | +| ------------- | -------------------- | ---------------------------------------- | +| **Git** | Version Control Tool | Tracks code changes locally. | +| **GitHub** | Hosting Platform | Cloud service for Git repositories. | +| **GitLab** | Hosting + DevOps | Offers CI/CD pipelines & issue tracking. | +| **Bitbucket** | Hosting Platform | Git-based collaboration by Atlassian. | + + +## Why Developers Use Git & GitHub + +* Manage project versions effortlessly +* Collaborate with teams globally +* Securely backup and share code +* Learn from open-source projects +* Automate workflows with GitHub Actions +* Showcase your work with GitHub profile and portfolio + +--- + +## Coming Next + +Now that you know the basics, move on to the next part: 👉 [Git Basics — Create, Commit & Track Changes](./basics) + +## Additional Resources + +* [Official Git Documentation](https://git-scm.com/doc) +* [GitHub Guides](https://guides.github.com/) +* [Pro Git Book (Free)](https://git-scm.com/book/en/v2) +* [Learn Git Branching (Interactive)](https://learngitbranching.js.org/) + +### Summary + +| Concept | Description | +| ------------------- | ------------------------------------------------ | +| **Git** | Tool for tracking code changes. | +| **GitHub** | Platform for hosting and collaboration. | +| **Version Control** | Tracks project evolution and team changes. | +| **Setup Commands** | Configure Git username and email. | +| **Next Step** | Learn Git Basics and start committing your code! | + + +💙 *This tutorial is part of the CodeHarborHub Git & GitHub learning path — empowering developers to build, collaborate, and grow together.* \ No newline at end of file diff --git a/docs/git/quiz.mdx b/docs/git/quiz.mdx new file mode 100644 index 0000000..21861d5 --- /dev/null +++ b/docs/git/quiz.mdx @@ -0,0 +1,46 @@ +--- +title: "Git & GitHub Quiz" +description: "Test your Git and GitHub knowledge with interactive quizzes. Sharpen your skills with real-world questions designed for learners and developers." +slug: /tutorial/git/quiz +keywords: [git quiz, github quiz, git practice, codeharborhub quiz, version control] +sidebar_position: 7 +--- + +import GitQuiz from '@site/src/components/GitQuiz'; + +Welcome to the **Git & GitHub Quiz Zone!** Test your understanding of version control, collaboration, and repository management. + +This quiz includes **beginner to advanced** questions on: +- Git commands +- Branching & merging +- GitHub collaboration +- GitHub Actions +- Troubleshooting & best practices + + +## How It Works + +- Each question has **4 options**. +- Choose the correct one and get **instant feedback**. +- You can **retry** the quiz or **view your score** at the end. + +## Try It Out + + + +
+ +:::tip +Don’t worry if you make mistakes — you can retry as many times as you want! +The goal is to help you **learn Git & GitHub hands-on** while having fun. +::: + +## Next Steps +Once you complete this quiz: +- Explore the [Git Advanced Topics](/tutorial/git/advanced) +- Learn about [GitHub Actions](/tutorial/github/github-actions) +- Contribute to open source with [GitHub Collaboration](/tutorial/github/collaboration) + +:::tip +Try to get a perfect score to unlock your *Git Pro Badge* (coming soon!) +::: \ No newline at end of file diff --git a/docs/git/remotes.mdx b/docs/git/remotes.mdx new file mode 100644 index 0000000..2d9abad --- /dev/null +++ b/docs/git/remotes.mdx @@ -0,0 +1,210 @@ +--- +title: "Working with Remote Repo" +description: "Learn how to connect your local Git repository to GitHub, push and pull changes, manage remote URLs, and collaborate effectively with remote repositories." +tags: ["git", "github", "remote", "git push", "git pull", "version control"] +keywords: ["git remote", "git push", "git pull", "git fetch", "github repository", "connect git to github"] +sidebar_position: 4 +--- + +Once you’ve mastered local Git basics, the next step is connecting your work to a **remote repository** like **GitHub** — so others can collaborate, view your progress, and contribute. + +This guide explains how to **link local Git with GitHub**, **push and pull changes**, and **manage multiple remotes** efficiently. + +--- + +## What is a Remote Repository? + +A **remote repository** is a version of your project stored on the internet or another network. It allows multiple developers to collaborate on the same project without manually sharing files. + +> Simply put — a remote is like a “cloud backup” of your local repository that enables team collaboration. + +## The Git Remote Workflow + +The standard flow for remote collaboration: + +```bash +Local repo → Push changes → Remote repo (GitHub) +Remote repo → Pull updates → Local repo +``` + +This allows: +- Uploading your commits (`push`) +- Downloading others’ work (`pull` or `fetch`) +- Keeping repositories in sync + +## Adding a Remote Repository + +You can link your local repository to a remote GitHub repo using: + +```bash +git remote add origin https://github.com/username/repository.git +```` + +Here: + +* `remote add` → Creates a new remote connection +* `origin` → Default name for your main remote +* The URL → Points to your GitHub repository + +To verify: + +```bash +git remote -v +``` + +Output example: + +``` +origin https://github.com/username/repository.git (fetch) +origin https://github.com/username/repository.git (push) +``` + +## Pushing Changes to GitHub + +Once connected, push your local commits to the remote repository: + +```bash +git push -u origin main +``` + +* `origin` → The remote name +* `main` → Your current branch +* `-u` → Sets the default upstream branch (so future pushes only need `git push`) + +> After the first push, you can simply run `git push` next time. + +## Pulling Changes from Remote + +To update your local project with the latest changes from GitHub: + +```bash +git pull origin main +``` + +This command performs two actions: + +1. **Fetches** the latest data from the remote +2. **Merges** it into your current branch + +If there are conflicts, Git will notify you to resolve them before proceeding. + +## Fetch vs Pull — What’s the Difference? + +| Command | Description | Use Case | +| --------------- | ----------------------------------------------------------- | ------------------------------------------- | +| **`git fetch`** | Downloads remote changes but doesn’t merge them. | When you want to inspect updates first. | +| **`git pull`** | Downloads and merges remote changes into your local branch. | When you trust and want to update directly. | + +--- + +## Pushing & Pulling Step-by-Step Example + +```bash title="bash" +# Step 1: Clone an existing repo +git clone https://github.com/codeharborhub/example.git + +# Step 2: Create a new file +echo "Hello CodeHarborHub!" > hello.txt + +# Step 3: Add and commit +git add hello.txt +git commit -m "Add hello.txt" + +# Step 4: Push to remote +git push origin main + +# Step 5: Pull updates from team +git pull origin main +``` + +## Changing or Removing Remotes + +To change a remote’s URL: + +```bash +git remote set-url origin https://github.com/username/new-repo.git +``` + +To remove a remote: + +```bash +git remote remove origin +``` + +To rename a remote: + +```bash +git remote rename origin upstream +``` + +## Forking & Upstream Workflow + +When you **fork** a repository on GitHub, you create a copy under your account. +To stay updated with the original repo (called *upstream*), you can add it as another remote. + +```bash +# Add upstream remote +git remote add upstream https://github.com/original-author/repo.git + +# Fetch changes from upstream +git fetch upstream + +# Merge upstream updates into your local branch +git merge upstream/main +``` + +:::tip +This setup is perfect for open-source contribution workflows. +::: + +## Common Remote Commands Summary + +| Command | Description | +| ------------------------------------- | ---------------------------- | +| `git remote -v` | Show all connected remotes | +| `git remote add ` | Add a new remote | +| `git remote remove ` | Remove a remote | +| `git push ` | Push local commits to remote | +| `git pull ` | Fetch and merge changes | +| `git fetch ` | Fetch without merging | +| `git remote set-url ` | Update remote URL | + +--- + +## Troubleshooting Common Issues + +**❌ Rejected Push (non-fast-forward):** Occurs when the remote branch has new commits you don’t have. + +**Fix:** + +```bash +git pull origin main --rebase +git push origin main +``` + +**❌ Authentication Failed:** Use [Personal Access Tokens (PATs)](https://docs.github.com/en/authentication) instead of passwords for secure authentication. + +**❌ Detached HEAD State:** Happens if you checkout a specific commit. Return to a branch: + +```bash +git checkout main +``` + +## Summary + +| Concept | Description | +| ------------ | ----------------------------------------------------- | +| **Remote** | A cloud-based version of your Git repo (e.g., GitHub) | +| **Origin** | Default remote name | +| **Push** | Upload local changes to GitHub | +| **Pull** | Download and merge remote updates | +| **Fetch** | Download changes without merging | +| **Upstream** | The original repo you forked from | + +## Next Steps + +You’re now connected to the world. Next, let’s explore **how teams collaborate using GitHub** — with **Issues, Pull Requests, and Code Reviews**. 👉 [Next: Collaborating on GitHub →](#) + +--- + +💙 *This tutorial is part of the CodeHarborHub Git & GitHub learning path — helping developers master collaboration, workflows, and open-source contribution.* \ No newline at end of file diff --git a/docs/git/roadmap.mdx b/docs/git/roadmap.mdx new file mode 100644 index 0000000..18da57f --- /dev/null +++ b/docs/git/roadmap.mdx @@ -0,0 +1,123 @@ +--- +title: "Git & GitHub Roadmap" +description: "Follow the complete Git & GitHub roadmap for beginners to advanced developers. Learn version control, collaboration, GitHub Actions, and open-source contributions step by step." +tags: ["git roadmap", "github roadmap", "version control roadmap", "learning path", "tutorial"] +keywords: ["git roadmap", "github roadmap", "git tutorial path", "learn git github step by step"] +sidebar_position: 8 +--- + +Welcome to the **Git & GitHub roadmap** — a step-by-step guide to help you **master version control, collaboration, and open-source contributions**. This roadmap is designed for **beginners, intermediate, and advanced developers**, and will guide you through all the key skills you need to succeed. + +## Beginner Level + +Start with the basics to build a strong foundation. + +1. **Introduction to Git & GitHub** + Route: [`/tutorial/git/introduction`](/tutorial/git/introduction) + Learn what version control is, why Git exists, and how GitHub works. + +2. **Git Basics** + Route: [`/tutorial/git/basics`](/tutorial/git/basics) + - Create repositories (`git init`) + - Track changes (`git add`, `git commit`) + - View commit history (`git log`) + - Ignore files (`.gitignore`) + +3. **Git Workflow Overview** + - Working Directory → Staging Area → Repository + - Basic commands: `git add`, `git commit`, `git push` + +## Intermediate Level + +Expand your skills with branching, remotes, and collaboration. + +1. **Branching & Merging** + Route: [`/tutorial/git/branching-merging`](/tutorial/git/branching-merging) + - Create, switch, and delete branches + - Merge branches and resolve conflicts + - Visualize branches with `git log --graph` + +2. **Working with Remote Repositories** + Route: [`/tutorial/git/remotes`](/tutorial/git/remotes) + - Clone repositories + - Push and pull changes + - Sync forked repositories + +3. **Undoing Changes & Troubleshooting** + Route: [`/tutorial/git/undo`](/tutorial/git/undo) + - Undo commits (`git reset`, `git revert`) + - Discard changes (`git restore`) + - Use stash for temporary work + +4. **Collaborating on GitHub** + Route: [`/tutorial/github/collaboration`](/tutorial/github/collaboration) + - Issues & discussions + - Pull requests & code reviews + - Project boards + +## Advanced Level + +Master advanced Git concepts, automation, and open-source contributions. + +1. **Git Advanced Concepts** + Route: [`/tutorial/git/advanced`](/tutorial/git/advanced) + - Rebasing & cherry-picking + - Tagging versions + - Git hooks & submodules + - Recovering deleted commits (`git reflog`) + +2. **GitHub Security & Authentication** + Route: [`/tutorial/github/security`](/tutorial/github/security) + - SSH keys, HTTPS, personal access tokens + - Two-factor authentication + - Managing private vs public repositories + +3. **GitHub Actions & Automation** + Route: [`/tutorial/github-actions`](/tutorial/github/github-actions) + - Automate builds, tests, and deployments + - YAML workflow basics + - GitHub Pages deployment example + +4. **Open Source Contribution Guide** + Route: [`/tutorial/github/open-source`](/tutorial/github/open-source) + - Find projects to contribute + - Fork → Clone → Branch → Commit → Pull Request workflow + - Good first issues and contribution etiquette + +5. **Integrations & Tools** + Route: [`/tutorial/github/integrations`](/tutorial/github/integrations) + - VS Code, GitHub Desktop, Git GUI clients + - GitHub CLI and IDE integrations + +--- + +## Real-World Projects + +After completing the roadmap, practice your skills with real-world projects: + +- Create a **personal portfolio** using GitHub Pages +- Host **documentation** with Docusaurus + GitHub Pages +- Set up **team workflows** with multiple collaborators +- Automate **CI/CD pipelines** with GitHub Actions + +Routes: [`/tutorial/github/projects`](/tutorial/github/projects) + +## Additional Resources + +- [Pro Git Book (Free)](https://git-scm.com/book/en/v2) +- [Official Git Documentation](https://git-scm.com/doc) +- [GitHub Guides](https://guides.github.com/) +- [Learn Git Branching (Interactive)](https://learngitbranching.js.org/) + +## Roadmap Summary + +| Level | Topics | +|-------|--------| +| Beginner | Introduction, Git Basics, Workflow | +| Intermediate | Branching & Merging, Remotes, Undoing Changes, Collaboration | +| Advanced | Advanced Git, Security, GitHub Actions, Open Source, Integrations | +| Practice | Real-world projects and automation | + +:::tip +*Follow this roadmap step by step, and you’ll become a proficient Git & GitHub user capable of managing projects, collaborating with teams, and contributing to open-source communities.* +::: \ No newline at end of file diff --git a/docs/git/undo.mdx b/docs/git/undo.mdx new file mode 100644 index 0000000..ae088ee --- /dev/null +++ b/docs/git/undo.mdx @@ -0,0 +1,208 @@ +--- +title: "Undoing Changes in Git" +description: "Learn how to undo mistakes in Git using reset, revert, restore, and stash commands. Master rollback strategies without losing work." +tags: ["git", "undo", "reset", "revert", "restore", "stash", "troubleshooting"] +keywords: ["git undo", "git revert vs reset", "git restore", "git stash", "undo commit git", "fix git mistakes"] +sidebar_position: 5 +--- + +Even experienced developers make mistakes — committing wrong files, breaking builds, or pushing changes too early. Fortunately, Git gives you multiple ways to **undo, fix, and recover** from almost any situation. + +In this tutorial, you’ll learn the safest and most powerful ways to undo changes in Git — from local edits to public commits. + +--- + +## Git’s Safety Principle + +Before jumping in, it’s important to understand: +> Git rarely deletes anything permanently. It keeps a **complete history** of your commits — even after undo operations. + +You can always recover past states using `git reflog`. + +## 1. Discarding Local Changes (Unstaged) + +If you’ve modified a file but haven’t staged it yet (`git add` not used), you can discard those changes: + +```bash +git restore +``` + +Example: + +```bash +git restore index.html +``` + +This command reverts the file to the last committed version. + +--- + +## 2. Unstaging Files + +If you’ve already staged a file with `git add`, but want to unstage it: + +```bash +git restore --staged +``` + +Example: + +```bash +git restore --staged app.js +``` + +This moves the file **out of the staging area** but keeps your changes in the working directory. + +--- + +## 3. Undoing the Last Commit (Without Losing Work) + +Made a commit too soon? +You can “uncommit” it while keeping your changes intact: + +```bash +git reset --soft HEAD~1 +``` + +* `--soft`: Removes the commit, keeps changes staged. +* `HEAD~1`: Refers to one commit before the current `HEAD`. + +Use this if you forgot to add a file or need to rewrite your message. + +## 4. Undoing the Last Commit (Discarding Changes) + +If you want to completely discard the last commit and changes: + +```bash +git reset --hard HEAD~1 +``` + +**Warning:** This permanently deletes uncommitted changes. +Use this only if you’re absolutely sure you don’t need the changes. + +## 5. Reverting a Commit (Safe for Public Repos) + +When a commit is already **pushed to GitHub**, don’t use `reset`. +Instead, create a new commit that “undoes” the previous one: + +```bash +git revert +``` + +Example: + +```bash +git revert a1b2c3d +``` + +This creates a new commit reversing the changes — perfect for shared projects. + +--- + +## 6. Stashing Temporary Work + +You’re in the middle of coding, but need to switch branches quickly? +Save your current progress temporarily using **stash**. + +```bash +git stash +``` + +Switch branches, then reapply your work: + +```bash +git stash pop +``` + +### Useful stash commands: + +| Command | Description | +| ----------------- | ------------------------------------ | +| `git stash list` | Show all stashed changes | +| `git stash apply` | Apply last stash without deleting it | +| `git stash clear` | Delete all stashed items | + +--- + +## 7. Viewing Differences Before Undoing + +Always review your changes before undoing anything. + +```bash +git diff +``` + +Shows unstaged changes. + +```bash +git diff --staged +``` + +Shows staged changes ready for commit. This helps confirm what you’re about to remove or reset. + +## 8. Recovering Lost Commits with Reflog + +If you’ve reset or deleted something by mistake — don’t panic. Use `git reflog` to view the history of `HEAD` changes: + +```bash +git reflog +``` + +Find your lost commit hash and restore it: + +```bash +git checkout +``` + +or move your branch back: + +```bash +git reset --hard +``` + +Git Reflog is your **time machine** — use it to recover almost anything. + +## Common Scenarios & Solutions + +| Problem | Command | Safe to Use | +| --------------------------------- | ----------------------------- | -------------------- | +| Undo unstaged edits | `git restore ` | ✅ Yes | +| Unstage a file | `git restore --staged ` | ✅ Yes | +| Undo last commit, keep changes | `git reset --soft HEAD~1` | ✅ Yes | +| Undo last commit, discard changes | `git reset --hard HEAD~1` | ⚠️ No (Deletes work) | +| Undo a pushed commit | `git revert ` | ✅ Yes | +| Save unfinished work | `git stash` | ✅ Yes | + +## Best Practices + +* Always **commit frequently** with meaningful messages. +* Use `git diff` before resetting or reverting. +* Use `revert` for shared branches (safe for others). +* Backup or stash changes before destructive actions. +* Use `git reflog` when you’ve lost commits. + +## Next Up + +Now that you know how to undo and recover safely, move on to mastering team collaboration: 👉 [Advanced Git Concepts](./advanced) + +## Additional Resources + +* [Git Official Docs: Undoing Things](https://git-scm.com/book/en/v2/Git-Basics-Undoing-Things) +* [Atlassian Git Tutorials](https://www.atlassian.com/git/tutorials/undoing-changes) +* [Learn Git Branching (Interactive)](https://learngitbranching.js.org/) +* [Git Cheatsheet (GitHub)](https://education.github.com/git-cheat-sheet-education.pdf) + +### Summary + +| Command | Purpose | +| ---------------------- | --------------------- | +| `git restore` | Discard local changes | +| `git restore --staged` | Unstage changes | +| `git reset` | Move commit pointers | +| `git revert` | Safely undo commits | +| `git stash` | Temporarily save work | +| `git reflog` | Recover lost commits | + +--- + +💙 *This guide is part of the CodeHarborHub Git & GitHub learning path — helping developers debug faster, recover smarter, and collaborate confidently.* diff --git a/docs/github/_category_.json b/docs/github/_category_.json index 1a7c296..9ad9e71 100644 --- a/docs/github/_category_.json +++ b/docs/github/_category_.json @@ -1,6 +1,6 @@ { "label": "GitHub", - "position": 4, + "position": 5, "link": { "type": "generated-index", "description": "Learn React.js for building user interfaces, and learn how to use React.js with other technologies like Redux, Webpack, and ES6." diff --git a/docs/github/best-practices.mdx b/docs/github/best-practices.mdx new file mode 100644 index 0000000..354eb82 --- /dev/null +++ b/docs/github/best-practices.mdx @@ -0,0 +1,266 @@ +--- +title: "Git & GitHub Best Practices" +description: "Learn essential Git and GitHub best practices for cleaner commits, safer collaboration, and more maintainable projects." +--- + +Mastering Git and GitHub isn’t just about commands, it’s about **developing good habits** that make your projects scalable, collaborative, and professional. Whether you’re a solo developer or working with a large team, following best practices ensures smoother development and fewer headaches. + +## 1. Use Meaningful Commit Messages + +Your commit message tells the story of your code. A clear, concise message helps collaborators understand *what changed* and *why*. + +**Good Example:** +```bash +git commit -m "Fix: resolved navbar alignment issue on mobile view" +```` + +**Bad Example:** + +```bash +git commit -m "fixed stuff" +``` + +:::tip + +* Use imperative mood (`Add`, `Fix`, `Update`) +* Keep the first line under 72 characters +* Use conventional commit prefixes: + + * `feat:` → new feature + * `fix:` → bug fix + * `docs:` → documentation changes + * `refactor:` → code structure improvement + +::: + +## 2. Keep Branches Clean and Descriptive + +Always create a **new branch** for each feature or bug fix. + +**Example:** + +```bash +git checkout -b feature/add-authentication +git checkout -b fix/navbar-responsive +``` + +**Best Practices:** + +* Don’t commit directly to `main` or `master` +* Delete merged branches to keep the repo clean +* Use branch naming conventions consistently + +## 3. Use `.gitignore` Wisely + +Avoid committing unnecessary files like dependencies, build artifacts, or system files. + +Example `.gitignore`: + +```gitignore +node_modules/ +.env +dist/ +.vscode/ +.DS_Store +``` + +:::tip +Use templates from [github.com/github/gitignore](https://github.com/github/gitignore) for your language or framework. +::: + +## 4. Commit Often, Push When Stable + +Small, frequent commits make it easier to: + +* Track changes +* Identify bugs +* Roll back safely + +Push your changes only when your local commits are tested and working. +Use `git pull --rebase` instead of `git pull` to keep your history clean and linear. + +## 5. Write Clear Pull Requests (PRs) + +A good Pull Request helps reviewers understand your intent quickly. + +**Include in your PR description:** + +* Summary of changes +* Related issue or ticket link +* Testing details +* Screenshots (if UI-related) + +**Example PR Title:** + +> `feat(ui): add dark mode toggle to navbar` + +## 6. Review Code Thoughtfully + +Code reviews are for *learning and improving*, not just checking syntax. + +**Best Practices for Reviews:** + +* Be constructive and polite +* Ask clarifying questions instead of demanding changes +* Test functionality locally if possible +* Approve with confidence, not hurry + +--- + +## 7. Use Secure Authentication + +Avoid committing sensitive data! + +❌ Never commit: + +```bash +API keys +Passwords +Private tokens +``` + +Use: + +* `.env` files with environment variables +* GitHub Secrets for Actions automation +* `git-secrets` or `truffleHog` to detect accidental leaks + +## 8. Tag and Version Your Releases + +Use **semantic versioning (semver)** to track releases properly: + +``` +MAJOR.MINOR.PATCH +``` + +Example: + +``` +v1.0.0 → Initial release +v1.1.0 → Added new feature +v1.1.1 → Bug fix +``` + +Tags make it easier to rollback or identify stable releases. + +```bash +git tag v1.2.0 +git push origin v1.2.0 +``` + +## 9. Automate with GitHub Actions + +Automation improves consistency and reduces manual effort. + +**Examples:** + +* Run tests automatically on every PR +* Deploy code on successful merge +* Lint and format code before pushing + +Example workflow file: + +```yaml +name: Lint and Test +on: [push, pull_request] +jobs: + test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - run: npm ci + - run: npm test +``` + +## 10. Maintain a Clear Repository Structure + +Keep your repository organized: + +``` +project/ +├── src/ +├── public/ +├── tests/ +├── docs/ +├── README.md +├── LICENSE +└── .gitignore +``` + +**Why it matters:** + +* Easier onboarding for new contributors +* Consistent code navigation +* Better integration with CI/CD tools + +## 11. Write a Helpful README + +Your `README.md` is the **first impression** of your project. + +Include: + +* Project title and description +* Installation steps +* Usage examples +* Contribution guidelines +* License information + +Add badges for stars, forks, build status, etc. +Example: + +```md +![Build Status](https://img.shields.io/github/actions/workflow/status/CodeHarborHub/project/build.yml) +``` + +## 12. Follow Open Source Etiquette + +When contributing to other projects: + +* Respect existing conventions +* Read `CONTRIBUTING.md` +* Be polite in PR discussions +* Give proper credit for ideas or code + +Remember: open source is about **collaboration, not competition**. + + +## 13. Back Up and Sync Regularly + +If working on multiple devices: + +* Use `git fetch` frequently +* Avoid force-pushing to shared branches +* Always pull updates before committing new changes + + +## 14. Learn and Improve Continuously + +Stay up-to-date with: + +* [GitHub Changelog](https://github.blog/changelog/) +* [Git Documentation](https://git-scm.com/docs) +* [Pro Git Book](https://git-scm.com/book/en/v2) + +Experiment with features like **GitHub Codespaces**, **Projects**, and **Copilot** to stay efficient. + +## Summary + +| Practice | Purpose | +| -------------------- | ------------------------------- | +| Meaningful commits | Trackable and readable history | +| Branch management | Isolated development and safety | +| Secure handling | Protect sensitive data | +| Automation | Consistent workflows | +| Documentation | Clarity and collaboration | + + +:::tip +*"Good developers write code; great developers maintain history, structure, and clarity."* +::: + + +### Learn More + +* [GitHub Best Practices Guide](https://docs.github.com/en/get-started) +* [Conventional Commits](https://www.conventionalcommits.org) +* [Pro Git Book](https://git-scm.com/book/en/v2) \ No newline at end of file diff --git a/docs/github/collaboration.mdx b/docs/github/collaboration.mdx new file mode 100644 index 0000000..4bd152e --- /dev/null +++ b/docs/github/collaboration.mdx @@ -0,0 +1,176 @@ +--- +title: "Collaborating on GitHub" +description: "Learn how to collaborate effectively on GitHub using repositories, pull requests, issues, code reviews, and project boards." +tags: ["github collaboration", "pull requests", "issues", "team workflow", "git tutorial"] +keywords: ["github collaboration tutorial", "pull request guide", "github issues", "team workflow github", "open source contribution"] +sidebar_position: 11 +--- + +Welcome to the **Git & GitHub Tutorial Series** by **CodeHarborHub**. GitHub isn’t just for hosting code, it’s a **powerful platform for team collaboration**. This tutorial will guide you through the tools and workflows developers use to work together efficiently. + +## 1. Understanding GitHub Repositories + +A **repository (repo)** is the central place for your project. It can be: + +- **Public** → visible to everyone, ideal for open-source projects. +- **Private** → visible only to selected collaborators or teams. + +### Repository Components +- **Code:** All project files +- **Issues:** Track tasks, bugs, or ideas +- **Pull Requests (PRs):** Propose changes to the codebase +- **Actions:** Automate CI/CD workflows +- **Projects:** Organize tasks using Kanban boards +- **Wiki:** Document project knowledge + +## 2. Forking & Cloning + +To contribute to someone else’s project: + +1. **Fork the repository** → creates a copy under your GitHub account. +2. **Clone the fork** → download it to your local machine: + ```bash + git clone https://github.com/your-username/forked-repo.git + ``` + +3. **Add the original repository as upstream**: + + ```bash + git remote add upstream https://github.com/original-owner/repo.git + ``` + +:::info +This ensures you can sync your fork with the main project later. +::: + +## 3. Pull Requests (PRs) + +A **Pull Request** is how you propose changes to a repository. + +### Workflow + +1. Create a **feature branch**: + + ```bash + git checkout -b feature/add-login + ``` + +2. Make your changes and commit: + + ```bash + git add . + git commit -m "Add login functionality" + ``` + +3. Push your branch to GitHub: + + ```bash + git push origin feature/add-login + ``` + +4. Open a **Pull Request** on GitHub: + + * Compare your feature branch with the main branch + * Add a meaningful title and description + * Submit for review + +### Best Practices for PRs + +* Keep PRs **small and focused** +* Include **screenshots or examples** if UI changes +* Write clear, concise **descriptions** +* Reference related **issues** (`#issue-number`) + +## 4. Issues + +**Issues** help track tasks, bugs, feature requests, and discussions. + +### Creating an Issue + +1. Go to the **Issues** tab +2. Click **New Issue** +3. Add a descriptive **title** and detailed **description** +4. Assign labels, assignees, or milestones + +### Using Issues Efficiently + +* **Bug** → for errors or unexpected behavior +* **Feature Request** → for new functionalities +* **Discussion** → for planning or ideas +* **Good First Issue** → ideal for beginners contributing to open-source + +## 5. Code Review + +**Code reviews** ensure quality and maintainability. + +### How to Perform a Review + +* Comment inline on specific lines of code +* Approve or request changes +* Suggest improvements with actionable feedback + +### Reviewer Best Practices + +* Be constructive, not critical +* Ask questions if unsure +* Focus on **logic, style, and tests** + +> Pull Requests usually require **at least one reviewer approval** before merging. + +## 6. Project Boards + +GitHub **Project Boards** help manage workflows: + +* **Kanban style:** Columns like To Do, In Progress, Done +* Track **issues and PRs** visually +* Assign tasks to team members +* Integrate with GitHub Actions for automation + +## 7. Managing Teams & Permissions + +Repositories can have multiple collaborators with different **roles**: + +| Role | Permissions | +| --------- | --------------------------------------------- | +| **Owner** | Full access, manage repo & teams | +| **Admin** | Manage settings, workflows, and collaborators | +| **Write** | Push commits and manage issues/PRs | +| **Read** | View repository content only | + +> Teams make collaboration easier for organizations and open-source projects. + +## 8. Recommended Collaboration Workflow + +1. Fork → Clone → Create a branch +2. Make changes → Commit → Push +3. Open PR → Request review +4. Review & address feedback +5. Merge → Delete branch → Sync fork + +> This workflow keeps repositories clean and collaborative. + +## Summary + +| Feature | Purpose | +| ------------------- | ------------------------------------- | +| Repository | Central place to store project files | +| Fork & Clone | Work on someone else’s project safely | +| Pull Request | Propose code changes for review | +| Issues | Track tasks, bugs, and discussions | +| Code Review | Ensure quality and provide feedback | +| Project Boards | Organize tasks and workflow visually | +| Teams & Permissions | Manage contributors and access | + +## Next Up + +After mastering collaboration, it’s time to dive into **GitHub Profile & Repositories** — learn to showcase your work and set up a professional GitHub presence. 👉 [Next: GitHub Profile & Repositories →](./profile) + +## Additional Resources + +* [GitHub Guides – Collaborating with Pull Requests](https://guides.github.com/activities/forking/) +* [Understanding GitHub Issues](https://docs.github.com/en/issues) +* [Managing Project Boards](https://docs.github.com/en/issues/organizing-your-work-with-project-boards) + +--- + +💙 *This tutorial is part of the CodeHarborHub Git & GitHub series — helping developers collaborate effectively and contribute to projects worldwide.* \ No newline at end of file diff --git a/docs/github/github-actions.mdx b/docs/github/github-actions.mdx new file mode 100644 index 0000000..50f5b3c --- /dev/null +++ b/docs/github/github-actions.mdx @@ -0,0 +1,207 @@ +--- +title: "GitHub Actions: Automate Workflows" +description: "Learn how to automate tasks with GitHub Actions using workflows, CI/CD pipelines, YAML configuration, and real-world examples." +tags: ["github actions", "ci/cd", "workflow automation", "github automation", "yaml github actions"] +keywords: ["github actions tutorial", "ci cd github", "github workflow automation", "yaml github actions", "automate github tasks"] +sidebar_position: 14 +--- + +Welcome to the **Git & GitHub Tutorial Series** by **CodeHarborHub**. GitHub Actions allows you to **automate repetitive tasks, build CI/CD pipelines, and streamline your development workflow** directly within GitHub. + +## 1. What are GitHub Actions? + +**GitHub Actions** is a CI/CD and automation platform integrated into GitHub. + +It allows you to: + +- Automatically **build and test code** when changes are pushed +- Deploy applications to servers or cloud platforms +- Automate workflows like labeling issues, sending notifications, or generating reports +- Trigger actions on **events** like pull requests, pushes, or releases + +> Think of GitHub Actions as your **personal automation assistant** for repositories. + +--- + +## 2. Workflow Structure + +A **workflow** is a YAML file that defines automated tasks in your repository. + +**File location:** + +``` +.github/workflows/workflow-name.yml + +``` + +### Key Components + +| Component | Description | +|-----------|------------| +| **name** | Name of the workflow | +| **on** | Event triggers (push, pull_request, schedule) | +| **jobs** | A set of tasks executed by the workflow | +| **runs-on** | Operating system for the job (ubuntu-latest, windows-latest) | +| **steps** | Individual commands, actions, or scripts | + +## 3. Example: Simple CI Workflow + +This workflow runs **on every push** to the main branch and tests a Node.js project: + +```yaml title="node-ci.yaml" +name: Node.js CI + +on: + push: + branches: [ main ] + pull_request: + branches: [ main ] + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: '18' + + - name: Install dependencies + run: npm install + + - name: Run tests + run: npm test +``` + +> This workflow automatically checks out your code, installs dependencies, and runs tests — no manual steps required. + +## 4. Event Triggers + +Workflows are triggered by **GitHub events**: + +| Event | Description | +| ------------------- | ------------------------------------------------- | +| `push` | Triggered when commits are pushed | +| `pull_request` | Triggered when PRs are opened, updated, or merged | +| `schedule` | Run workflows on a cron schedule | +| `workflow_dispatch` | Manual trigger from GitHub UI | +| `release` | Triggered when a release is published | + +> You can combine multiple events in a single workflow. + +## 5. Using Actions + +**Actions** are reusable tasks created by GitHub or the community. + +* **Official actions:** `actions/checkout`, `actions/setup-node` +* **Community actions:** Published in [GitHub Marketplace](https://github.com/marketplace?type=actions) + +Example: Sending Slack notifications after a workflow: + +```yaml +- name: Send Slack Notification + uses: slackapi/slack-github-action@v1.23 + with: + channel-id: 'C12345678' + slack-token: ${{ secrets.SLACK_TOKEN }} +``` + +> Actions can simplify your workflow without writing complex scripts. + + +## 6. Environment Variables & Secrets + +Workflows often need **sensitive information** (API keys, tokens): + +* Store secrets in **Repository Settings → Secrets and variables → Actions** +* Access in YAML using `${{ secrets.YOUR_SECRET_NAME }}` + +Example: + +```yaml +- name: Deploy to Server + run: scp -r ./dist user@server.com:/var/www/ + env: + SSH_KEY: ${{ secrets.SSH_KEY }} +``` + +> Never hardcode sensitive credentials directly in workflow files. + +--- + +## 7. CI/CD Pipeline Example + +Example workflow to **build, test, and deploy a Node.js app**: + +```yaml +name: CI/CD Pipeline + +on: + push: + branches: [ main ] + +jobs: + build-and-test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: '18' + - run: npm install + - run: npm test + + deploy: + runs-on: ubuntu-latest + needs: build-and-test + steps: + - uses: actions/checkout@v3 + - run: npm run build + - name: Deploy to Server + run: ./deploy.sh +``` + +> The `deploy` job only runs if `build-and-test` succeeds — a simple **CI/CD pipeline**. + +--- + +## 8. Tips & Best Practices + +* Keep workflows **small and focused** for faster execution +* Use **caching** (`actions/cache`) for dependencies to speed up builds +* Use **branch-specific workflows** for feature branches or release branches +* Monitor workflow runs regularly in **Actions tab** +* Use **manual triggers** (`workflow_dispatch`) for flexible automation + +--- + +## Summary + +| Feature | Purpose | +| --------------- | ---------------------------------------------- | +| Workflows | Automate tasks and pipelines | +| Jobs | Units of execution in a workflow | +| Steps | Commands or actions executed sequentially | +| Event Triggers | Decide when workflows run | +| Actions | Pre-built or custom reusable tasks | +| Secrets & Env | Store sensitive credentials securely | +| CI/CD Pipelines | Automate build, test, and deployment processes | + +## Next Up + +After mastering GitHub Actions, you can explore **Open Source Contribution** — learn how to contribute effectively to projects and build your developer portfolio. 👉 [Next: Open Source Contribution →](/tutorial/github/open-source) + +## Additional Resources + +* [GitHub Actions Documentation](https://docs.github.com/en/actions) +* [GitHub Actions Marketplace](https://github.com/marketplace?type=actions) +* [GitHub Learning Lab: Automate your workflow](https://lab.github.com/github/learn-github-actions) +* [Continuous Integration with GitHub Actions](https://docs.github.com/en/actions/automating-builds-and-tests/about-continuous-integration) + +--- + +💙 *This tutorial is part of the CodeHarborHub Git & GitHub series — helping developers automate workflows, deploy faster, and streamline collaboration.* \ No newline at end of file diff --git a/docs/github/integrations.mdx b/docs/github/integrations.mdx new file mode 100644 index 0000000..cf0b689 --- /dev/null +++ b/docs/github/integrations.mdx @@ -0,0 +1,173 @@ +--- +title: "GitHub Integrations" +description: "Learn how to connect GitHub with external tools and services using integrations, webhooks, and APIs to enhance automation, productivity, and collaboration." +tags: ["github integrations", "github api", "webhooks", "ci/cd tools", "third-party apps"] +keywords: ["github integrations tutorial", "connect github to slack", "github webhooks", "github api guide", "automate workflows with github"] +sidebar_position: 16 +--- + +Welcome to the **Git & GitHub Tutorial Series** by **CodeHarborHub**. GitHub isn’t just for code, it’s a complete ecosystem. With **integrations, APIs, and webhooks**, you can connect GitHub to other tools, automate processes, and supercharge your development workflow. + +## 1. What are Integrations? + +**Integrations** allow GitHub to interact with external apps and services to automate tasks, enhance CI/CD, improve team communication, and provide analytics. + +### Types of Integrations +- **Official GitHub Apps** – Created by GitHub (e.g., Dependabot, Pages) +- **Marketplace Apps** – Third-party tools from the [GitHub Marketplace](https://github.com/marketplace) +- **Custom Integrations** – Built using GitHub’s REST or GraphQL API + +## 2. Popular GitHub Integrations + +Here are some powerful integrations that developers frequently use: + +| Tool | Purpose | +|------|----------| +| **Slack / Discord** | Receive notifications about issues, PRs, and commits | +| **Jira / Trello / Notion** | Link GitHub commits to project management boards | +| **VS Code / JetBrains IDEs** | Commit, push, and review PRs directly from your editor | +| **CI/CD Tools (Jenkins, CircleCI)** | Automate build and deployment processes | +| **Figma / Design Tools** | Connect design updates with version control | +| **Snyk / SonarCloud** | Scan repositories for vulnerabilities and code quality | +| **Vercel / Netlify** | Auto-deploy front-end apps when changes are pushed | +| **Google Cloud / AWS / Azure** | Integrate cloud deployments or monitoring pipelines | + +> Integrations transform GitHub from a code storage platform into a **complete DevOps ecosystem**. + +## 3. Using GitHub Marketplace + +The **GitHub Marketplace** is the easiest way to install integrations. + +### Steps: +1. Go to [GitHub Marketplace](https://github.com/marketplace) +2. Browse tools by category (CI/CD, Code Quality, Project Management, etc.) +3. Click **Set up a plan** or **Install it for free** +4. Grant necessary **repository permissions** +5. Configure integration settings in your repo + +> Marketplace apps can automate reviews, manage issues, analyze code, and deploy applications — all without writing a single line of backend code. + +## 4. GitHub Webhooks + +**Webhooks** are a way for GitHub to notify external systems about repository events in real-time. + +For example, when a **commit is pushed**, GitHub can **send a payload** (JSON data) to a custom server endpoint. + +### Example: Create a Webhook +1. Go to your repo → **Settings → Webhooks → Add webhook** +2. Enter your **Payload URL** (your server endpoint) +3. Choose **application/json** as the content type +4. Select **events** (push, pull_request, release) +5. Save webhook + +Now, your app will receive updates whenever selected events occur. + +### Example Payload: + +```json +{ + "ref": "refs/heads/main", + "repository": { + "name": "example-repo", + "full_name": "ajay-dhangar/example-repo" + }, + "pusher": { + "name": "ajay-dhangar" + } +} +``` + +> Webhooks are great for **custom notifications, analytics dashboards, or CI/CD integrations**. + +## 5. GitHub REST & GraphQL API + +GitHub offers two APIs for developers to interact programmatically: + +### REST API Example + +Get repository details: + +```bash +GET https://api.github.com/repos/codeharborhub/codeharborhub.github.io +``` + +### GraphQL Example + +```graphql +{ + repository(owner: "codeharborhub", name: "codeharborhub.github.io") { + name + stargazers { + totalCount + } + issues(last: 5) { + nodes { + title + state + } + } + } +} +``` + +> APIs are used for building dashboards, bots, GitHub analytics tools, or automation scripts. + +## 6. GitHub + Automation Tools + +### GitHub + Zapier + +* Automate tasks like sending an email when a PR is merged +* Example: “When an issue is created → Send Slack message + create Trello card” + +### GitHub + IFTTT + +* Automate lightweight workflows: “Star a repo → Add it to a Notion table” + +### GitHub + Actions + APIs + +* Combine **GitHub Actions** with APIs for **event-driven automation** + +Example: + +```yaml +- name: Send PR details to Slack + uses: slackapi/slack-github-action@v1.23 + with: + slack-message: "A new PR has been opened!" + env: + SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }} +``` + +## 7. Managing Integrations Securely + +* Use **GitHub Secrets** for storing API tokens +* Review **permissions** before installing apps +* Revoke unused **OAuth apps or tokens** +* Use **organization-level integrations** for team-wide access control +* Regularly audit connected apps in **Settings → Applications → Authorized OAuth Apps** + +> Security should always be a priority when connecting external systems. + +## 8. Summary + +| Feature | Description | +| ---------------- | -------------------------------------------- | +| Integrations | Connect GitHub to external services | +| Marketplace | One-click app installations | +| Webhooks | Real-time event triggers | +| REST/GraphQL API | Custom automation & analytics | +| Automation Tools | Connect GitHub with Zapier, Slack, or Trello | +| Security | Manage tokens and permissions safely | + + +## 📚 Additional Resources + +* [GitHub Integrations Docs](https://docs.github.com/en/developers/apps) +* [GitHub Marketplace](https://github.com/marketplace) +* [GitHub Webhooks Guide](https://docs.github.com/en/developers/webhooks-and-events/webhooks/about-webhooks) +* [GitHub REST API Reference](https://docs.github.com/en/rest) +* [GitHub GraphQL API Explorer](https://docs.github.com/en/graphql) + +--- + +💙 *This tutorial is part of the CodeHarborHub Git & GitHub series — empowering developers to automate, integrate, and innovate with GitHub.* diff --git a/docs/github/open-source.mdx b/docs/github/open-source.mdx new file mode 100644 index 0000000..0652a8d --- /dev/null +++ b/docs/github/open-source.mdx @@ -0,0 +1,175 @@ +--- +title: "Open Source on GitHub" +description: "Learn how to contribute effectively to open-source projects on GitHub by forking, creating pull requests, managing issues, and following best practices." +tags: ["open source contribution", "github fork", "pull request", "issues", "github collaboration"] +keywords: ["open source contribution github", "fork github repository", "create pull request github", "contribute to open source", "github issues tutorial"] +sidebar_position: 15 +--- + +Welcome to the **Git & GitHub Tutorial Series** by **CodeHarborHub**. Contributing to **open-source projects** is a powerful way to **learn, showcase your skills, and collaborate with the global developer community**. + +## 1. Understanding Open Source + +Open-source projects are **publicly accessible repositories** that anyone can contribute to. +Benefits of contributing: + +- Gain real-world experience +- Improve coding and collaboration skills +- Build a professional portfolio +- Network with developers globally +- Contribute to tools you use daily + +## 2. Forking a Repository + +To contribute safely, you **fork** a repository — creating your own copy to work on. + +### Steps to Fork + +1. Go to the original repository on GitHub +2. Click **Fork** → creates a copy under your account +3. Clone your fork locally: + ```bash + git clone https://github.com/your-username/forked-repo.git + ```` + +4. Add the original repo as upstream to stay updated: + + ```bash + git remote add upstream https://github.com/original-owner/repo.git + ``` + +> Forking ensures your changes won’t affect the main project until they are reviewed. + +## 3. Creating a Pull Request (PR) + +A **Pull Request** lets you submit your changes for review and merge into the main project. + +### Workflow for Pull Requests + +1. **Create a feature branch**: + + ```bash + git checkout -b feature/fix-typo + ``` + +2. Make changes and commit: + + ```bash + git add . + git commit -m "Fix typo in README" + ``` + +3. Push your branch: + + ```bash + git push origin feature/fix-typo + ``` + +4. Open a **Pull Request** on GitHub: + + * Select your branch and the original repo’s main branch + * Add a descriptive title and explanation +5. Collaborate with reviewers and **make requested changes** +6. Once approved, your PR can be **merged** + +> Always keep your branch focused on a **single task or fix**. + +## 4. Managing Issues + +**Issues** are used to track bugs, features, or discussions. + +* **Find issues labeled `good first issue`** → ideal for beginners +* Comment on an issue if you want to **claim it** +* Reference issues in your PR using `#issue-number` + Example: + + ```text + Fixes #23 - Corrected typo in documentation + ``` + +> Using issues helps maintain clarity and organization in large projects. + +## 5. Contributing Guidelines + +Many repositories include a `CONTRIBUTING.md` file: + +* Follow **project-specific rules** +* Run **tests** before submitting PRs +* Respect **code style and linting rules** +* Include **descriptive commit messages** +* Engage politely in **reviews and discussions** + +> Reading guidelines before contributing prevents rejection of PRs and builds trust with maintainers. + +## 6. Best Practices for Open Source Contribution + +* **Start small:** Fix typos, documentation, or small bugs +* **Communicate:** Always comment on issues or PRs before starting +* **Sync fork:** Regularly update your fork from upstream: + + ```bash + git fetch upstream + git checkout main + git merge upstream/main + ``` + +* **Test thoroughly** before submitting changes +* **Respect the project’s code of conduct** + +## 7. Example Contribution Workflow + +```bash +# Step 1: Fork and clone +git clone https://github.com/your-username/forked-repo.git +cd forked-repo + +# Step 2: Sync fork with upstream +git fetch upstream +git checkout main +git merge upstream/main + +# Step 3: Create feature branch +git checkout -b feature/add-new-function + +# Step 4: Make changes and commit +git add . +git commit -m "Add new function for date formatting" + +# Step 5: Push branch and open PR +git push origin feature/add-new-function +``` + +> This workflow ensures contributions are **organized, conflict-free, and professional**. + +## 8. Summary + +| Topic | Key Points | +| ----------------------- | ----------------------------------------------------------- | +| Forking | Create your own copy of a repository to work on safely | +| Pull Requests | Submit code changes for review and merge | +| Issues | Track bugs, features, and discussions | +| Contributing Guidelines | Follow project-specific rules and standards | +| Sync Fork | Keep your fork updated with upstream changes | +| Best Practices | Start small, test, communicate, and respect code of conduct | + +--- + +## Next Steps + +After learning open-source contribution, you’re ready to **advance your Git & GitHub skills**: + +* Explore **GitHub Portfolio Projects** +* Engage in **Hacktoberfest or community-driven events** +* Build confidence as a **long-term contributor** + +## Additional Resources + +* [GitHub Guides – Contributing to Projects](https://guides.github.com/activities/contributing-to-open-source/) +* [First Timers Only](https://www.firsttimersonly.com/) +* [Up For Grabs](https://up-for-grabs.net/) +* [Awesome for Beginners](https://github.com/MunGell/awesome-for-beginners) +* [GitHub Docs – Pull Requests](https://docs.github.com/en/pull-requests) + +--- + +💙 *This tutorial is part of the CodeHarborHub Git & GitHub series — empowering developers to contribute confidently to open-source projects worldwide.* \ No newline at end of file diff --git a/docs/github/profile.mdx b/docs/github/profile.mdx new file mode 100644 index 0000000..dbb7459 --- /dev/null +++ b/docs/github/profile.mdx @@ -0,0 +1,179 @@ +--- +title: "GitHub Profile & Repositories" +description: "Learn how to set up a professional GitHub profile, create repositories, manage contributors, and showcase your work effectively." +tags: ["github profile", "repositories", "readme", "portfolio", "git tutorial"] +keywords: ["github profile setup", "create github repository", "github readme", "github portfolio", "manage contributors"] +sidebar_position: 12 +--- + +Welcome to **Part 7** of the **Git & GitHub Tutorial Series** by **CodeHarborHub**. A well-organized GitHub profile and repositories help you **showcase your work, attract collaborators, and contribute to open-source** effectively. + +## 1. Setting Up a Professional GitHub Profile + +A **GitHub profile** represents you to the developer community. To set it up professionally: + +### Profile Essentials +1. **Profile Picture** → Use a clear and professional image. +2. **Name & Username** → Use real name or a recognizable developer alias. +3. **Bio** → Include your role, skills, and interests. Example: + ```mdx + Full-Stack Developer | MERN Stack | Open Source Enthusiast + ``` +4. **Location & Contact** → Optional but helps networking. +5. **Pinned Repositories** → Showcase your best projects. + +### Profile README + +GitHub allows you to create a **special README for your profile**: + +1. Create a repository with the **same name as your username**: + + ``` + username/username + ``` + +2. Add a `README.md` file +3. Use Markdown to showcase: +- Skills +- Projects +- Achievements +- GitHub stats (using tools like [GitHub Readme Stats](https://github.com/anuraghazra/github-readme-stats)) + +Example: + ```mdx title="README.md" + # Hi, I'm Ajay 👋 + Full-Stack Developer | MERN Stack | Open Source Contributor + + ## Skills + - JavaScript, React, Node.js, MongoDB + - Git, GitHub, CI/CD + - Web Development & UI/UX Design + + ## Projects + - [Portfolio](https://github.com/ajay-dhangar/portfolio) + - [Tips Calculator](https://github.com/ajay-dhangar/tips-calculator) + ``` + +## 2. Creating Repositories + +Repositories are **projects or codebases**. Steps to create: + +1. Click **New Repository** +2. Enter **Repository Name** +3. Add **Description** → Short but clear +4. Choose **Public** or **Private** +5. Optionally, initialize with: + + * `README.md` + * `.gitignore` (Node, Python, etc.) + * License (MIT, Apache, etc.) +6. Click **Create Repository** + +> Once created, clone it locally or push an existing project. + +## 3. Writing a Great README + +A **README.md** is the first thing people see in your repo. + +### Key Sections + +* **Project Title** +* **Description** +* **Installation** +* **Usage** +* **Screenshots / Demo** +* **Contributing Guidelines** +* **License** +* **Contact Info / Links** + +Example: + + ````mdx title="README.md" + # Project Name + A short description of what this project does. + + ## Installation + + ``` + git clone https://github.com/username/repo.git + cd repo + npm install + ``` + + ## Usage + Instructions on how to run or use the project + + ## Contributing + Feel free to submit PRs or open issues. + + ## License + MIT License + ```` + +## 4. Managing Contributors + +Collaborators can be added to **private or public repositories**: + +1. Go to **Settings → Collaborators & Teams** +2. Add collaborators by **username or email** +3. Assign roles: + + * **Admin:** Full control + * **Write:** Can push code + * **Read:** Can view and comment + +> For open-source projects, contributors submit **pull requests**, which you can review and merge. + +## 5. Repository Best Practices + +* Use **descriptive repository names** +* Add a **clear README** +* Add **license files** for open-source +* Use **branch protection rules** for main branches +* Add **labels, issues, and project boards** for organization +* Tag releases (`git tag`) for versioning + +## 6. Example Professional GitHub Setup + +**Profile Highlights:** + +* Profile picture + bio +* Pinned repositories (top 6–8 projects) +* Profile README with skills and achievements + +**Repository Example:** + +* Repo: `portfolio` +* README includes live demo, screenshot, installation, and usage +* Branches: `main`, `development`, feature branches for new updates +* Issues tracked and labeled + +> This setup demonstrates professionalism, making it easier to attract recruiters, collaborators, and open-source communities. + +## Summary + +| Topic | Key Points | +| ---------------------- | ------------------------------------------ | +| Profile Setup | Bio, picture, pinned repos, contact info | +| Profile README | Showcase skills, projects, and stats | +| Repository Creation | Name, description, visibility, README | +| README Best Practices | Installation, usage, contributing, license | +| Contributor Management | Roles, permissions, PR workflow | +| Best Practices | Branches, issues, labels, project boards | + +## Next Up + +Now that your profile is set up, it’s time to focus on **GitHub Security** — learning SSH keys, tokens, and best practices for secure collaboration. 👉 [Next: GitHub Security →](./security) + +--- + +## 📚 Additional Resources + +* [GitHub Docs – Personal Profile](https://docs.github.com/en/account-and-profile) +* [GitHub Docs – Repositories](https://docs.github.com/en/repositories) +* [GitHub Profile README Guide](https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/about-your-profile) +* [Open Source Guides – Setting Up a Project](https://opensource.guide/starting-a-project/) + +--- + +💙 *This tutorial is part of the CodeHarborHub Git & GitHub series — empowering developers to present their work professionally and collaborate effectively.* \ No newline at end of file diff --git a/docs/github/projects.mdx b/docs/github/projects.mdx new file mode 100644 index 0000000..c77c7df --- /dev/null +++ b/docs/github/projects.mdx @@ -0,0 +1,146 @@ +--- +title: "GitHub Projects" +description: "Organize and manage your development workflow efficiently using GitHub Projects from Kanban boards to automated progress tracking." +--- + +GitHub Projects help you **plan, track, and manage work** — directly alongside your code. Whether you’re managing personal goals or a team sprint, Projects give you the flexibility of spreadsheets with the power of GitHub integration. + +## What Are GitHub Projects? + +GitHub Projects are customizable boards or tables that allow you to manage tasks, issues, and pull requests in an organized way. You can: +* Track progress visually using **Kanban-style boards** +* Group and filter issues by status, labels, or assignees +* Automate workflows using **GitHub Actions** +* Integrate project views directly into repositories or organizations + +Projects can exist: +* **Per repository** – For smaller projects or individual contributors +* **At the organization level** – For teams managing multiple repos + +## Creating a Project + +### Step 1: Open GitHub Projects +* Go to your **repository** or **organization**. +* Click on the **Projects** tab. +* Click **“New Project”** and choose a layout: + * **Board (Kanban)** – Ideal for task flow + * **Table (Spreadsheet)** – Ideal for data-rich views + +### Step 2: Name and Configure +* Name your project (e.g., *Website Redesign* or *Sprint 1*). +* Add fields like: + * **Status** (To Do, In Progress, Done) + * **Priority** + * **Assignee** + * **Deadline** + +## Adding Items to Projects + +You can add: +* **Issues** → Track bugs, tasks, or features +* **Pull Requests** → Track code changes under review +* **Drafts** → Add notes or to-do items without creating issues + +### Example: + +```text +Add dark/light theme toggle +Fix navbar collapse on mobile +Merge API integration PR +```` + +You can drag-and-drop items across columns (if using a Kanban layout) or filter using fields (if using a table view). + +## Automating Projects with GitHub Actions + +You can automate updates using **Actions**. +For example: + +* Move issues to “Done” when PRs are merged +* Add new issues automatically to your project + +Example workflow: + +```yaml +name: Auto add issues to project +on: + issues: + types: [opened] +jobs: + add_issue_to_project: + runs-on: ubuntu-latest + steps: + - name: Add issue to project + uses: actions/add-to-project@v0.5.0 + with: + project-url: https://github.com/orgs/CodeHarborHub/projects/1 + github-token: ${{ secrets.GITHUB_TOKEN }} +``` + +## Using Fields and Filters + +Projects allow **custom fields** for better tracking: + +* **Select** (e.g., Priority: High, Medium, Low) +* **Iteration** (e.g., Sprint 1, Sprint 2) +* **Date** (e.g., Due date) +* **Number** (e.g., Story points) + +You can use filters like: + +```text +assignee:@me status:"In Progress" +``` + +## Managing Teams and Permissions + +* **Public projects** – Anyone can view your progress +* **Private projects** – Restricted to selected collaborators +* Assign **roles** (admin, editor, viewer) +* Mention teammates in notes or comments to collaborate + +## Visualizing Progress + +You can use: + +* **Charts** to track completion rates +* **Milestones** to group related tasks +* **Burndown views** for sprint analysis + +GitHub Projects integrate with your repository insights to give you a complete picture of progress. + +## Real-World Example + +Let’s say CodeHarborHub is managing its **“Git & GitHub Tutorials”**: + +| Task | Status | Priority | Assignee | +| ------------------------ | ----------------- | -------- | ------------ | +| Write `introduction.mdx` | ✅ Done | High | Ajay Dhangar | +| Write `basics.mdx` | 🟡 In Progress | Medium | Contributor | +| Write `projects.mdx` | 🟢 Ready to Start | Low | Open | + +This helps contributors know what’s next, track progress, and stay aligned. + +## Tips for Better Project Management + +* Keep issue titles **concise and descriptive** +* Use **labels** for grouping (e.g., `frontend`, `backend`, `docs`) +* Automate repetitive tasks with **Actions** +* Regularly **review and clean up** completed items + +## Summary + +GitHub Projects empower developers and teams to: + +* **Organize tasks efficiently** +* **Track real-time progress** +* **Collaborate seamlessly** +* **Automate project management** + +They transform your repository from just code storage into a **complete development workspace**. + +### Learn More + +* [GitHub Projects Documentation](https://docs.github.com/en/issues/planning-and-tracking-with-projects) +* [GitHub Actions for Projects](https://github.com/actions/add-to-project) +* [CodeHarborHub on GitHub](https://github.com/CodeHarborHub) diff --git a/docs/github/security.mdx b/docs/github/security.mdx new file mode 100644 index 0000000..184df56 --- /dev/null +++ b/docs/github/security.mdx @@ -0,0 +1,162 @@ +--- +title: "GitHub Security" +description: "Learn how to secure your GitHub account and repositories using SSH keys, HTTPS, personal access tokens, two-factor authentication, and best practices." +tags: ["github security", "ssh keys", "personal access token", "2FA", "repository security"] +keywords: ["github security tutorial", "secure github account", "ssh keys github", "personal access token github", "two-factor authentication github"] +sidebar_position: 13 +--- + +Welcome to the **Git & GitHub Tutorial Series** by **CodeHarborHub**. Securing your GitHub account and repositories is critical to protect your code, collaboration workflow, and sensitive data. In this guide, you’ll learn essential security practices used by professional developers. + +## 1. HTTPS vs SSH for GitHub + +When connecting your local repository to GitHub, you have **two options**: + +### HTTPS +```bash +git clone https://github.com/username/repo.git +```` + +* Uses **username and password / personal access token** for authentication +* Easy setup, works behind firewalls +* Recommended for beginners or temporary setups + +### SSH + +```bash +git clone git@github.com:username/repo.git +``` + +* Uses **SSH keys** instead of passwords +* More secure and convenient for frequent access +* Recommended for professional developers + +:::tip +Modern GitHub disables password authentication for HTTPS; you need a **personal access token (PAT) +::: + + +## 2. Setting Up SSH Keys + +SSH keys allow **secure password-less authentication** between your machine and GitHub. + +### Step 1: Generate SSH Key + +```bash +ssh-keygen -t ed25519 -C "your.email@example.com" +``` + +* Press Enter to save in default location (`~/.ssh/id_ed25519`) +* Set a passphrase for extra security + +### Step 2: Add SSH Key to GitHub + +1. Copy public key: + +```bash +cat ~/.ssh/id_ed25519.pub +``` + +2. Go to **GitHub → Settings → SSH and GPG keys → New SSH key** +3. Paste the key and save + +### Step 3: Test Connection + +```bash +ssh -T git@github.com +``` + +> You should see a welcome message confirming your key is working. + +--- + +## 3. Personal Access Tokens (PAT) + +For HTTPS authentication or API access, GitHub uses **personal access tokens**. + +### Creating a PAT + +1. Go to **GitHub → Settings → Developer Settings → Personal Access Tokens → Tokens (classic) → Generate new token** +2. Choose scopes/permissions depending on your need (e.g., `repo`, `workflow`, `admin:repo_hook`) +3. Copy the token (store securely — you won’t see it again!) + +### Using PAT with HTTPS + +```bash +git clone https://github.com/username/repo.git +# Username: your GitHub username +# Password: paste your PAT +``` + +:::info +PATs replace your GitHub password for Git operations and API access. +::: + +## 4. Two-Factor Authentication (2FA) + +2FA adds an **extra layer of security** to your GitHub account. + +### Enabling 2FA + +1. Go to **GitHub → Settings → Security → Two-factor authentication** +2. Choose **Authenticator App** or **SMS** +3. Follow setup instructions and save recovery codes + +:::tip +Even if your password is compromised, attackers cannot access your account without the second factor. +::: + +## 5. Repository Security Best Practices + +### Use Protected Branches + +* Prevent direct commits to `main` or `master` +* Require pull requests and code reviews before merging + +### Manage Collaborator Permissions + +* Assign **roles carefully**: Admin, Write, Read +* Avoid giving unnecessary write access + +### Enable Dependabot + +* GitHub Dependabot automatically scans for **vulnerable dependencies** +* Suggests updates for safe libraries + +### Use .gitignore & Secrets + +* Never commit sensitive files (`.env`, API keys) +* Store secrets in GitHub **Actions secrets** for CI/CD + +### Regularly Audit Account + +* Check **authorized OAuth apps** +* Review **SSH keys and tokens** +* Remove inactive collaborators + +## 6. Summary of GitHub Security Measures + +| Feature | Purpose | +| ------------------------- | ----------------------------------------- | +| HTTPS / SSH | Secure Git connections | +| SSH Keys | Password-less authentication | +| Personal Access Token | Secure HTTPS access and API usage | +| Two-Factor Authentication | Extra layer of account security | +| Protected Branches | Prevent unauthorized changes | +| Dependabot | Automatic dependency vulnerability alerts | +| Repository Secrets | Secure sensitive data for workflows | + +## Next Up + +With security set, you’re ready to explore **GitHub Actions** — learn how to automate workflows, CI/CD pipelines, and project automation. 👉 [Next: GitHub Actions →](./github-actions) + +## 📚 Additional Resources + +* [GitHub Docs – SSH Keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) +* [GitHub Docs – Personal Access Tokens](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) +* [GitHub Docs – Two-Factor Authentication](https://docs.github.com/en/authentication/securing-your-account-with-two-factor-authentication-2fa) +* [GitHub Security Best Practices](https://docs.github.com/en/github/setting-up-and-managing-your-github-user-account/keeping-your-account-and-data-secure) + +--- + +💙 *This tutorial is part of the CodeHarborHub Git & GitHub series — helping developers secure their accounts, repositories, and workflows professionally.* diff --git a/docs/html/intro-html.mdx b/docs/html/intro-html.mdx index 5e8f7c0..ffa3942 100644 --- a/docs/html/intro-html.mdx +++ b/docs/html/intro-html.mdx @@ -141,6 +141,15 @@ HTML is used to create structured documents for the web. To start using HTML, yo
+:::note + +Browsers not only render HTML but also manage CSS, JavaScript, and media efficiently. +Let’s test this behavior in a live environment: + + + +::: + ## Conclusion HTML is the standard markup language for creating web pages and design documents on the World Wide Web. HTML is important because it provides a standardized way to define elements, making it easier for computers and software applications to interpret and display the content correctly. By learning HTML, you will be able to create web pages, understand web development, build websites, and contribute to the web. HTML is a versatile and widely used markup language that can help you express yourself, learn other technologies, and have fun building web pages. So, start learning HTML today and unleash your creativity on the web! \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 9857c55..032b6c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50,6 +50,7 @@ "prism-react-renderer": "^2.3.1", "raw-loader": "^4.0.2", "react": "^18.0.0", + "react-confetti": "^6.4.0", "react-dom": "^18.0.0", "react-icons": "^5.2.1", "react-lite-youtube-embed": "^2.4.0", @@ -22458,6 +22459,20 @@ "node": ">=0.10.0" } }, + "node_modules/react-confetti": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.4.0.tgz", + "integrity": "sha512-5MdGUcqxrTU26I2EU7ltkWPwxvucQTuqMm8dUz72z2YMqTD6s9vMcDUysk7n9jnC+lXuCPeJJ7Knf98VEYE9Rg==", + "dependencies": { + "tween-functions": "^1.2.0" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "react": "^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -26112,6 +26127,11 @@ "node": "*" } }, + "node_modules/tween-functions": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz", + "integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==" + }, "node_modules/type-fest": { "version": "2.19.0", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", diff --git a/package.json b/package.json index 668f46d..5474720 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "prism-react-renderer": "^2.3.1", "raw-loader": "^4.0.2", "react": "^18.0.0", + "react-confetti": "^6.4.0", "react-dom": "^18.0.0", "react-icons": "^5.2.1", "react-lite-youtube-embed": "^2.4.0", diff --git a/src/components/GitQuiz.tsx b/src/components/GitQuiz.tsx new file mode 100644 index 0000000..f801b55 --- /dev/null +++ b/src/components/GitQuiz.tsx @@ -0,0 +1,152 @@ +import React, { useState } from "react"; +import { motion, AnimatePresence } from "framer-motion"; +import Confetti from "react-confetti"; + +const questions = [ + { + question: "What command initializes a new Git repository?", + options: ["git start", "git init", "git create", "git new"], + answer: "git init", + }, + { + question: "Which command shows the current branch?", + options: ["git branch", "git status", "git log", "git show-branch"], + answer: "git branch", + }, + { + question: "Which GitHub feature is used for code collaboration?", + options: ["Forks", "Actions", "Pull Requests", "Issues"], + answer: "Pull Requests", + }, + { + question: "What does `git clone` do?", + options: [ + "Deletes a repository", + "Copies a repository from remote", + "Merges two branches", + "Creates a new branch", + ], + answer: "Copies a repository from remote", + }, + { + question: "Which file is used to ignore files from being tracked?", + options: [".ignore", ".config", ".gitignore", "ignore.txt"], + answer: ".gitignore", + }, +]; + +export default function GitQuiz() { + const [current, setCurrent] = useState(0); + const [score, setScore] = useState(0); + const [selected, setSelected] = useState(""); + const [isFinished, setIsFinished] = useState(false); + + const handleAnswer = (option: string) => { + setSelected(option); + if (option === questions[current].answer) setScore((prev) => prev + 1); + + setTimeout(() => { + if (current + 1 < questions.length) { + setCurrent((prev) => prev + 1); + setSelected(""); + } else { + setIsFinished(true); + } + }, 800); + }; + + const restartQuiz = () => { + setCurrent(0); + setScore(0); + setSelected(""); + setIsFinished(false); + }; + + const progress = ((current + (isFinished ? 1 : 0)) / questions.length) * 100; + + return ( +
+

+ Git & GitHub Quiz +

+ + {/* Progress Bar */} +
+ +
+ + {!isFinished ? ( + + +

+ {questions[current].question} +

+ +
+ {questions[current].options.map((option, idx) => { + const isCorrect = option === questions[current].answer; + const isSelected = option === selected; + + return ( + handleAnswer(option)} + disabled={!!selected} + className={`w-full py-3 px-4 rounded-xl border font-medium text-gray-800 dark:text-gray-200 transition-all + ${ + selected + ? isCorrect + ? "bg-green-500 text-white border-green-600" + : isSelected + ? "bg-red-500 text-white border-red-600" + : "bg-gray-200 dark:bg-gray-800 border-gray-600" + : "bg-gray-100 dark:bg-gray-800 hover:bg-blue-100 dark:hover:bg-blue-900 border-gray-300 dark:border-gray-600" + }`} + > + {option} + + ); + })} +
+ + + ) : ( + <> + + +

+ 🎉 Quiz Completed! +

+

+ Your Score: {score} /{" "} + {questions.length} +

+ + + + )} +
+ ); +}