Module 3: GitHub Integration via CLI

Overview

Your code lives on your computer—but what if your computer crashes? What if you want to share it? Enter GitHub: your code's home in the cloud. Using the GitHub CLI with Claude's guidance, you'll push your local project online in minutes, not hours.

What You'll Learn

Installing and authenticating GitHub CLI
Creating repositories without leaving terminal
Pushing your local code to GitHub
Essential GitHub CLI commands
Remote repository concepts made simple

Prerequisites

Completed Modules 1 & 2
Git repository with commits
GitHub account (free at github.com)
45 minutes for setup and practice

Why GitHub?

Your Code's Cloud Home

GitHub provides:

Backup: Code safe in the cloud
Portfolio: Show your work to the world
Collaboration: Work with others
Deployment: Connect to hosting services
History: Access from anywhere

GitHub CLI: The Power User's Choice

Traditional approach:

Switch to browser
Click through GitHub interface
Copy/paste commands
Context switching confusion

GitHub CLI approach:

Never leave your terminal
Claude guides every step
Direct integration
Faster workflow

Installing GitHub CLI

Let Claude Handle It

In your project directory:

claude

Then ask:

⚡ Install GitHub CLI for me. Check my operating system and use 
the appropriate method.

Claude will:

Detect your OS
Install via appropriate package manager
Verify installation
Explain what was installed

Manual Installation Options

If needed:

Mac (Homebrew):

brew install gh

Windows (Winget):

winget install --id GitHub.cli

Linux (apt):

sudo apt install gh

GitHub CLI Authentication

First-Time Setup

Ask Claude:

⚡ Help me authenticate GitHub CLI. I have a GitHub account 
but I've never used the CLI before.

The process:

Run gh auth login
Choose GitHub.com
Choose HTTPS
Authenticate with browser
Confirm success

Understanding Authentication

⚡ Explain what just happened with the GitHub authentication. 
Is my password stored locally?

Claude explains:

Token-based auth (not password)
Secure credential storage
Why browser authentication
How to stay secure

Creating Your First GitHub Repo

The Magic Command

With Claude:

⚡ I want to create a GitHub repository for this project. 
Show me how to do it from the command line and explain each option.

Claude will run something like:

gh repo create my-ai-website --public --source=. --remote=origin --push

Breaking it down:

gh repo create: The command
my-ai-website: Repository name
--public: Visible to everyone
--source=.: Use current directory
--remote=origin: Set up connection
--push: Upload your code

Understanding Public vs Private

⚡ Should my repository be public or private? 
What are the implications of each?

Claude explains:

Public: Portfolio, learning, free
Private: Hidden, secure, limited free

Pushing Code to GitHub

Your First Push

If repo was created without --push:

⚡ My GitHub repo is created but empty. 
Help me push my local commits to GitHub.

Claude guides you through:

git push -u origin main

Understanding the command:

push: Send commits to remote
-u: Set upstream (remember for next time)
origin: Remote repository name
main: Branch name

Viewing on GitHub

⚡ Open my new GitHub repository in the browser so I can see it.

Claude uses:

gh repo view --web

Magic! Your browser opens to your repo.

Essential GitHub CLI Commands

Repository Management

Explore with Claude:

⚡ Show me the most useful gh commands for managing my repository.

Key commands:

# View repo info
gh repo view

# Clone a repo
gh repo clone owner/repo

# Fork a repo
gh repo fork owner/repo

# List your repos
gh repo list

# Delete a repo (careful!)
gh repo delete owner/repo

Working with Issues

⚡ Create a GitHub issue for adding a contact form to my website.

Claude demonstrates:

gh issue create --title "Add contact form" --body "Need a contact form on the website"

Pull Requests (Preview)

⚡ What are pull requests and how would I create one with gh?

Learn the collaboration basics!

The GitHub Workflow

Daily Development Flow

⚡ Walk me through a typical workflow: I want to add a new feature, 
commit it, and push to GitHub.

Claude shows:

Make changes locally
Commit with Git
Push to GitHub
Verify online

Keeping Sync

⚡ How do I make sure my local and GitHub repos stay in sync?

