🎯 Betlify

Upload & host your pages instantly

\n\n

Uploading...

\n\n

\n\n \n

📁

Drag & Drop Your Folder

or click to select files manually

Contains: HTML, CSS, JS, images, fonts, etc.

\n\n \n\n

Want to integrate Betlify?

\n 📚 View API Documentation →\n

💡 Bookmark this page: https://brybod123--9c3ff1a062aa11f187aa1607ee4eb77e.web.val.run/ui

\n\n \n\n\n",4,["D",1780862445633],"branchVersion","label",[18],"pulls","branches",1,"forks","envVars",{"_192":26,"_194":26},"connections",{"_192":26,"_193":26},"count","unfilledCount","emptyCount",{"_36":213,"_13":214,"_66":215,"_46":-5,"_38":39,"_181":216,"_198":171,"_40":217,"_42":179,"_68":21,"_177":218,"_69":24,"_182":-5,"_200":219,"_17":220},{"_36":203,"_13":204,"_66":205,"_46":-5,"_38":39,"_181":206,"_198":171,"_40":207,"_42":208,"_68":209,"_177":210,"_69":24,"_182":-5,"_200":211,"_17":212},{"_36":176,"_13":18,"_66":67,"_46":-5,"_38":39,"_181":98,"_198":171,"_40":199,"_42":179,"_68":21,"_177":178,"_69":24,"_182":-5,"_200":201,"_17":202},"latest",["D",1780862445633],"children",[],[18],"246fea75-85c8-4d70-8206-376ae2a7afa7","main.ts","9c3ff1a0-62aa-11f1-87aa-1607ee4eb77e",18,["D",1780862414972],6,"http","import { blob } from \"https://esm.town/v/std/blob\";\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\ninterface PageData {\n html: string;\n css?: string;\n js?: string;\n assets: Record; // base64 encoded files\n}\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n const pathname = url.pathname;\n\n // GET /ui - Admin panel to upload pages\n if (pathname === \"/ui\") {\n return new Response(await readFile(\"./ui.html\"), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n }\n\n // GET /api/docs - API documentation\n if (pathname === \"/api/docs\") {\n const docs = `\n\n\n \n \n Betlify API Documentation\n \n\n\n

\n ← Back to Upload\n \n

📚 Betlify API Documentation

Upload and host static websites with HTML, CSS, JavaScript, and assets.

\n\n

Base URL

https://val.town/x/brybod123/Betlify

\n\n

Endpoints

\n\n

\n GET\n /ui\n

Upload interface for hosting pages

\n\n

\n POST\n /api/upload\n

Upload a new page with optional CSS, JS, and assets

\n \n

Request Format

Content-Type: multipart/form-data

\n \n

Form Fields

pageName (string) - Required. URL slug for your page\nhtml (file) - Required. HTML file (.html, .htm)\ncss (file) - Optional. CSS stylesheet (.css)\njs (file) - Optional. JavaScript file (.js)\nassets (file[]) - Optional. Images, fonts, etc.

\n\n

Example cURL Request

curl -X POST https://val.town/x/brybod123/Betlify/api/upload \\\n  -F \"pageName=my-portfolio\" \\\n  -F \"html=@index.html\" \\\n  -F \"css=@styles.css\" \\\n  -F \"js=@script.js\" \\\n  -F \"assets=@logo.png\"

\n\n

Response

