Leon4gr45/builder

1# Deploying Your Website2 3Export your OSW Studio project and deploy it to any static hosting platform.4 5---6 7## Overview8 9OSW Studio projects export as static HTML/CSS/JavaScript that can be hosted anywhere:10 111. Export your project as a ZIP file122. Extract and upload to a hosting platform133. Get a live URL14 15**Popular options:**16- **Netlify** - Simple drag & drop deployment17- **GitHub Pages** - Free hosting with Git integration18- **Cloudflare Pages** - Fast global CDN19- **Vercel** - Requires Git integration20- And many others (Render, Railway, traditional web hosts, etc.)21 22Most platforms offer free tiers for static sites, automatic HTTPS, and custom domain support.23 24---25 26## Export Your Project27 28### ZIP Export (For Deployment)29 301. Open your project in OSW Studio312. Click the **⋮** menu icon on the project card323. Select **Export as ZIP**334. Save the file34 35The ZIP contains compiled HTML/CSS/JS ready for deployment:36- **Static/Handlebars**: Handlebars `.hbs` templates are pre-compiled using `/data.json` and excluded from the export37- **React/Preact/Svelte/Vue**: Source files (`.tsx`, `.svelte`, `.vue`) are bundled into a single `bundle.js` that the export references — the bundle is runtime-independent and works on any static host38- **Python/Lua**: These runtimes execute in the browser via WASM and cannot be deployed to external hosts — use ZIP export for offline use or self-host in Server Mode instead39 40### .osws Export (For Backup)41 42For backing up projects with full history (checkpoints, conversations):43 441. Click the **⋮** menu icon on the project card452. Select **Export** (JSON format)463. Save the `.osws` file47 48This format is for importing back into OSW Studio, not for deployment.49 50---51 52## Deploying to Netlify53 54**Simple drag & drop deployment:**55 561. Go to [netlify.com](https://netlify.com) and sign up572. On the dashboard, look for the **Sites** drop zone583. Extract your ZIP file to a folder594. Drag the folder into Netlify605. Wait for deployment61 62Your site will be live at `random-name-12345.netlify.app`. You can customize the subdomain or add a custom domain in settings.63 64**CLI deployment:**65```bash66npm install -g netlify-cli67cd your-extracted-folder68netlify deploy --prod69```70 71---72 73## Deploying to GitHub Pages74 75**Requires Git and GitHub account:**76 771. Extract your ZIP into a folder782. Initialize Git repo:79   ```bash80   cd your-website81   git init82   git add .83   git commit -m "Initial commit"84   ```85 863. Create a new repo at [github.com/new](https://github.com/new)87 884. Push to GitHub:89   ```bash90   git remote add origin https://github.com/yourusername/repo-name.git91   git branch -M main92   git push -u origin main93   ```94 955. Enable GitHub Pages:96   - Go to repo **Settings** → **Pages**97   - Source: **Deploy from a branch**98   - Branch: **main** → **/ (root)**99   - Click **Save**100 101Your site will be live at `yourusername.github.io/repo-name`102 103---104 105## Deploying to Cloudflare Pages106 1071. Go to [pages.cloudflare.com](https://pages.cloudflare.com) and sign up1082. Click **Create a project** → **Upload assets**1093. Extract your ZIP and drag the folder1104. Enter a project name and deploy111 112Your site goes live at `project-name.pages.dev`113 114For automatic deployments, connect a Git repository instead of uploading manually.115 116---117 118## Deploying to Vercel119 120Vercel requires Git integration (no direct ZIP upload):121 1221. Push your extracted site to GitHub/GitLab1232. Go to [vercel.com](https://vercel.com) and sign up1243. Click **Add New** → **Project**1254. Import your repository1265. Deploy127 128See [Vercel's documentation](https://vercel.com/docs) for detailed instructions.129 130---131 132## Custom Domains133 134All major platforms support custom domains:135 1361. Buy a domain from a registrar (Namecheap, Cloudflare, Porkbun, etc.)1372. In your hosting platform, add the custom domain1383. Configure DNS records as instructed by the platform1394. Wait for DNS propagation (usually minutes to hours)140 141**DNS setup typically requires:**142- `A` record or `ALIAS` for apex domain (`example.com`)143- `CNAME` record for www subdomain (`www.example.com`)144 145Free SSL certificates are included automatically by all recommended platforms.146 147---148 149## Updating Your Site150 151When you make changes:152 1531. Export a new ZIP from OSW Studio1542. Extract the files1553. Upload to your hosting platform156 157**Netlify/Cloudflare Pages**: Drag new folder to deploy dashboard158 159**GitHub Pages**: Commit and push changes:160```bash161git add .162git commit -m "Update site"163git push164```165 166**Vercel**: Push to your connected Git repository167 168---169 170## Troubleshooting171 172### Site Shows 404173 174**Check:** Is there an `index.html` file in the root of your deployed folder?175 176**Fix:** Ensure your main page is named `index.html`177 178### Assets Not Loading179 180**Check:** Browser console for 404 errors181 182**Common causes:**183- Files not uploaded (check deployed folder contents)184- Case sensitivity (use lowercase filenames on Linux hosts)185- Path issues (ensure assets are in the correct folders)186 187**Fix:** Verify all files from the ZIP were uploaded and folder structure is intact188 189### Custom Domain Not Working190 191**Check:** DNS configuration192 193**Fix:**1941. Verify DNS records match platform instructions1952. Wait for DNS propagation (up to 24 hours, usually faster)1963. Clear browser cache or try incognito mode1974. Check platform status page for issues198 199### Deploy Fails on Platform200 201**Check:** Platform build logs for specific errors202 203**Common causes:**204- Platform looking for a build script (OSW Studio exports are pre-built)205- Incorrect publish directory setting206 207**Fix:** Configure platform to serve the root directory as static files (no build step needed)208 209---210 211## Server Mode Alternative212 213**Want to publish sites directly from OSW Studio without exporting?**214 215OSW Studio's **Server Mode** lets you:216- Host OSW Studio on your own server217- Create and publish deployments at `/deployments/{id}/` directly218- Configure SEO, analytics, and custom domains per deployment219- Skip the export/upload cycle220 221See [Server Mode Documentation](?doc=server-mode) for setup instructions.222 223---224 225## Performance Tips226 227### Before Deploying228 229- **Optimize images**: Compress with [TinyPNG](https://tinypng.com) or similar230- **Use modern formats**: WebP for images when possible231- **Clean up code**: Remove unused files and commented code232 233### After Deploying234 235All recommended platforms automatically provide:236- Global CDN (content delivery network)237- Asset caching238- Compression (gzip/brotli)239- HTTP/2 or HTTP/3240 241No additional configuration needed.242 243---244 245## Next Steps246 247- Test your site on mobile devices248- Verify all links and forms work249- Submit sitemap to search engines (Google Search Console)250- Monitor traffic with analytics251 252**Continue learning:**253- [Working with AI](?doc=working-with-ai) - Improve your site254- [Projects](?doc=projects) - Manage multiple sites255- [Templates](?doc=templates) - Start new projects faster256