GitHub — From Zero to Collaborating

GitHub vs Git

Git is the version control software that runs on your computer. GitHub is a website that hosts Git repositories online — it adds a visual interface, collaboration tools, issue tracking, and deployment features on top of Git.

You can use Git without GitHub. But for almost every real project, you'll use both.

Creating Your First Repository

1. 1Sign up at github.com and verify your email.
2. 2Click the + icon in the top right → New repository.
3. 3Give it a name (e.g. my-first-website), add a description, and choose Public.
4. 4Check "Add a README file" and click Create repository.
5. 5Copy the HTTPS URL from the green Code button, then run git clone <url> on your computer.

Pushing Your First Code

git clone https://github.com/yourusername/my-first-website.git cd my-first-website # Make some changes... git add . git commit -m "Add homepage" git push

After pushing, refresh your GitHub repository page — your files will appear there instantly.

The README File

A README.md file is the front page of your GitHub repo. Write it in Markdown. It should explain what the project is, how to run it, and how to contribute.

# Project Name A short description of what this project does. ## Getting Started ```bash npm install npm run dev ``` ## What it does - Feature 1 - Feature 2 ## Built with - HTML, CSS, JavaScript

GitHub Pages — Free Hosting

GitHub Pages lets you host a static website for free directly from a repository. Perfect for portfolios, documentation, and landing pages.

1. 1Go to your repo → Settings → Pages.
2. 2Under "Source", select Deploy from a branch, choose main, folder / (root).
3. 3Click Save. Your site will be live at yourusername.github.io/repo-name in 1–2 minutes.

Pull Requests

A Pull Request (PR) is a request to merge changes from one branch into another. It's how teams review and discuss code before it lands on the main branch.

1. 1Create a feature branch: git checkout -b feature/my-thing
2. 2Make commits, then push: git push -u origin feature/my-thing
3. 3Go to the repo on GitHub — a yellow banner appears: "Compare & pull request". Click it.
4. 4Write a clear title and description of what you changed and why. Assign reviewers.
5. 5Once approved, click Merge pull request. Delete the branch after merging.

Forks

Forking creates a personal copy of someone else's repository in your GitHub account. You can make changes freely without affecting the original. When your changes are ready, open a pull request back to the original repo.

git clone https://github.com/yourusername/forked-repo.git git remote add upstream https://github.com/original-author/repo.git git fetch upstream git checkout -b my-fix # Make changes... git push origin my-fix # Then open a PR from your fork to the original

Issues and Projects

GitHub Issues are a built-in task tracker. Use them to report bugs, request features, and discuss changes. You can reference issues in commits: write Fixes #12 in a commit message to automatically close issue #12 when merged.

GitHub Projects is a Kanban-style board attached to your repository. You can use it to track issues across To Do / In Progress / Done columns — built-in project management for free.

Branch Protection Rules

Set up branch protection on main so no one can push directly to it — changes must go through a PR.

1. 1Settings → Branches → Add branch protection rule.
2. 2Pattern: main. Enable: "Require a pull request before merging" + "Require approvals".
3. 3Optionally: "Require status checks to pass before merging" (once you have CI set up).

GitHub Actions — CI/CD

GitHub Actions automates tasks that run in response to events — a push, a PR, a scheduled time. Use it for automated tests, deployments, linting, and more.

name: Deploy on: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '20' - name: Install dependencies run: npm ci - name: Run tests run: npm test - name: Build run: npm run build - name: Deploy to Cloudflare Pages uses: cloudflare/pages-action@v1 with: apiToken: ${{ secrets.CF_API_TOKEN }} accountId: ${{ secrets.CF_ACCOUNT_ID }} projectName: my-site directory: dist

GitHub Secrets

Never put API keys, tokens, or passwords in your repository. Store them as GitHub Secrets — encrypted variables available to GitHub Actions workflows.

Settings → Secrets and variables → Actions → New repository secret. Reference them in workflows with ${{ secrets.MY_SECRET_NAME }}.

GitHub API

gh repo list gh pr list gh pr create --title "Fix nav bug" --body "Closes #42" gh pr merge 7 --squash gh issue create --title "Mobile menu broken on iOS" gh release create v1.2.0 --notes "Bug fixes and performance improvements"

Dependabot

Dependabot automatically opens PRs to update your dependencies when security vulnerabilities are found. Enable it in Security → Dependabot alerts. Add a .github/dependabot.yml to also get version update PRs on a schedule.

version: 2 updates: - package-ecosystem: "npm" directory: "/" schedule: interval: "weekly"