Introduction: The Difference Between Git and GitHub

If you learned the basics of Git in the previous article, this time we'll take it a step further and explore collaboration using GitHub. Let's first clarify the difference between Git and GitHub, which many people find confusing.

Git is a version control system. It operates locally on your computer, tracking and managing file change history. It works perfectly without an internet connection.

GitHub is a web service that hosts Git repositories. Simply put, it's a platform that lets you upload your Git repositories to the internet, share them with others, and collaborate. While there are similar services like GitLab and Bitbucket, GitHub is the most widely used.

Think of it this way: Git is like a diary, and GitHub is a cloud service where you can store that diary and share it with friends.

GitHub has become more than just a place to store code; it's the largest community where developers worldwide collaborate. Most open-source projects are managed on GitHub, and many companies look at applicants' GitHub profiles during hiring. That's how essential GitHub has become for modern developers - it's both a tool and a portfolio.

1. Creating a GitHub Account and Initial Setup

1.1 Creating an Account

Creating a GitHub account is straightforward.

  1. Visit github.com.
  2. Click the "Sign up" button.
  3. Enter your email address, password, and username.
  4. Complete email verification.

Username Selection Tips:

  • Only lowercase letters, numbers, and hyphens (-) are allowed.
  • Choose a professional-looking name. This will become your GitHub URL (github.com/username).
  • Avoid overly complex or long names. They're hard for others to mention later.
  • If possible, keep it consistent with names you use on other platforms for branding.

1.2 Setting Up Your Profile

Once you have an account, let's set up your profile. Click the profile icon in the upper right corner and go to "Settings".

  • Profile picture: Set a photo or icon that represents you.
  • Bio: Write a brief self-introduction.
  • Location: You can add your location information.
  • Website: Add links to your personal blog or portfolio.

2. Setting Up SSH Keys

Authentication is required to push code to GitHub. Entering passwords every time is inconvenient and not great for security. Setting up SSH keys allows secure automatic authentication.

2.1 What is an SSH Key?

SSH (Secure Shell) keys are an authentication method using public key cryptography. Two keys are generated as a pair:

  • Private Key: A secret key stored only on your computer. Never share it with anyone.
  • Public Key: A key registered with GitHub. It's safe to share publicly.

2.2 Generating SSH Keys

Open a terminal and run the following command:

# Generate SSH key (replace email with your GitHub account email)
ssh-keygen -t ed25519 -C "your_email@example.com"

Running this command will prompt you with a few questions:

# Key storage location (recommended to use default, press Enter)
Enter file in which to save the key (/Users/you/.ssh/id_ed25519):

# Passphrase setting (optional, recommended for additional security)
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

2.3 Adding the Key to SSH Agent

Register the generated SSH key with the SSH agent.

# Start SSH agent
eval "$(ssh-agent -s)"

# Add private key
ssh-add ~/.ssh/id_ed25519

2.4 Registering the Public Key on GitHub

First, copy the contents of your public key:

# macOS
pbcopy < ~/.ssh/id_ed25519.pub

# Windows (Git Bash)
clip < ~/.ssh/id_ed25519.pub

# Linux
cat ~/.ssh/id_ed25519.pub
# Copy the output manually

Then on GitHub:

  1. Go to Settings > SSH and GPG keys.
  2. Click the "New SSH key" button.
  3. Enter a name to identify this key in the Title field (e.g., "MacBook Pro", "Office Desktop").
  4. Paste the copied public key in the Key field.
  5. Click the "Add SSH key" button.

2.5 Testing the Connection

Verify that your SSH setup is correct:

ssh -T git@github.com

On first connection, you'll be asked whether to trust this host. Enter "yes". If successful, you'll see a message like this:

Hi username! You've successfully authenticated, but GitHub does not provide shell access.

3. Creating and Connecting Remote Repositories

3.1 Creating a New Repository on GitHub

Let's create a new repository on the GitHub website.

  1. Click the "+" button in the upper right corner of GitHub homepage.
  2. Select "New repository".
  3. Enter the repository name.
  4. Enter a description (optional but recommended).
  5. Choose Public or Private.
  6. Click "Create repository".