{\n  \"success\": true,\n  \"url\": \"/pages/my-portfolio\",\n  \"fullUrl\": \"https://brybod123--9c3ff1a062aa11f187aa1607ee4eb77e.web.val.run/pages/my-portfolio\"\n}

\n\n

\n GET\n /pages/:pageName\n

Serve a hosted page with injected CSS, JS, and embedded assets

\n \n

Example

GET /pages/my-portfolio

\n \n

Response

Returns complete HTML with all styles, scripts, and images embedded as data URIs

\n\n

Supported Asset Types

Images: PNG, JPG, JPEG, GIF, SVG, WebP
Fonts: WOFF, WOFF2, TTF
Other: Any file type via base64 encoding

\n\n

How It Works

Upload your folder containing HTML, CSS, JS, and assets
Files are automatically detected and processed
CSS is injected into the HTML head
JavaScript is injected before closing body tag
All assets are converted to base64 data URIs
Page is stored in fast KV cache for instant retrieval

\n\n

Examples

\n\n

JavaScript Integration

const formData = new FormData();\nformData.append('pageName', 'my-site');\nformData.append('html', htmlFile);\nformData.append('css', cssFile);\nformData.append('assets', imageFile);\n\nfetch('/api/upload', {\n  method: 'POST',\n  body: formData\n})\n.then(res => res.json())\n.then(data => {\n  console.log('Live at:', data.fullUrl);\n});

\n\n

Python Integration

import requests\n\nfiles = {\n    'html': open('index.html', 'rb'),\n    'css': open('style.css', 'rb'),\n    'js': open('script.js', 'rb'),\n}\ndata = {'pageName': 'my-portfolio'}\n\nresponse = requests.post(\n    'https://val.town/x/brybod123/Betlify/api/upload',\n    data=data,\n    files=files\n)\nprint(response.json()['fullUrl'])

\n\n

\n Made with ❤️ on Val Town\n

\n\n`;\n return new Response(docs, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n }\n\n // POST /api/upload - Upload a new page\n if (pathname === \"/api/upload\" && req.method === \"POST\") {\n try {\n const formData = await req.formData();\n const pageName = formData.get(\"pageName\") as string;\n const htmlFile = formData.get(\"html\") as File;\n const cssFile = formData.get(\"css\") as File;\n const jsFile = formData.get(\"js\") as File;\n const assetFiles = formData.getAll(\"assets\") as File[];\n\n if (!pageName || !htmlFile) {\n return new Response(JSON.stringify({ error: \"Page name and HTML are required\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Read files\n const htmlContent = await htmlFile.text();\n const cssContent = cssFile ? await cssFile.text() : \"\";\n const jsContent = jsFile ? await jsFile.text() : \"\";\n\n // Process assets\n const assets: Record = {};\n for (const assetFile of assetFiles) {\n const arrayBuffer = await assetFile.arrayBuffer();\n const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));\n assets[assetFile.name] = base64;\n }\n\n const pageData: PageData = {\n html: htmlContent,\n css: cssContent,\n js: jsContent,\n assets,\n };\n\n // Save to blob storage\n await blob.setJSON(`page:${pageName}`, pageData);\n\n return new Response(JSON.stringify({ \n success: true, \n url: `/pages/${pageName}`,\n fullUrl: `${url.origin}/pages/${pageName}`\n }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // GET /pages/:pageName - Serve a hosted page\n if (pathname.startsWith(\"/pages/\")) {\n const pageName = pathname.slice(7); // Remove \"/pages/\"\n \n try {\n const pageData = await blob.getJSON(`page:${pageName}`) as PageData | null;\n \n if (!pageData) {\n return new Response(JSON.stringify({ error: \"Page not found\" }), {\n status: 404,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Build the final HTML with CSS and JS injected\n let html = pageData.html;\n\n // Inject CSS\n if (pageData.css) {\n html = html.replace(\"\", ``);\n }\n\n // Inject JS\n if (pageData.js) {\n html = html.replace(\"\", ``);\n }\n\n // Replace asset references with data URIs\n for (const [assetName, base64Data] of Object.entries(pageData.assets)) {\n const ext = assetName.split(\".\").pop()?.toLowerCase();\n const mimeTypes: Record = {\n \"png\": \"image/png\",\n \"jpg\": \"image/jpeg\",\n \"jpeg\": \"image/jpeg\",\n \"gif\": \"image/gif\",\n \"svg\": \"image/svg+xml\",\n \"webp\": \"image/webp\",\n \"woff\": \"font/woff\",\n \"woff2\": \"font/woff2\",\n \"ttf\": \"font/ttf\",\n };\n const mimeType = mimeTypes[ext || \"\"] || \"application/octet-stream\";\n const dataUri = `data:${mimeType};base64,${base64Data}`;\n html = html.replaceAll(assetName, dataUri);\n }\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // GET / - Redirect to UI\n if (pathname === \"/\") {\n return new Response(null, {\n status: 302,\n headers: { \"Location\": \"/ui\" },\n });\n }\n\n return new Response(\"Not found\", { status: 404 });\n}\n",[],[204],"c20418c7-6a33-4158-9517-159f6ce0b3ab","README.md","09e79550-62ab-11f1-950d-1607ee4eb77e",15,["D",1780862408804],"# 🎯 Betlify\n\nA lightweight hosting platform for uploading and instantly deploying HTML/CSS/JavaScript pages with assets. Just **drag and drop a folder** and get a live URL.\n\n## Features\n\n✨ **Super Simple**\n- Drag & drop your entire folder\n- Auto-detects HTML, CSS, and JavaScript\n- Uploads images, fonts, and assets automatically\n- Get a live URL instantly\n- No configuration required\n\n🚀 **Drag & Drop Interface**\n- Beautiful, intuitive upload experience\n- Auto-detect page name from HTML filename\n- Click to browse or drag folder directly\n- Real-time asset preview\n\n🔒 **Secure & Fast**\n- Pages stored in fast KV blob cache\n- Base64 encoding for all assets\n- Data URIs for asset delivery\n- Instant retrieval\n\n⚡ **Developer Friendly**\n- Full REST API with cURL examples\n- JavaScript and Python integration examples\n- Comprehensive API documentation\n- Multipart form upload support\n\n## How It Works\n\n1. **Go to Upload** - \n2. **Drag Your Folder** - Just drop your project folder (or click to browse)\n3. **Auto-Setup** - Page name, HTML, CSS, JS, and assets are automatically detected\n4. **Click Upload** - Host your page instantly\n5. **Share Link** - Get a live URL like `/pages/my-portfolio`\n\n## API Endpoints\n\n### `GET /ui`\nThe beautiful drag-and-drop upload interface.\n\n### `POST /api/upload`\nUpload a new page programmatically.\n\n**Request:**\n```\nmultipart/form-data:\n- pageName (string): URL slug for your page\n- html (file): Main HTML file (required)\n- css (file, optional): Stylesheet\n- js (file, optional): JavaScript\n- assets (file[], optional): Images, fonts, etc.\n```\n\n**Response:**\n```json\n{\n \"success\": true,\n \"url\": \"/pages/my-portfolio\",\n \"fullUrl\": \"https://brybod123--9c3ff1a062aa11f187aa1607ee4eb77e.web.val.run/pages/my-portfolio\"\n}\n```\n\n### `GET /api/docs`\nView full API documentation with examples.\n\n### `GET /pages/:pageName`\nServe a hosted page with all CSS, JS, and assets injected.\n\n## Example: Drag & Drop\n\n1. Create a folder with your files:\n ```\n my-portfolio/\n ├── index.html\n ├── styles.css\n ├── script.js\n └── logo.png\n ```\n\n2. Drag the entire folder onto the upload area\n3. Confirm page name and click \"⚡ Upload & Host\"\n4. Share your page: `https://...val.run/pages/my-portfolio`\n\n## Example: API Upload\n\n### cURL\n```bash\ncurl -X POST https://val.town/x/brybod123/Betlify/api/upload \\\n -F \"pageName=my-portfolio\" \\\n -F \"html=@index.html\" \\\n -F \"css=@styles.css\" \\\n -F \"js=@script.js\" \\\n -F \"assets=@logo.png\"\n```\n\n### JavaScript\n```javascript\nconst formData = new FormData();\nformData.append('pageName', 'my-portfolio');\nformData.append('html', htmlFile);\nformData.append('css', cssFile);\nformData.append('assets', imageFile);\n\nfetch('/api/upload', {\n method: 'POST',\n body: formData\n})\n.then(res => res.json())\n.then(data => console.log('Live at:', data.fullUrl));\n```\n\n### Python\n```python\nimport requests\n\nfiles = {\n 'html': open('index.html', 'rb'),\n 'css': open('styles.css', 'rb'),\n 'js': open('script.js', 'rb'),\n}\ndata = {'pageName': 'my-portfolio'}\n\nresponse = requests.post(\n 'https://val.town/x/brybod123/Betlify/api/upload',\n data=data,\n files=files\n)\nprint(response.json()['fullUrl'])\n```\n\n## Supported Asset Types\n\n- **Images**: PNG, JPG, GIF, SVG, WebP\n- **Fonts**: WOFF, WOFF2, TTF\n- **Other**: Any file type via base64\n\n## Technical Details\n\n- **Storage**: Val Town's blob KV cache for instant hosting\n- **Runtime**: Deno + TypeScript\n- **Asset Encoding**: Base64 data URIs (no separate HTTP requests)\n- **MIME Types**: Automatic detection\n- **CSS Injection**: Into HTML ``\n- **JS Injection**: Before closing `` tag\n- **Performance**: Cached retrieval, zero cold starts\n\n## What Makes Betlify Different\n\n| Feature | Betlify | Traditional Hosting |\n|---------|---------|-------------------|\n| Upload method | Drag & drop folder | Manual file upload |\n| File detection | Automatic | Manual selection |\n| Setup time | Instant | Minutes |\n| Asset handling | Base64 data URIs | Separate HTTP requests |\n| No sub-requests needed | ✓ | ✗ |\n| API available | ✓ | Often extra cost |\n| Custom domain support | Shared URL | ✓ |\n\n---\n\nMade with ❤️ on [Val Town](https://val.town)\n",[],[214],["D",1780862033022],{"_11":12,"_153":72},{"_11":12,"_149":-5,"_71":72,"_30":70,"_150":151,"_152":24},{"_42":98,"_13":16,"_36":39,"_141":106,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":14,"_148":12},"ctx",{"_56":-5,"_173":258,"_259":260,"_261":262,"_263":24,"_264":24,"_265":24,"_266":171,"_267":-5,"_268":-7,"_269":-7,"_270":26,"_271":24,"_272":24,"_273":-5,"_274":24,"_275":24,"_276":24,"_277":-5},"ENV",{"_229":230,"_231":232,"_233":16,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · ui.html