lunartech-x/ai-website-deployment

AI Website Deployment

Deploy Anti-Gravity generated websites to Netlify for free hosting.

When to use this skill

• User wants to deploy a website
• User needs a live URL for their project
• User mentions Netlify or hosting
• User wants to share their Anti-Gravity project

Deployment Methods

Method 1: Manual Deploy (Quick)

Best for one-time deployments or demos.

Method 2: GitHub Integration (Continuous)

Best for ongoing projects with version control.

Method 1: Manual Deploy Workflow

Phase 1: Build the Project

• [ ] Open Anti-Gravity terminal
• [ ] Run npm run build
• [ ] Locate the out folder (or dist/.next)

Phase 2: Deploy to Netlify

• [ ] Go to netlify.com
• [ ] Click "Add new site" → "Deploy manually"
• [ ] Drag and drop the out folder
• [ ] Wait for deployment
• [ ] Copy the generated URL

Terminal Commands

Build Static Export (Next.js)

npm run build

Note: For static export to work, ensure next.config.js has:

output: 'export'

Locate Build Output

The output folder is typically:

• Next.js: out/ or .next/
• Vite: dist/
• Create React App: build/

Netlify Manual Deploy Steps

1. Go to app.netlify.com
2. Click "Add new site"
3. Select "Deploy manually"
4. Drag and drop your build folder
5. Wait for deployment (usually < 1 minute)
6. Copy the URL (format: random-name.netlify.app)

Setting Custom Domain

After deployment:

1. Go to Site settings → Domain management
2. Click "Add custom domain"
3. Follow DNS configuration instructions

Method 2: GitHub Integration

Setup

1. Push project to GitHub repository
2. Connect Netlify to GitHub
3. Select repository
4. Configure build settings:
   • Build command: npm run build
   • Publish directory: out

Benefits

• Automatic deploys on git push
• Preview deployments for PRs
• Rollback capabilities

Common Issues

"Build Failed" Error

Ensure static export is configured:

// next.config.js
module.exports = {
  output: 'export',
  images: {
    unoptimized: true
  }
}

Images Not Loading

For static export, ensure images are in /public/ folder and referenced with absolute paths.

Large File Size

• Compress images before build
• Remove unused dependencies
• Check for accidentally included videos

Alternative Hosting

| Platform | Free Tier | Best For | |----------|-----------|----------| | Netlify | Yes | Static sites | | Vercel | Yes | Next.js apps | | GitHub Pages | Yes | Simple HTML | | Cloudflare Pages | Yes | Edge performance |

Quick Deploy Checklist

- [ ] Build succeeds locally
- [ ] `out/` folder exists
- [ ] Images load correctly
- [ ] No console errors
- [ ] Mobile responsive
- [ ] Drag to Netlify
- [ ] Test live URL

Resources

• Netlify
• Vercel
• Next.js Static Export Docs