Repository Naming Conventions:

  • Use lowercase letters, numbers, hyphens (-), and underscores (_).
  • Choose a clear name that indicates the project's content.
  • Examples: my-portfolio, react-todo-app, python-data-analysis

3.2 Connecting Local and Remote Repositories

If you already have a local project, you can connect it to a GitHub repository.

# Navigate to local project folder
cd my-project

# Initialize Git repository (if not done yet)
git init

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

# Verify remote repository
git remote -v

origin is an alias for the remote repository. By convention, the main remote repository is called origin.

3.3 git clone - Cloning a Remote Repository

Use this to bring someone else's project or an existing GitHub project to your computer.

# SSH method (recommended)
git clone git@github.com:username/repository-name.git

# HTTPS method
git clone https://github.com/username/repository-name.git

# Clone with a different folder name
git clone git@github.com:username/repository-name.git my-folder-name

3.4 git push - Uploading Local Changes

Upload locally committed content to the remote repository.

# Basic push
git push origin main

# First push (set default branch with -u option)
git push -u origin main

# After that, simply use
git push

Using the -u option connects your local main branch with the remote origin/main branch, so you can just type git push afterward.

3.5 git pull - Fetching Remote Changes

Bring changes that others have pushed to the remote repository to your local machine.

# Fetch and merge remote repository changes
git pull origin main

# If default branch is set
git pull

git pull actually performs two operations at once: git fetch (download remote changes) + git merge (merge into local branch).

3.6 git fetch - Checking Remote Changes

Fetch changes from the remote repository without merging them into your local branch. You can review the changes before deciding whether to merge.

# Fetch all changes from remote
git fetch origin

# Check differences between remote and local
git log origin/main..main  # Commits only in local
git log main..origin/main  # Commits only in remote

# Merge after review
git merge origin/main

4. Using the GitHub Web Interface

GitHub allows you to perform various tasks from the web without using a terminal.

4.1 Viewing and Editing Files

  • Click on a file in the repository to view its contents.
  • Click the pencil icon to edit the file directly on the web.
  • After editing, enter a commit message at the bottom and click "Commit changes".

4.2 Checking Commit History

  • Click the "commits" link on the repository main page.
  • Click on each commit to see what was changed.
  • Added lines are shown in green, deleted lines in red.

4.3 Branch Management

  • Check the current branch and switch to other branches from the branch dropdown.
  • You can also create new branches.
  • Change the default branch in Settings > Branches.

4.4 Fork and Star

  • Star: A bookmark feature to mark projects you like. It's easy to find later and also a way to show interest in a project.
  • Fork: Copies someone else's repository to your account. You can freely modify it without affecting the original. Mainly used when contributing to open source.

5. Writing README.md

The README file is the face of your project. When you access a repository on GitHub, the README file is the first thing you see. A good README increases the value of your project and greatly helps others understand and use it.

5.1 What to Include in README

  • Project title and description: Brief explanation of what this project is
  • Installation instructions: How to run the project locally
  • Usage: Basic usage or examples
  • Features: List of main features
  • Tech stack: Technologies or libraries used
  • Contributing: Guide for those who want to contribute to the project
  • License: Terms of use for the project

5.2 README Example

# Project Name

A brief description of the project goes here.

## Features

- Feature 1: Description
- Feature 2: Description
- Feature 3: Description

## Installation

```bash
# Clone repository
git clone https://github.com/username/project.git

# Navigate to directory
cd project

# Install dependencies
npm install
```

## Usage

```bash
# Run development server
npm run dev
```

## Tech Stack

- Frontend: React, TypeScript
- Backend: Node.js, Express
- Database: PostgreSQL

## Contributing

1. Fork this repository.
2. Create a new branch (`git checkout -b feature/amazing-feature`).
3. Commit your changes (`git commit -m 'Add amazing feature'`).
4. Push to the branch (`git push origin feature/amazing-feature`).
5. Create a Pull Request.

## License

MIT License

