GitHub Platform Introduction

Module 2: Version Control & Containerization

Introduction to GitHub

In our previous lectures, we've focused on Git as a distributed version control system. While Git provides the foundation for version control, GitHub extends this foundation to create a collaborative development platform that has become central to modern software development.

GitHub is not just a place to store your code—it's a comprehensive platform that facilitates collaboration, project management, continuous integration, and much more. Think of Git as the engine and GitHub as the entire vehicle built around it, complete with navigation, safety features, and a comfortable interior.

flowchart TD A[GitHub Ecosystem] --> B[Code Hosting] A --> C[Collaboration Tools] A --> D[Project Management] A --> E[CI/CD Integration] A --> F[Community & Social Features] B --> B1[Repository Management] B --> B2[Version Control] B --> B3[Code Browse & Search] C --> C1[Pull Requests] C --> C2[Code Reviews] C --> C3[Issue Tracking] C --> C4[Discussions] D --> D1[Projects] D --> D2[Milestones] D --> D3[GitHub Actions] E --> E1[Continuous Integration] E --> E2[Continuous Deployment] E --> E3[GitHub Packages] F --> F1[Open Source Discovery] F --> F2[Profile & Contributions] F --> F3[GitHub Sponsors] style A fill:#f9f9f9,stroke:#333,stroke-width:2px style B fill:#e1f5fe,stroke:#0288d1 style C fill:#e8f5e9,stroke:#43a047 style D fill:#fff3e0,stroke:#ff9800 style E fill:#f3e5f5,stroke:#8e24aa style F fill:#e0f7fa,stroke:#00acc1

Today, we'll explore the GitHub platform, understanding its core features and how they enhance the development workflow. By the end of this lecture, you'll understand how GitHub transforms Git from a version control system into a collaborative development environment.

GitHub vs. Git: Understanding the Relationship

Before diving into GitHub's features, let's clarify the relationship between Git and GitHub, as well as how GitHub fits into the broader landscape of Git hosting services.

Git: The Distributed Version Control System

Git is:

GitHub: A Git Repository Hosting Service

GitHub is:

GitHub Alternatives

While GitHub is the most popular Git hosting platform, there are several alternatives:

Platform Key Features Best For
GitLab Built-in CI/CD, integrated DevOps tools Enterprise teams wanting a complete DevOps platform
Bitbucket Tight integration with other Atlassian tools Teams already using Jira, Confluence, etc.
Gitea Lightweight, self-hosted option Organizations needing on-premises hosting
SourceForge Traditional open-source project hosting Established open-source projects
Azure DevOps Microsoft ecosystem integration Teams heavily invested in Microsoft tools

While we'll focus on GitHub in this lecture, many of the concepts we discuss apply to other platforms as well.

Why GitHub Has Become the Industry Standard

GitHub has established itself as the de facto standard for several reasons:

Getting Started with GitHub

Let's walk through the process of getting started with GitHub, from creating an account to setting up your first repository.

Creating a GitHub Account

  1. Visit github.com and click "Sign up"
  2. Enter your email address
  3. Create a password
  4. Choose a username (this will be your GitHub identity and URL: github.com/username)
  5. Verify your account through the email verification process
  6. Choose your plan (Free, Team, Enterprise)
  7. Complete the questionnaire to personalize your experience (optional)

Tips for Choosing a Username:

Setting Up Your Profile

Your GitHub profile is your professional identity in the developer community. Take time to set it up properly:

  1. Upload a profile picture (preferably professional)
  2. Add your name and bio
  3. Include your location and company (if applicable)
  4. Add your website or social media links
  5. Set up a profile README (special repository with your username)

Profile README Example:

# Hi there 👋, I'm Jane Developer

Senior Frontend Developer passionate about creating accessible, user-friendly web experiences.

## 🔭 Current Work
- Leading the UI team at TechCorp
- Building an open-source design system

## 🛠️ Technologies
JavaScript | React | TypeScript | CSS/SASS | Node.js | GraphQL

