PortfolioIntroduction
After writing code, many people wonder "how do I upload this to the server?" While FTP file uploads are one method, a modern approach is using GitHub.
This article introduces how to push code to GitHub using Claude Code and safe management practices using branches.
Why Use GitHub?
| Method | Advantages | Disadvantages |
|---|---|---|
| FTP Upload | Simple, longstanding method | No change history, hard to revert mistakes |
| Via GitHub | Change history retained, multi-person collaboration | Initial learning curve |
The biggest advantage of using GitHub is that change history is preserved. This helps when you want to "revert to yesterday's state" or "check when this change was made."
What Are Branches?
Branches are like "alternative routes for work."
Imagine writing a book. You have the "production version" of your manuscript, and separately you prepare an "experimental rewrite version." If the experiment works, you merge it into production; if it fails, you discard it—that's the concept.
Published site
Adding contact form
Fixing typos
This way, main branch is production, work branches for development—this separation lets you test new features without breaking the production site.
Pushing with Claude Code
With Claude Code, you can give instructions in natural language without memorizing git commands.
Creating and Pushing a New Branch
Give Claude Code instructions like this:
Create a branch called "feature/contact-form" and
push the current changes to GitHub
Claude Code executes the appropriate git commands.
Branch Naming Conventions
Branch names are flexible, but descriptive names make management easier.
| Type | Naming Example | Use Case |
|---|---|---|
| Feature Addition | feature/contact-form | Adding new features |
| Fix | fix/typo-homepage | Fixing bugs or typos |
| Improvement | improve/page-speed | Improving existing features |
Actual Workflow
Step 1: Start Work
Tell Claude Code "I want to create a new branch and start working."
Create a new branch "feature/about-page" and
add a company about page
Step 2: During Work
Give code modification and addition instructions to Claude Code as usual. If you say "save changes so far to GitHub," it will commit and push.
Commit and push the changes so far.
Use commit message "Add basic structure for about page"
Step 3: When Complete
When work is done, prepare to merge to the main branch. Create a Pull Request (PR) on GitHub.
See "Preview Verification and PR Merge" for details.
Common Questions
Q: Is it okay to push directly to main without branches?
For small fixes, directly pushing to main is sometimes acceptable. However, for larger changes, using branches is safer.
- Single typo fix → Direct to main is OK
- New page addition → Safer to use a branch
Q: What if branches pile up?
Merged branches can be deleted. Tell Claude Code "delete merged branches" and it will handle it.
Q: What if I pushed by mistake?
GitHub preserves change history, so you can revert to previous states. Consult Claude Code with "I want to undo the last push" and it will suggest appropriate methods.
Summary
- GitHub preserves change history for safe management
- Branches let you develop without breaking production
- Claude Code handles git commands through natural language instructions
Initially, just remember the basics: "main branch is production, work on separate branches." As you get comfortable, try more detailed usage patterns.