0%
Tutorial 5 of 10
50% complete

Introduction to GitHub

Discover GitHub, create your account, and learn how to use this platform to host your projects.

Introduction to GitHub

GitHub is the most popular collaborative development platform in the world. Built around Git, it offers powerful tools for hosting, sharing, and collaborating on code projects. This tutorial will guide you through your first steps on GitHub.

What Is GitHub?

GitHub is a web platform that uses Git for version control and adds collaborative features:

  • Repository hosting: Cloud storage for your Git projects
  • Web interface: Visual management of your repositories
  • Collaboration: Tools for working as a team
  • Continuous integration: GitHub Actions for automation
  • Project management: Issues, milestones, projects
  • Documentation: Wiki, README, GitHub Pages

GitHub vs Git

AspectGitGitHub
TypeVersion control toolWeb platform
InstallationLocal on your machineCloud service
InterfaceCommand lineWeb interface + CLI
CollaborationBasicAdvanced (PRs, Issues, etc.)
HostingLocalCloud
CostFreeFree + paid plans

Creating a GitHub Account

Sign-Up Steps

  1. Visit GitHub.com
  2. Click “Sign up”
  3. Fill out the form:
    • Username (unique)
    • Email
    • Password
  4. Verify your email
  5. Choose your plan (Free to get started)

Profile Setup

# Important profile elements
- Professional profile photo
- Descriptive bio
- Location
- Website/portfolio
- Links to social networks

The GitHub Interface

Home Page

  • Dashboard: Activity from your repositories and organizations
  • Repositories: List of your repositories
  • Notifications: Activity on your projects
  • Explore: Discover new projects

Repository Page

username/repository-name
├── Code (files and folders)
├── Issues (problems and requests)
├── Pull requests (proposed changes)
├── Actions (CI/CD)
├── Projects (project management)
├── Wiki (documentation)
├── Security (security)
├── Insights (statistics)
└── Settings (settings)

Creating Your First Repository

Method 1: Create on GitHub, Then Clone

# 1. Create the repository on GitHub.com
# 2. Clone it locally
git clone https://github.com/username/mon-projet.git
cd mon-projet

# 3. Add some content
echo "# Mon Premier Projet" > README.md
git add README.md
git commit -m "Initial commit"
git push origin main

Method 2: Create Locally, Then Push

# 1. Create the project locally
mkdir mon-projet
cd mon-projet
git init
echo "# Mon Premier Projet" > README.md
git add README.md
git commit -m "Initial commit"

# 2. Add the GitHub remote
git remote add origin https://github.com/username/mon-projet.git
git branch -M main
git push -u origin main

Git Commands with GitHub

Configuring Remotes

# View configured remotes
git remote -v

# Add a remote
git remote add origin https://github.com/username/repo.git

# Change a remote's URL
git remote set-url origin https://github.com/username/nouveau-repo.git

# Remove a remote
git remote remove origin

Push and Pull

# Push to GitHub
git push origin main

# Push a new branch
git push -u origin feature/nouvelle-fonctionnalite

# Fetch and merge changes
git pull origin main

# Fetch without merging
git fetch origin

Repository Types

Public Repositories

  • Visible to everyone
  • Free on GitHub
  • Ideal for open source
  • Contribute to your profile

Private Repositories

  • Visible only to you and your collaborators
  • Free with limitations
  • Perfect for commercial projects
  • Granular access control

Special GitHub Files

README.md

The README file is displayed on the repository’s home page:

# Project Name

Short description of the project.

## Installation

```bash
npm install

Usage

npm start

Contributing

Contributions are welcome! See CONTRIBUTING.md.

License

This project is licensed under the MIT License - see LICENSE for details.


### .gitignore

GitHub offers .gitignore templates for different languages:

```bash
# Node.js
node_modules/
npm-debug.log*
.env

# Python
__pycache__/
*.pyc
.venv/

# Java
*.class
target/

LICENSE

Choose an appropriate license:

  • MIT: Very permissive
  • Apache 2.0: Permissive with patent protection
  • GPL v3: Strong copyleft
  • BSD: Simple permissive license

GitHub CLI

GitHub’s official command-line tool:

Installation

# Windows (with Chocolatey)
choco install gh

# macOS (with Homebrew)
brew install gh

# Linux (Ubuntu/Debian)
sudo apt install gh

Authentication

# Log in to GitHub
gh auth login

# Check authentication
gh auth status

Useful Commands

# Create a repository
gh repo create mon-projet --public

# Clone a repository
gh repo clone username/repository

# List issues
gh issue list

# Create an issue
gh issue create --title "Bug trouvé" --body "Description du bug"

# List pull requests
gh pr list

# Create a pull request
gh pr create --title "Nouvelle fonctionnalité" --body "Description"

