PortfolioIntroduction
"I can only work in front of a computer"—this may be a thing of the past. By linking Claude Code with GitHub, you can give instructions via voice input from your smartphone or web browser to update your site.
This article introduces ideas for progressing work even while traveling or without a computer.
What's Possible
Instruct "add a blog post"
Generates code and pushes to GitHub
Automatically reflects to preview environment
Verify display at preview URL
Merge PR on GitHub, reflects to production
You can voice input content on your phone during a train commute, and by the time you arrive at your destination, content could already be added to the site.
Required Setup
Access to Claude Code
There are several ways to use Claude Code from a smartphone:
| Method | Characteristics | Good For |
|---|---|---|
| Claude.ai (Web App) | Accessible from browser | Those who want to try easily |
| Claude Code Agent SDK | Custom integration via API | For developers |
| GitHub Actions Integration | Execute from PR comments | Those wanting automation |
The easiest is opening Claude.ai's web app in your smartphone browser.
GitHub and Vercel Integration
Pre-linking GitHub and Vercel means deployment runs just by pushing. See "GitHub × Vercel Integration Setup" for details.
Practical Usage
Example 1: Adding Blog Posts
When you want to turn ideas that come up while traveling into blog posts:
Voice input on smartphone:
"Please add a new article to the blog.
Title is 'Three Things I Noticed Working from Home'
Content is:
First, productivity improved without commute time
Second, it's hard to switch between on and off
Third, I tend to lack exercise
Please write these as natural sentences"
Claude Code creates a markdown file and pushes to GitHub. Vercel deploys to preview environment.
Example 2: Text Corrections
When you notice "the phone number on the contact page is wrong":
"Please fix the phone number in the contact.tsx page
to 03-1234-5678 and push to GitHub"
Simple corrections can be handled immediately.
Example 3: Adding New Pages
When you think "I want to add a service introduction page":
"Please create a new service introduction page.
Heading is 'Our Services'
Content introduces three things: Consulting, Training, Implementation Support
Write 2-3 sentences explaining each,
and push to GitHub on branch feature/services-page"
Voice Input Tips
Give Clear Instructions
With voice input, punctuation and line breaks may not come out as intended. To make instructions clear:
- State what you want first: "Add a blog post," "fix the phone number"
- Provide specific content: Title, body, filename, etc.
- Specify branch name and commit message: "on branch feature/xxx"
Request Confirmation
After giving instructions, saying "let me verify before you execute" makes Claude Code explain what it will do. Request corrections if intentions differ.
Build Up Short Instructions
Long instructions at once can be hard to convey. Giving short instructions and proceeding while confirming is recommended.
Preview Verification and Production Deployment
Checking Preview on Smartphone
Access Vercel dashboard or preview URL from smartphone to verify actual display. Also convenient for checking how things look on mobile.
Merging on GitHub
If there are no issues, you can create and merge PRs from GitHub's website (smartphone browser).
- Access GitHub
- Open Pull requests tab for the repository
- Create New pull request
- Execute Merge pull request
This reflects to production.
Notes
Not Suited for Complex Work
Smartphone operations are good for simple additions and corrections but not complex feature implementation. Such work is better done calmly in front of a computer.
Verify Carefully
Voice input can have recognition errors. Verify contents before execution and check display in preview environment before merging.
Security Considerations
When voice inputting in public places, be careful not to speak confidential information.
Use Cases
- While traveling: Create blog posts on train or bus
- Out and about: Request small corrections at a cafe
- When inspiration strikes: Give instructions as soon as ideas come
- Emergency response: Immediately fix typos or mistakes you notice
Summary
- Smartphone + voice input to instruct Claude Code
- Push to GitHub and Vercel auto-deploys
- Verify preview → merge to deploy to production
- Site updates possible while traveling or out
Being able to work regardless of location is a major benefit of AI coding. You don't need to do all work on smartphone, but knowing "simple updates can be done on smartphone" expands your options.