DEV Community

Rishabh
Rishabh

Posted on

**The Complete Beginner's Guide to Git & GitHub for Website Content Editing on macOS**

Are you a content creator, marketer, or aspiring developer who needs to edit website content, but struggles with Git commands? This step-by-step guide will transform you from a Git novice to someone who can confidently edit website content, track changes, and collaborate with developers – all from your MacBook.

What you'll learn:

  • Set up Git and GitHub on macOS
  • Clone and edit website repositories
  • Make content changes safely
  • Preview changes before publishing
  • Troubleshoot common issues

Time investment: 30-45 minutes to set up, then 5 minutes per content update

Step 1: Setting Up Your Git Environment

Installing Git on macOS

First, install Homebrew if you don't have it:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Enter fullscreen mode Exit fullscreen mode

Then install Git:

brew install git
Enter fullscreen mode Exit fullscreen mode

Method 2: Download from Git Website
Visit git-scm.com and download the latest version.

Verify your installation:

git --version
Enter fullscreen mode Exit fullscreen mode

You should see something like git version 2.42.0

Configuring Git

Set your identity (this appears in your commits):

git config --global user.name "Your Full Name"
git config --global user.email "your.email@example.com"
Enter fullscreen mode Exit fullscreen mode

Setting Up SSH Keys (Skip the Password Hassle)

SSH keys eliminate the need to enter your password every time you interact with GitHub.

Generate an SSH key:

ssh-keygen -t ed25519 -C "your.email@example.com"
Enter fullscreen mode Exit fullscreen mode

Press Enter to accept defaults, optionally add a passphrase for extra security.

Add the key to your SSH agent:

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519
Enter fullscreen mode Exit fullscreen mode

Copy your public key:

pbcopy < ~/.ssh/id_ed25519.pub
Enter fullscreen mode Exit fullscreen mode

Add to GitHub:

  1. Go to GitHub.com → Settings → SSH and GPG keys
  2. Click "New SSH key"
  3. Paste your key and give it a descriptive title
  4. Click "Add SSH key"

Test your connection:

ssh -T git@github.com
Enter fullscreen mode Exit fullscreen mode

Success looks like: "Hi username! You've successfully authenticated..."

Step 2: Getting Your Website Repository

Cloning the Repository

Think of cloning as downloading a copy of the website to your computer that stays connected to the original.

Navigate to your projects folder:

cd ~/Documents
mkdir websites
cd websites
Enter fullscreen mode Exit fullscreen mode

Clone the repository:

  1. Go to your GitHub repository
  2. Click the green "Code" button
  3. Copy the SSH URL (starts with git@github.com:)
  4. Clone it: 
git clone git@github.com:username/repository-name.git
cd repository-name
Enter fullscreen mode Exit fullscreen mode

💡 Pro tip: If you get permission errors, use HTTPS instead:
git clone https://github.com/username/repository-name.git

Verify everything worked:

ls -la
git status
Enter fullscreen mode Exit fullscreen mode

You should see files and "On branch main" or "On branch master"

Step 3: Understanding Website File Structure

Common Website Layouts

Here's what you'll typically find in a website repository:

repository-name/
├── index.html          # Homepage
├── about.html          # About page
├── contact.html        # Contact page
├── css/
│   └── style.css       # Styling
├── js/
│   └── script.js       # JavaScript
├── images/             # Image files
├── _posts/             # Blog posts (Jekyll sites)
├── content/            # Content files (some frameworks)
├── README.md           # Repository documentation
└── _config.yml         # Configuration (Jekyll/other frameworks)
Enter fullscreen mode Exit fullscreen mode

Finding Content Files

Look for these file types:

  • HTML files (.html): Direct website content
  • Markdown files (.md): Often used for blog posts or documentation
  • Configuration files (.yml, .json): Site settings and metadata

Finding specific content:

# List all HTML files
find . -name "*.html" -type f

# Search for specific text
grep -r "text you want to change" .
Enter fullscreen mode Exit fullscreen mode

Step 4: Editing Content Like a Pro

Setting Up VS Code

Download from code.visualstudio.com or:

brew install --cask visual-studio-code
Enter fullscreen mode Exit fullscreen mode

Open your repository:

code .
Enter fullscreen mode Exit fullscreen mode

Essential VS Code Extensions

Install these for better web development:

  • Live Server: Preview HTML files locally
  • Markdown All in One: Better Markdown editing
  • GitLens: Enhanced Git integration
  • Prettier: Code formatting

Making Content Changes

For HTML files:

<!-- Before -->
<h1>Old Title</h1>
<p>Old content that needs updating.</p>

