Setting Up Git Version Control for Your Website

Version control is essential for modern web development. Git tracks every change to your code, allows you to revert mistakes, collaborate with team members, and maintain a complete history of your project. This guide walks you through setting up Git for your website from scratch, whether you are starting a new project or adding Git to an existing site.

Why Use Version Control?

Before diving into setup, understand the benefits:

1. Change tracking: Every modification is recorded with who made it and why
2. Rollback capability: Instantly revert to any previous version of your code
3. Branching: Work on new features without affecting the live site
4. Collaboration: Multiple developers can work simultaneously without conflicts
5. Backup: Your code repository serves as a distributed backup
6. Deployment: Use Git to push changes directly to your hosting server

Tip: Even if you are a solo developer, version control saves you from accidental deletions, broken updates, and the "it was working yesterday" problem.

Step 1: Install Git Locally

Windows

1. Download Git from https://git-scm.com/download/win
2. Run the installer with default settings
3. Open Git Bash from the Start menu to verify: git --version

macOS

1. Open Terminal
2. Run: git --version
3. If not installed, macOS will prompt you to install Xcode Command Line Tools
4. Alternatively, install via Homebrew: brew install git

Linux

Use your distribution's package manager:

# Ubuntu/Debian
sudo apt update && sudo apt install git

# CentOS/RHEL/AlmaLinux
sudo dnf install git

Step 2: Configure Git

Set your identity (used in commit history):

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

Optional but recommended settings:

# Set default branch name to "main"
git config --global init.defaultBranch main

# Enable colorized output
git config --global color.ui auto

# Set your preferred text editor
git config --global core.editor "nano"  # or "vim", "code --wait", etc.

Step 3: Initialize a Git Repository

For a New Project

mkdir my-website
cd my-website
git init

For an Existing Website

Navigate to your project directory and initialize Git:

cd /path/to/your/website
git init

Step 4: Create a .gitignore File

The .gitignore file tells Git which files to exclude from version control. Create it in your project root:

touch .gitignore

Add common exclusions based on your project type:

General Web Project

# Dependencies
node_modules/
vendor/

# Environment files
.env
.env.local
.env.production

# Build output
dist/
build/

# IDE files
.vscode/
.idea/
*.swp
*.swo

# OS files
.DS_Store
Thumbs.db

# Logs
*.log
npm-debug.log*

# Compiled files
*.min.js
*.min.css

WordPress Project

# WordPress core (if managing theme/plugin only)
/wp-admin/
/wp-includes/
/wp-content/uploads/
wp-config.php

# Dependencies
node_modules/
vendor/

# Environment
.env

PHP/Laravel Project

/vendor/
/node_modules/
/public/hot
/public/storage
/storage/*.key
.env
.env.backup
composer.lock

Important: Never commit sensitive files like .env, database credentials, API keys, or passwords to Git.

Step 5: Make Your First Commit

Stage all files and create your initial commit:

git add .
git commit -m "Initial commit: project setup"

Verify the commit:

git log --oneline

Step 6: Set Up a Remote Repository

Connect your local repository to a remote service for backup and collaboration.

Using GitHub

1. Create a new repository on GitHub (do not initialize with README)
2. Add the remote and push:

git remote add origin https://github.com/username/my-website.git
git push -u origin main

Using GitLab or Bitbucket

The process is identical — just use the appropriate URL from your provider.

Essential Git Commands

Here are the commands you will use most frequently:

Daily Workflow

# Check status of your working directory
git status

# Stage specific files
git add filename.html

# Stage all changes
git add .

# Commit staged changes
git commit -m "Description of changes"

# Push to remote
git push origin main

# Pull latest changes
git pull origin main

Viewing History

# View commit history
git log

# View compact history
git log --oneline --graph

# View changes in a commit
git show commit-hash

# View differences
git diff

Branching

# Create and switch to a new branch
git checkout -b feature/new-header

# Switch between branches
git checkout main

# Merge a branch into main
git checkout main
git merge feature/new-header

# Delete a merged branch
git branch -d feature/new-header

Undoing Changes

# Discard changes to a file (before staging)
git checkout -- filename.html

# Unstage a file
git reset HEAD filename.html

# Revert a commit (creates a new commit that undoes changes)
git revert commit-hash

Branching Strategy for Websites

A simple but effective branching strategy:

1. main — The production-ready branch. Only merge tested code here.
2. develop — The integration branch for ongoing development.
3. feature/ — Feature branches for individual changes (e.g., feature/contact-form).
4. hotfix/ — Urgent fixes that go directly to main.

Workflow Example

# Start a new feature
git checkout -b feature/contact-form main

# Work on your feature, making commits along the way
git add .
git commit -m "Add contact form HTML and CSS"

# When done, merge into main
git checkout main
git merge feature/contact-form
git push origin main

# Clean up
git branch -d feature/contact-form

Connecting Git to Your Hosting Account

Once your repository is set up locally, you can deploy to your {{COMPANY_NAME}} hosting account using Git. See our companion article "Deploying Your Website with Git" for detailed deployment instructions.

The basic flow is:

1. Set up SSH keys for your hosting account
2. Create a bare repository on the server
3. Add the server as a remote
4. Push to deploy

Best Practices

1. Commit often: Small, focused commits are easier to understand and revert
2. Write clear commit messages: Describe what changed and why
3. Use branches: Never develop directly on main
4. Pull before pushing: Always pull the latest changes before pushing to avoid conflicts
5. Review before committing: Use git diff and git status to review changes
6. Keep .gitignore updated: Add new exclusions as your project evolves
7. Tag releases: Use git tag v1.0 to mark release points
8. Back up your remote: Use a hosted Git service (GitHub, GitLab) as your remote

Troubleshooting

"fatal: not a git repository"

• Run git init in your project directory
• Or navigate to the correct directory that contains the .git folder

Merge Conflicts

• Open the conflicted files and look for <<<<<<<, =======, >>>>>>> markers
• Edit the file to resolve the conflict
• Stage the resolved file and commit

Accidentally Committed Sensitive Files

• Remove the file from tracking: git rm --cached .env
• Add it to .gitignore
• Commit the change
• Consider the credentials compromised and rotate them

Related Articles

• Deploying Your Website with Git
• How to Access Your Account via SSH
• How to Generate and Use SSH Keys

Need help setting up Git for your website? Our support team at {{SUPPORT_EMAIL}} is happy to assist. Visit {{SUPPORT_URL}} to open a support ticket.