## 📫 Contact Me
- Twitter: [@janedeveloper](https://twitter.com/janedeveloper)
- LinkedIn: [Jane Developer](https://linkedin.com/in/janedeveloper)
- Website: [janedeveloper.com](https://janedeveloper.com)

## 📊 GitHub Stats
![Jane's GitHub stats](https://github-readme-stats.vercel.app/api?username=janedeveloper&show_icons=true&theme=radical)

To create this special README:

  1. Create a new repository with the exact same name as your GitHub username
  2. Add a README.md file to this repository
  3. This README will automatically appear on your profile page

Setting Up SSH Authentication

Using SSH keys is more secure and convenient than password authentication:

  1. Check for existing SSH keys: 
    ls -la ~/.ssh
  2. Generate a new SSH key if needed: 
    ssh-keygen -t ed25519 -C "your_email@example.com"
  3. Start the SSH agent: 
    eval "$(ssh-agent -s)"
  4. Add your private key to the SSH agent: 
    ssh-add ~/.ssh/id_ed25519
  5. Copy your public key to clipboard (Mac): 
    pbcopy < ~/.ssh/id_ed25519.pub
    Or Windows: 
    clip < ~/.ssh/id_ed25519.pub
    Or Linux: 
    cat ~/.ssh/id_ed25519.pub
    then copy the output
  6. In GitHub, go to Settings → SSH and GPG keys → New SSH Key
  7. Paste your public key and add a descriptive title
  8. Test your connection: 
    ssh -T git@github.com

Creating Your First Repository

Let's create a repository on GitHub and connect it to your local machine:

Creating a New Repository on GitHub

  1. Click the "+" icon in the upper-right corner and select "New repository"
  2. Enter a repository name (use kebab-case or snake_case)
  3. Add an optional description
  4. Choose public or private
    • Public: Anyone can see the repository, but you control who can commit
    • Private: You choose who can see and commit to the repository
  5. Initialize with a README (recommended for new projects)
  6. Add a .gitignore file (select a template based on your project type)
  7. Choose a license (important for open-source projects)
  8. Click "Create repository"

Connecting an Existing Local Repository

# Navigate to your local repository
cd my-project

# Add the GitHub repository as a remote
git remote add origin git@github.com:username/repository-name.git

# Verify the remote was added
git remote -v

# Push your local repository to GitHub
git push -u origin main

Cloning an Existing Repository

# Clone the repository to your local machine
git clone git@github.com:username/repository-name.git

# Navigate into the cloned repository
cd repository-name

GitHub Repository Structure and Features

Let's explore the structure and features of a GitHub repository, which is the central unit of organization on the platform.

Repository Overview

A GitHub repository includes several key sections and features:

flowchart TD A[GitHub Repository] --> B[Code] A --> C[Issues] A --> D[Pull Requests] A --> E[Actions] A --> F[Projects] A --> G[Wiki] A --> H[Security] A --> I[Insights] A --> J[Settings] B --> B1[Files and Directories] B --> B2[Branches] B --> B3[Commits] B --> B4[Releases] C --> C1[Bug Reports] C --> C2[Feature Requests] C --> C3[Task Tracking] D --> D1[Code Review] D --> D2[Discussion] D --> D3[Merge Process] E --> E1[CI/CD Workflows] E --> E2[Automation] F --> F1[Project Boards] F --> F2[Task Organization] G --> G1[Documentation] H --> H1[Security Policies] H --> H2[Vulnerability Alerts] I --> I1[Analytics] I --> I2[Contributors] I --> I3[Dependency Graph] J --> J1[Repository Settings] J --> J2[Access Management] style A fill:#f9f9f9,stroke:#333,stroke-width:2px

File Navigation and Exploration

The Code tab is where you navigate the files and directories in your repository:

The repository also provides powerful search capabilities for finding specific content within your code.

Repository Insights

The Insights tab provides valuable analytics about your repository:

These insights help you understand how your project is growing and being used.

Branch Management

GitHub provides several features for managing branches:

Branch protection rules are particularly important for team projects to maintain code quality and stability.

Repository Settings and Configuration

The Settings tab provides extensive configuration options:

These settings allow you to customize your repository for your specific project needs.

Collaboration on GitHub

GitHub's collaborative features are what truly set it apart from using Git alone. Let's explore how GitHub facilitates teamwork and community contributions.

Issues: Tracking Work and Bugs

Issues are a powerful way to track ideas, enhancements, tasks, and bugs for your projects:

Issue Components

Issue Templates

You can create templates for common issue types to ensure contributors provide all necessary information:

---
name: Bug Report
about: Create a report to help us improve
title: '[BUG] '
labels: bug
assignees: ''
---

**Describe the bug**
A clear and concise description of what the bug is.

**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

**Expected behavior**
A clear and concise description of what you expected to happen.

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Environment:**
 - OS: [e.g. iOS]
 - Browser: [e.g. chrome, safari]
 - Version: [e.g. 22]

**Additional context**
Add any other context about the problem here.

To add issue templates to your repository, create a .github/ISSUE_TEMPLATE/ directory and add template files.

Linking Issues and PRs

GitHub provides several ways to link issues to the code that resolves them:

Pull Requests: The Collaboration Workflow

Pull requests (PRs) are the heart of the GitHub collaboration model. They provide a mechanism to discuss and review code changes before they're merged into the main codebase.

Anatomy of a Pull Request

Pull Request Templates

Similar to issue templates, PR templates help ensure contributors provide necessary information:

---
name: Feature Pull Request
about: Submit a new feature
---

## Description
Please provide a brief description of the changes in this pull request.

## Related Issue
Fixes #(issue)

## Type of Change
- [ ] Bug fix (non-breaking change that fixes an issue)
- [ ] New feature (non-breaking change that adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] Documentation update

## How Has This Been Tested?
Please describe the tests that you ran to verify your changes. 

## Checklist:
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my feature works
- [ ] New and existing unit tests pass locally with my changes

To add a PR template, create a .github/PULL_REQUEST_TEMPLATE.md file in your repository.

The Pull Request Workflow

  1. Create a Branch: Start by creating a branch for your changes 
    git checkout -b feature/new-login-page
  2. Make Changes: Implement your feature or fix 
    git add .
git commit -m "Implement new login page design"
  3. Push to GitHub: Upload your branch 
    git push -u origin feature/new-login-page
  4. Create Pull Request: On GitHub, navigate to your repository and click "Compare & pull request"
  5. Request Reviews: Add reviewers who should provide feedback
  6. Address Feedback: Make changes based on reviewer comments 
    git add .
git commit -m "Address review feedback"
git push
  7. Merge: Once approved, merge the PR into the target branch

Code Review Best Practices

GitHub Discussions

Discussions provide a forum-like space for conversations that don't fit neatly into issues or pull requests:

Discussions are particularly valuable for open-source projects to build community beyond just code contributions.

Collaboration and Permissions

GitHub provides granular control over who can do what in your repository:

Permission Levels

Adding Collaborators

To add collaborators to your repository:

  1. Go to your repository's Settings tab
  2. Click "Collaborators" in the sidebar
  3. Click "Add people" and search for the GitHub username
  4. Select the appropriate permission level

Organization Teams

For larger projects, GitHub Organizations provide team-based access control:

GitHub Project Management

Beyond code and collaboration, GitHub provides robust project management features that help teams organize and track their work.

GitHub Projects

GitHub Projects is a flexible project management tool that integrates with issues and pull requests:

Project Types

Project Board Example

flowchart LR A[To Do] --> B[In Progress] B --> C[Review] C --> D[Done] subgraph A A1[Add user authentication] A2[Update documentation] A3[Fix navigation bug] end subgraph B B1[Implement search feature] B2[Refactor API client] end subgraph C C1[Update styling for mobile] end subgraph D D1[Add loading indicators] D2[Setup CI/CD pipeline] end style A fill:#f5f5f5,stroke:#333 style B fill:#fff3e0,stroke:#ff9800 style C fill:#e1f5fe,stroke:#0288d1 style D fill:#e8f5e9,stroke:#43a047

Project Features

Creating a Project

  1. Go to your repository or organization
  2. Click on the "Projects" tab
  3. Click "New project"
  4. Choose a template or start from scratch
  5. Configure columns and automation
  6. Add issues and pull requests to the project

Milestones

Milestones help group issues and pull requests into defined goals or phases:

Milestones are particularly useful for tracking progress towards a specific release or deadline.

GitHub Actions for Project Automation

GitHub Actions can automate project management tasks:

Example: Automatically Label Issues

name: Label Issues

on:
  issues:
    types: [opened, edited]

jobs:
  label_issues:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/github-script@v6
        with:
          script: |
            const title = context.payload.issue.title.toLowerCase();
            const body = context.payload.issue.body.toLowerCase();
            
            // Add bug label
            if (title.includes('bug') || body.includes('bug') || body.includes('error')) {
              github.rest.issues.addLabels({
                issue_number: context.issue.number,
                owner: context.repo.owner,
                repo: context.repo.repo,
                labels: ['bug']
              });
            }
            
            // Add enhancement label
            if (title.includes('feature') || title.includes('enhance') || body.includes('feature request')) {
              github.rest.issues.addLabels({
                issue_number: context.issue.number,
                owner: context.repo.owner,
                repo: context.repo.repo,
                labels: ['enhancement']
              });
            }

Example: Automatically Assign Issues

name: Assign Issues to Project

on:
  issues:
    types: [opened]

jobs:
  assign_to_project:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/add-to-project@v0.4.0
        with:
          project-url: https://github.com/users/username/projects/1
          github-token: ${{ secrets.GITHUB_TOKEN }}

These automations can significantly streamline your project management workflow and ensure consistency.

GitHub Wikis

GitHub Wikis provide a place for comprehensive project documentation:

Wikis are ideal for detailed documentation, guides, and project information that doesn't fit in the README.

Advanced GitHub Features

Beyond the core features, GitHub offers several advanced capabilities that enhance the development workflow.

GitHub Actions: CI/CD and Automation

GitHub Actions allows you to automate your software development workflows directly in your repository:

Key Concepts

Example: Basic CI Workflow

name: Node.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    
    strategy:
      matrix:
        node-version: [14.x, 16.x, 18.x]
    
    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test

We'll explore GitHub Actions in more detail in a future lecture, but this gives you a taste of its capabilities.

GitHub Pages

GitHub Pages allows you to host websites directly from your GitHub repositories:

Setting Up GitHub Pages

  1. Go to your repository's Settings tab
  2. Click on "Pages" in the sidebar
  3. Select the source branch (usually main) and folder (root or /docs)
  4. Save your changes
  5. Visit your site at username.github.io/repository-name

GitHub Pages is ideal for project documentation, personal websites, and simple web applications.

GitHub Codespaces

Codespaces provides cloud-based development environments directly within GitHub:

Codespaces eliminates the "it works on my machine" problem by providing consistent environments for all developers.

GitHub Packages

GitHub Packages is an integrated package management service:

This allows you to host your packages alongside your code, simplifying dependency management.

GitHub Security Features

GitHub provides several security features to help protect your code:

These features help you maintain a secure codebase and respond effectively to vulnerabilities.

Open Source on GitHub

GitHub is the world's largest host of open source projects. Let's explore how to effectively participate in and contribute to open source on the platform.

Finding Open Source Projects

GitHub provides several ways to discover interesting projects:

When evaluating a project to contribute to, consider:

Contributing to Open Source

The general workflow for contributing to open source projects on GitHub:

  1. Fork the Repository: Create your own copy of the project 
    # No command needed - click "Fork" on the GitHub web interface
  2. Clone Your Fork: Download your fork to your local machine 
    git clone https://github.com/yourusername/project.git
cd project
  3. Add Upstream Remote: Keep your fork in sync with the original repository 
    git remote add upstream https://github.com/original-owner/project.git
  4. Create a Branch: Make your changes in a new branch 
    git checkout -b fix-login-bug
  5. Make Changes: Implement your feature or fix 
    git add .
git commit -m "Fix login validation bug"
  6. Keep Your Fork Updated: Pull in changes from the upstream repository 
    git checkout main
git pull upstream main
git push origin main
  7. Rebase Your Branch: Apply your changes on top of the latest main 
    git checkout fix-login-bug
git rebase main
  8. Push Your Branch: Upload your changes to your fork 
    git push origin fix-login-bug
  9. Create a Pull Request: Submit your changes to the original repository 
    # No command needed - use the GitHub web interface
  10. Address Feedback: Make any requested changes and push them to your branch

This "fork and pull request" model is the standard for contributing to open source on GitHub.

Creating Your Own Open Source Project

If you're starting your own open source project on GitHub, include these essential elements:

These documents establish clear expectations and make it easier for others to contribute.

GitHub Sponsors

GitHub Sponsors allows the community to financially support developers and projects:

Sponsors can be set up for individual accounts or organizations, providing a way to sustain open source work.

GitHub Best Practices

Let's wrap up with some best practices for effectively using GitHub in your development workflow:

Repository Management

Collaboration Workflow

Community Engagement

Security and Access Control

Practice Exercises

Let's reinforce what we've learned with some hands-on exercises:

Exercise 1: Setting Up Your GitHub Profile

  1. Create or update your GitHub profile
  2. Add a profile picture, bio, and contact information
  3. Create a profile README with information about your skills and interests
  4. Add at least one pinned repository that showcases your work

Exercise 2: Create a New Repository with Best Practices

  1. Create a new repository for a simple project
  2. Add a comprehensive README.md with installation and usage instructions
  3. Choose an appropriate license
  4. Set up issue templates for bug reports and feature requests
  5. Create a pull request template
  6. Add a code of conduct and contribution guidelines
  7. Configure branch protection for the main branch

Exercise 3: Collaborate on a Project

  1. Form pairs or small groups
  2. Have one person create a repository and add others as collaborators
  3. Create issues for features to implement
  4. Each person should:
    • Create a branch for their assigned issue
    • Implement the feature
    • Create a pull request
    • Review another person's pull request
    • Address feedback on their own pull request
  5. Merge the approved pull requests

Exercise 4: Contribute to an Open Source Project

  1. Find a beginner-friendly open source project on GitHub
  2. Fork the repository
  3. Clone your fork locally
  4. Find an issue to work on or identify an improvement
  5. Create a branch for your changes
  6. Make your changes and commit them
  7. Push your branch to your fork
  8. Create a pull request to the original repository

Exercise 5: Set Up Project Management

  1. Create a GitHub Project for managing your work
  2. Set up columns for different stages of work (To Do, In Progress, Review, Done)
  3. Add automation to move cards based on issue and PR status
  4. Create issues and add them to your project
  5. Create milestones for grouping related issues
  6. Practice moving issues through your workflow

Further Reading