[FEATURE] One-click GitHub Pages deployment with GitHub login

[yoanbernabeu]

🚀 Feature Description

Add the ability to connect a GitHub account and deploy the exported Bento page directly to GitHub Pages with one click, without leaving OpenBento.

💡 Problem / Motivation

Currently, deploying an exported Bento page to GitHub Pages requires:

1. Exporting the project as a ZIP
2. Extracting and opening in an IDE
3. Creating a GitHub repository manually
4. Pushing the code
5. Configuring GitHub Pages
6. Waiting for the build

This is tedious for non-technical users who just want their link-in-bio page live. A one-click deploy would make OpenBento accessible to everyone.

📋 Proposed Solution

1. GitHub Authentication (Device Flow)

Use GitHub's Device Flow authentication which works without a backend:

• User clicks "Deploy to GitHub" in the export section
• App shows a code and opens github.com/login/device
• User enters the code on GitHub
• App receives the access token
• Token stored in localStorage (user can revoke anytime)

Why Device Flow:

• No backend/server required
• Works with static apps
• Secure (token exchange happens on GitHub)
• User clearly sees what permissions they grant

2. Deploy flow

Once connected:

1. Choose repo name: e.g., my-bento or links
2. Click Deploy: App generates the export files, creates repo, pushes code
3. Automatic setup: GitHub Actions workflow deploys to Pages
4. Get URL: User receives their live URL (username.github.io/my-bento)

3. Update existing deployment

For users who already deployed:

• Sync button: Push latest changes to the same repo
• No re-authentication: Token already stored
• Automatic rebuild: GitHub Actions handles the rest

4. UI in export section

Add "Deploy to GitHub Pages" alongside existing export options:

• Not connected: "Connect GitHub" button with explanation
• Connected: Show GitHub username + "Deploy" button
• After deploy: Show live URL + "Update" button for future changes

🔄 Alternatives Considered

• OAuth App with backend: Requires server for token exchange
• Personal Access Token: Less user-friendly, security concerns
• Manual export only: Current approach, works but tedious

⚠️ Considerations

• Permissions: Request minimal scopes (public_repo, workflow)
• Token storage: Stored in localStorage, user can disconnect anytime
• Rate limits: GitHub API has rate limits (5000 req/hour authenticated)
• Repo naming: Validate repo name, suggest username.github.io for root domain

📝 Additional Context

What gets deployed:

• The generated React/Vite project (same as ZIP export)
• Includes the .github/workflows/deploy.yml for automatic builds
• User's Bento page, NOT the OpenBento builder

GitHub Device Flow documentation:

• https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps#device-flow

New files to create:

• services/github/auth.ts - Device Flow authentication
• services/github/deploy.ts - Repo creation, file push, Pages setup
• components/GitHubDeploySection.tsx - UI in export modal

Files to modify:

• Export modal/section - Add GitHub deploy option

Environment variables:

• VITE_GITHUB_CLIENT_ID - OAuth App client ID (public, safe to expose)

✅ Checklist

• I have searched for existing issues to avoid duplicates
• I have read the Contributing Guide

[erenworld]

Can I work on this ?

[yoanbernabeu]

Can I work on this ?

Let's go !

[erenworld]

I have a question. In the current version, we have the Deploy button at the top right.
Is this where I should add Deploy to GitHub?
Also, where is the export section?

[yoanbernabeu]

I have a question. In the current version, we have the Deploy button at the top right. Is this where I should add Deploy to GitHub? Also, where is the export section?

The idea is that in the 'Deploy' popup, when 'GitHub Pages' is selected, we add a Login, Repo Creation, and Push/Pull flow alongside the 'Download Package' option. We should probably plan for a solid UI/UX to handle this.

[erenworld]

Thanks, very clear. I will make something that works, then we can iterate and improve.