5.3 Markdown Syntax Tips

  • # Heading: H1 heading (adjust H1~H6 with number of #)
  • **bold**: Bold text
  • *italic*: Italic text
  • `code`: Inline code
  • ```language code ```: Code block
  • - item: Unordered list
  • 1. item: Ordered list
  • [text](URL): Link
  • ![alt text](image URL): Image

6. Project Management with Issues and Projects

6.1 Using Issues

Issues are tools for managing tasks, bugs, feature requests, and more for your project.

Issue Writing Tips:

  • Write clear titles.
  • Describe the problem or request specifically.
  • If it's a bug report, include reproduction steps.
  • Attach relevant screenshots or logs.

Using Labels:

You can categorize Issues with labels.

  • bug: Bug fixes
  • enhancement: Feature improvements
  • documentation: Documentation related
  • good first issue: Good issues for first-time contributors
  • help wanted: Issues that need help

Creating Issue Templates:

Create a .github/ISSUE_TEMPLATE/ folder in your repository and add markdown files to use Issue templates.

6.2 Using Projects

GitHub Projects is a Kanban-style project management tool.

Basic Usage:

  1. Create a new project from the "Projects" tab in your repository.
  2. Create columns (e.g., To Do, In Progress, Done).
  3. Add Issues or Pull Requests as cards.
  4. Move cards to different columns as work progresses.

Automation Features:

You can set up automation rules in Projects:

  • Automatically add new Issues to "To Do" column
  • Automatically move to "Done" when Pull Request is merged

7. Enhancing Your GitHub Profile

Your GitHub profile is your first impression as a developer. A well-crafted profile can positively impact job opportunities and collaboration chances.

7.1 Creating a Profile README

GitHub has a hidden feature. If you create a repository with the same name as your username, the README from that repository will be displayed on your profile page.

  1. Create a repository with the same name as your username (e.g., username/username).
  2. Write a README.md file.
  3. Check it on your profile page.

7.2 Profile README Example

# Hello! I'm [Name]

I'm a junior developer aspiring to become a web developer.

## Tech Stack

### Languages
![JavaScript](https://img.shields.io/badge/-JavaScript-F7DF1E?style=flat&logo=javascript&logoColor=black)
![Python](https://img.shields.io/badge/-Python-3776AB?style=flat&logo=python&logoColor=white)

### Frameworks
![React](https://img.shields.io/badge/-React-61DAFB?style=flat&logo=react&logoColor=black)
![Node.js](https://img.shields.io/badge/-Node.js-339933?style=flat&logo=node.js&logoColor=white)

## GitHub Stats

![GitHub stats](https://github-readme-stats.vercel.app/api?username=yourusername&show_icons=true)

## Contact

- Email: email@example.com
- Blog: https://myblog.com

7.3 Profile Enhancement Tools

  • Shields.io: Create various badges.
  • GitHub Readme Stats: Display GitHub statistics as images.
  • GitHub Profile Trophy: Display achievements as trophies.
  • GitHub Readme Activity Graph: Show activity graphs.

7.4 Filling Your Contribution Graph

The green contribution graph on your profile page is an indicator of consistent development activity. These activities count as contributions:

  • Committing to the default branch
  • Opening issues
  • Opening Pull Requests
  • Reviewing Pull Requests

Tip: Filling the contribution graph shouldn't become the goal itself. It naturally fills up when you consistently write meaningful code. Meaningless commits just to fill the graph can actually create a negative impression.

Conclusion

In this article, we explored GitHub's various features. From SSH key setup to remote repository management, README writing, using Issues and Projects, and enhancing your profile.

GitHub is more than just a code repository - it's a social network and portfolio platform for developers. It's a space where you can contribute to open-source projects, share your projects, interact with other developers, and grow.

It might feel difficult at first because it's unfamiliar, but using it a little every day will make it second nature. Don't be afraid to make mistakes and actively use GitHub. Start by uploading your personal projects, starring other people's projects, and making small contributions to open source projects you're interested in.

In the next article, we'll take a deeper look at branch strategies and team collaboration using Pull Requests. I hope you enjoy your development journey with GitHub!