Posted on Jul 5

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

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)

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)

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