<!-- After -->
<h1>New Title</h1>
<p>New content with updated information.</p>
Enter fullscreen mode Exit fullscreen mode

For Markdown files:

<!-- Before -->
# Old Title
Old content that needs updating.

<!-- After -->
# New Title
New content with updated information.
Enter fullscreen mode Exit fullscreen mode

Save your changes: Use Cmd + S to save. VS Code shows unsaved changes with a dot next to the filename.

Step 5: The Git Workflow (Your New Superpower)

The Four-Step Process

This is the core workflow you'll use every time:

1. Check what changed:

git status
git diff
Enter fullscreen mode Exit fullscreen mode

2. Stage your changes:

git add filename.html    # Specific file
git add .               # All changes
Enter fullscreen mode Exit fullscreen mode

3. Commit your changes:

git commit -m "Update homepage title and content"
Enter fullscreen mode Exit fullscreen mode

4. Push to GitHub:

git push origin main
Enter fullscreen mode Exit fullscreen mode

Writing Good Commit Messages

Good examples:

  • "Fix typo in about page"
  • "Update contact information"
  • "Add new team member bio"
  • "Remove outdated pricing information"

Guidelines:

  • Use present tense: "Add feature" not "Added feature"
  • Keep first line under 50 characters
  • Be descriptive but concise
  • Use imperative mood: "Fix bug" not "Fixed bug"

Step 6: Previewing Changes Before Publishing

Simple HTML Preview

For basic HTML files:

# Using Python (built into macOS)
python3 -m http.server 8000
Enter fullscreen mode Exit fullscreen mode

Then open http://localhost:8000 in your browser.

Using VS Code Live Server

  1. Install the "Live Server" extension
  2. Right-click on an HTML file
  3. Select "Open with Live Server"
  4. Your browser automatically opens the page

Jekyll Sites (GitHub Pages)

If your site uses Jekyll:

# Install Jekyll (requires Ruby)
gem install jekyll bundler

# Install dependencies
bundle install

# Serve locally
bundle exec jekyll serve
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:4000

Step 7: Viewing Live Changes

GitHub Pages

If your repository uses GitHub Pages:

  1. Go to repository Settings → Pages
  2. Your site URL will be shown (usually https://username.github.io/repository-name)
  3. Changes may take a few minutes to appear

Other Hosting Platforms

  • Netlify: Usually updates within seconds
  • Vercel: Updates automatically on push
  • Custom hosting: Depends on your setup

Step 8: Troubleshooting Common Issues

Authentication Failed 

# Error: Permission denied (publickey)
Enter fullscreen mode Exit fullscreen mode

Solution:

  1. Check if SSH key is added to GitHub
  2. Test SSH connection: ssh -T git@github.com
  3. If using HTTPS, you may need a Personal Access Token

Merge Conflicts 

# Error: CONFLICT (content): Merge conflict in filename.html
Enter fullscreen mode Exit fullscreen mode

Solution:

  1. Open the conflicted file in VS Code
  2. Look for conflict markers (<<<<<<<, =======, >>>>>>>)
  3. Choose which version to keep
  4. Remove the conflict markers
  5. Save and commit

Can't Push Changes 

# Error: Updates were rejected because the tip of your current branch is behind
Enter fullscreen mode Exit fullscreen mode

Solution:

git pull origin main
# Resolve any conflicts if they occur
git push origin main
Enter fullscreen mode Exit fullscreen mode

Step 9: Best Practices for Success

Workflow Best Practices

  1. Always pull before starting work: 
git pull origin main
Enter fullscreen mode Exit fullscreen mode

  1. Make small, focused commits:

    • One logical change per commit
    • Don't mix different types of changes

  2. Test changes locally before pushing:

    • Preview your changes
    • Check for broken links or formatting issues

  3. Use branches for major changes:

git checkout -b feature/new-content
# Make changes
git push origin feature/new-content
# Create pull request on GitHub
Enter fullscreen mode Exit fullscreen mode

File Management Tips

  • Keep file names lowercase and use hyphens: about-us.html
  • Don't commit large binary files (images > 1MB)
  • Use .gitignore to exclude unnecessary files

Conclusion: Your New Content Editing Superpower

Congratulations! You now have the skills to:

  • ✅ Edit website content safely using Git
  • ✅ Track all your changes with meaningful commit messages
  • ✅ Preview changes before publishing
  • ✅ Collaborate with developers professionally
  • ✅ Recover from mistakes confidently

Remember to practice, and don't hesitate to ask questions if you're stuck. Happy coding!

Top comments (0)