Access Management

Collaborators

# Add a collaborator (via the web interface)
Settings > Manage access > Invite a collaborator

Teams and Organizations

  • Organizations: Group multiple repositories together
  • Teams: Manage permissions by group
  • Roles: Owner, Member, Outside collaborator

Security on GitHub

Two-Factor Authentication (2FA)

  1. Settings > Password and authentication
  2. Enable two-factor authentication
  3. Use an app (Google Authenticator, Authy)
  4. Save your recovery codes

SSH Keys

Setup to avoid typing your password:

# Generate an SSH key
ssh-keygen -t ed25519 -C "votre.email@example.com"

# Add the key to the SSH agent
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

# Copy the public key
cat ~/.ssh/id_ed25519.pub

# Add it on GitHub: Settings > SSH and GPG keys

Personal Access Tokens

For authentication over HTTPS:

# Generate a token: Settings > Developer settings > Personal access tokens
# Use the token as your password
git clone https://github.com/username/repo.git
# Username: your-username
# Password: your-token

GitHub Pages

Host static websites for free:

Activation

  1. Settings > Pages
  2. Choose the source (main branch, docs/, etc.)
  3. Your site will be available at: https://username.github.io/repository

Simple Site Example

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Mon Site GitHub Pages</title>
</head>
<body>
    <h1>Bienvenue sur mon site !</h1>
    <p>Hébergé gratuitement sur GitHub Pages.</p>
</body>
</html>

Hands-On Exercises

Exercise 1: First Repository

# 1. Create a repository on GitHub.com named "hello-github"
# 2. Clone it locally
git clone https://github.com/VOTRE-USERNAME/hello-github.git
cd hello-github

# 3. Create a README
echo "# Hello GitHub" > README.md
echo "Mon premier projet sur GitHub !" >> README.md

# 4. Add and push
git add README.md
git commit -m "Add README"
git push origin main

Exercise 2: Project with a Structure

# 1. Create the structure
mkdir src docs tests
echo "console.log('Hello World!');" > src/app.js
echo "# Documentation" > docs/README.md
echo "// Tests à venir" > tests/app.test.js

# 2. Create a .gitignore
echo "node_modules/" > .gitignore
echo "*.log" >> .gitignore

# 3. Add everything and push
git add .
git commit -m "Initial project structure"
git push origin main

Exercise 3: GitHub Pages

# 1. Create a simple site
echo "<!DOCTYPE html>
<html>
<head><title>Mon Site</title></head>
<body><h1>Hello GitHub Pages!</h1></body>
</html>" > index.html

# 2. Push
git add index.html
git commit -m "Add GitHub Pages site"
git push origin main

# 3. Enable GitHub Pages in Settings
# 4. Visit https://VOTRE-USERNAME.github.io/VOTRE-REPO

Discovering Projects

# GitHub search syntax
language:javascript stars:>1000
user:microsoft language:typescript
org:facebook created:>2020-01-01
  • Explore > Trending: Popular projects
  • Filter by language and time period
  • Discover new technologies

Topics and Tags

  • Organize repositories by subject
  • Make them easier to discover
  • Examples: web-development, machine-learning, api

Best Practices

An Effective README

  1. Clear title and description
  2. Installation instructions
  3. Usage examples
  4. Contribution guidelines
  5. License and contact

Commits and Messages

# Clear, descriptive messages
git commit -m "feat: add user authentication"
git commit -m "fix: resolve login bug on mobile"
git commit -m "docs: update API documentation"

Repository Organization

  • One repository per project
  • Descriptive names
  • Tags for versions
  • Well-organized branches

Third-Party Services

  • Travis CI: Continuous integration
  • Codecov: Code coverage
  • Dependabot: Dependency updates
  • Slack/Discord: Notifications

GitHub Apps

  • GitHub Desktop: Graphical interface
  • VS Code: GitHub extension
  • Mobile apps: GitHub for iOS/Android

Common Troubleshooting

Authentication Problems

# Check the configuration
git config --list | grep user

# Test the SSH connection
ssh -T git@github.com

# Reset credentials
git config --global --unset user.name
git config --global --unset user.email

Push Errors

# Error: Updates were rejected
git pull origin main
git push origin main

# Force push (CAUTION)
git push --force-with-lease origin main

Additional Resources

Official Documentation

Community

Conclusion

GitHub turns Git into a powerful collaborative platform. Mastering GitHub opens the door to modern collaboration and open source. It’s an essential tool for every developer.

In the next tutorial, we’ll dive deeper into collaborating on GitHub with pull requests, issues, and other collaboration tools.


Estimated reading time: 20 minutes
Level: Beginner
Previous step: Branches and Merging
Next step: Collaborating with GitHub