Learn about:

git push: Send changes up
git pull: Bring changes down
When to use each
Avoiding conflicts

GitHub Repository Features

README.md Importance

⚡ Create a professional README.md for my website project. 
Explain why this file is special.

Claude creates:

Project title and description
Installation instructions
Usage examples
Technologies used
Contact information

Adding a License

⚡ Should I add a license to my repository? Help me choose 
and add an appropriate one.

Understand:

Why licenses matter
Common options
How to add one

.gitignore for GitHub

⚡ Update my .gitignore file to follow GitHub best practices 
for web projects.

Practical Exercises

Exercise 1: Complete GitHub Setup

Full repository creation:

⚡ Let's start fresh. Help me:
1. Create a new GitHub repository
2. Add a README with project description
3. Push all my existing commits
4. View it online

Exercise 2: Feature Development

Practice the full cycle:

⚡ I want to add a newsletter signup to my site:
1. Create a GitHub issue for tracking
2. Make the changes locally
3. Commit with reference to the issue
4. Push to GitHub
5. Close the issue

Exercise 3: Repository Management

Explore GitHub features:

⚡ Show me how to:
1. View my repository statistics
2. See all my commits on GitHub
3. Download my repo as a zip
4. Star my own repository (yes, that's allowed!)

Understanding Remotes

What's a Remote?

⚡ Explain what 'origin' means in Git and how it relates to GitHub.

Learn:

Local vs Remote repositories
Origin = GitHub copy
Multiple remotes possible
Why this matters

Checking Remote Status

⚡ Show me how to see what remotes are configured and 
verify my GitHub connection.

Useful commands:

git remote -v
git remote show origin

Troubleshooting

Common Issues

"Permission denied (publickey)"

⚡ I'm getting a permission denied error when pushing. 
Help me fix it.

"Repository not found"

⚡ Git says repository not found but I can see it on GitHub. 
What's wrong?

"Everything up to date" (but it's not)

⚡ I made changes but git push says everything up to date. 
Help me investigate.

GitHub Best Practices

Commit Before Pushing

Always:

Save your files
Commit locally
Then push to GitHub

Meaningful Commit Messages

Good for GitHub:

"Add responsive navigation menu"
"Fix mobile display issue #3"
"Update README with installation steps"

Regular Pushes

Push regularly to:

Backup your work
Show progress
Enable collaboration
Maintain history

Beyond Basics

GitHub Pages Preview

⚡ Can I host my website directly on GitHub? 
Show me GitHub Pages basics.

Learn about free hosting!

Collaboration Features

⚡ What collaboration features does GitHub offer? 
How would I work with others?

Discover:

Issues for task tracking
Pull requests for changes
Discussions for community
Wiki for documentation

Checkpoint Task

Your Mission

Create a complete GitHub presence for your project:

Repository Setup
- Install and authenticate GitHub CLI
- Create public repository
- Push all existing commits
- Verify online access
Repository Enhancement
- Create professional README.md
- Add appropriate license
- Update .gitignore
- Add description and topics
Feature Workflow
- Create issue for new feature
- Implement feature locally
- Commit with issue reference
- Push to GitHub
- Close issue
GitHub Exploration
- View commit history online
- Check repository insights
- Star your repository
- Share repository URL
Documentation
- README includes:
  - Project description
  - Technologies used
  - Setup instructions
  - Your contact info

Success Criteria

✅ GitHub CLI authenticated
✅ Repository live on GitHub
✅ All commits pushed
✅ Professional README
✅ Can push new changes

Celebrating Your Achievement

You're Published!

Your code now:

Lives in the cloud
Has a public URL
Shows your skills
Ready for deployment

Share your repository URL—you're officially a GitHub developer!

Next Steps

You're ready for deployment! Module 4 will show you:

Installing Netlify CLI
Deploying from command line
Connecting GitHub to Netlify
Getting your site online

Preparation for Module 4

GitHub repository complete
README.md polished
All changes pushed
Ready to go live!

Ready to deploy your website? Module 4 launches you online!

GitHub CLI Integration and Workflows

Prerequisites

Next Steps

Your Progress