DEV Community

Masafumi Saito
Masafumi Saito

Posted on

Git & GitHub Basics: A Beginner's Guide

Git & GitHub Basics: A Beginner's Guide

I keep forgetting these steps every time I ask AI, so I'm documenting them for future reference. Here's how to connect your local development environment with GitHub repositories using Git and GitHub - the essential basics of these convenient code version management tools.

Note:

  • Git is version control software that runs on your local computer
  • GitHub is a web service that manages Git repositories in the cloud

1. Creating an Account

GitHub URL: https://github.com/

Detailed getting started documentation: https://docs.github.com/en/get-started/onboarding/getting-started-with-your-github-account


2A. Creating a Repository on GitHub First

# Use terminal commands on your local computer
# 1. Clone the GitHub repository to your local PC (first time only)
git clone https://github.com/username/repository-name.git

# 2. Navigate to the cloned folder
cd repository-name

# 3. Create and edit files
# (Create index.html or other files here)

# 4. Add changed files to "staging"
# (Staging = commit preparation area)
git add .
# ↑ "." means "all files in the current folder"

# 5. "Commit" the files in staging
# (Commit = save changes as a record)
git commit -m "Initial commit"
# ↑ Text after -m is the commit message (description of changes)

# 6. Upload local changes to GitHub (remote)
git push origin main
# ↑ origin = GitHub repository, main = main branch
Enter fullscreen mode Exit fullscreen mode

2B. Creating Local Files First

# 1. Initialize current folder as a Git repository
git init
# ↑ Make an empty folder "manageable by Git"

# 2. Link GitHub repository with local folder
git remote add origin https://github.com/username/repository-name.git
# ↑ origin = alias for GitHub repository
# ↑ remote add = set "this local folder connects to this GitHub"

# 3. Create and edit files
# (Create index.html or other files here)

# 4. Add changed files to "staging"
git add .
# ↑ Specify created files to "include in next commit"

# 5. "Commit" the files in staging
git commit -m "Initial commit"
# ↑ Save changes as a record (still local only)

# 6. Upload local changes to GitHub (remote)
git push origin main
# ↑ main = branch name (default main branch)
Enter fullscreen mode Exit fullscreen mode

3. Summary of Creation Methods

Methods A and B achieve the same result but in different order:

  • Method A: Create GitHub repository → Clone to local
  • Method B: Create local files → Link to GitHub repository

For beginners, Method A (git clone) is recommended.


4. Creating Branches

When making major feature changes or UI design modifications during development, I recommend using the branch feature.

GitHub allows you to create parallel working environments. These working environments are called branches.

Branch concept:

- main branch (default)
- feature-login branch (code implementing login functionality)
Enter fullscreen mode Exit fullscreen mode

Good practice: Use main for production environment (shouldn't break) and feature for experimental code (okay to break).

How to create branches:

# 1. Check current branch
git branch
# ↑ Current branch is marked with "*" (usually main)

# 2. Create and switch to new branch
git checkout -b feature/login-form
# ↑ feature/login-form = branch name (commonly includes feature name)
# ↑ -b = create new + switch simultaneously

# 3. Work on the new branch
# (Create and edit login form here)

# 4. Commit changes
git add .
git commit -m "Add login form feature"

# 5. Push new branch to GitHub
git push origin feature/login-form
# ↑ First push of new branch

# 6. Return to main branch
git checkout main
# ↑ or git switch main

# 7. Update main branch to latest
git pull origin main
# ↑ Prepare for potential changes by others

# 8. Merge new branch into main
git merge feature/login-form
# ↑ Integrate feature/login-form changes into main

# 9. Delete merged branch (optional)
git branch -d feature/login-form
# ↑ Remove unnecessary branch
Enter fullscreen mode Exit fullscreen mode

Give it a try, everyone!

Top comments (0)