Skip to content

Instantly share code, notes, and snippets.

@nicobailon

nicobailon/temp-hosting-comparison.html

Created March 5, 2026 06:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nicobailon/d5986922a39b85678832ce30edd057aa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nicobailon/d5986922a39b85678832ce30edd057aa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
temp-hosting-comparison.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temp HTML Hosting Comparison — Cloudflare vs Vercel vs GitHub Pages</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--font-body: 'DM Sans', system-ui, sans-serif;
--font-mono: 'Fira Code', 'SF Mono', Consolas, monospace;
--bg: #fafaf9;
--surface: #ffffff;
--surface2: #f5f5f4;
--surface-elevated: #ffffff;
--border: rgba(0, 0, 0, 0.08);
--border-bright: rgba(0, 0, 0, 0.15);
--text: #1c1917;
--text-dim: #78716c;
--accent: #0d9488;
--accent-dim: rgba(13, 148, 136, 0.08);
--cloudflare: #f6821f;
--cloudflare-dim: rgba(246, 130, 31, 0.1);
--vercel: #000000;
--vercel-dim: rgba(0, 0, 0, 0.06);
--github: #238636;
--github-dim: rgba(35, 134, 54, 0.1);
--green: #16a34a;
--green-dim: rgba(22, 163, 74, 0.08);
--amber: #d97706;
--amber-dim: rgba(217, 119, 6, 0.08);
--red: #dc2626;
--red-dim: rgba(220, 38, 38, 0.08);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0c0a09;
--surface: #1c1917;
--surface2: #292524;
--surface-elevated: #292524;
--border: rgba(255, 255, 255, 0.08);
--border-bright: rgba(255, 255, 255, 0.15);
--text: #fafaf9;
--text-dim: #a8a29e;
--accent: #14b8a6;
--accent-dim: rgba(20, 184, 166, 0.12);
--cloudflare: #f6821f;
--cloudflare-dim: rgba(246, 130, 31, 0.15);
--vercel: #ffffff;
--vercel-dim: rgba(255, 255, 255, 0.08);
--github: #3fb950;
--github-dim: rgba(63, 185, 80, 0.15);
--green: #4ade80;
--green-dim: rgba(74, 222, 128, 0.12);
--amber: #fbbf24;
--amber-dim: rgba(251, 191, 36, 0.12);
--red: #f87171;
--red-dim: rgba(248, 113, 113, 0.12);
}
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
padding: 40px;
min-height: 100vh;
line-height: 1.6;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.animate {
animation: fadeUp 0.4s ease-out both;
animation-delay: calc(var(--i, 0) * 0.06s);
}
@media (prefers-reduced-motion: reduce) {
.animate { animation: none; opacity: 1; }
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
font-size: 36px;
font-weight: 700;
letter-spacing: -1px;
margin-bottom: 8px;
}
.subtitle {
color: var(--text-dim);
font-size: 16px;
margin-bottom: 40px;
}
/* Hero Section */
.hero {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
margin-bottom: 32px;
background-image: radial-gradient(ellipse at 30% 0%, var(--accent-dim) 0%, transparent 50%);
}
.hero h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.hero h2::before {
content: '⚡';
font-size: 24px;
}
.recommendation {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.rec-card {
background: var(--surface2);
border-radius: 12px;
padding: 20px;
border-left: 4px solid;
}
.rec-card--cloudflare { border-left-color: var(--cloudflare); }
.rec-card--vercel { border-left-color: var(--accent); }
.rec-card--github { border-left-color: var(--github); }
.rec-card__title {
font-weight: 600;
font-size: 14px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.rec-card__use {
font-size: 13px;
color: var(--text-dim);
}
/* Comparison Cards */
.platforms {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.platform-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
position: relative;
overflow: hidden;
}
.platform-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.platform-card--cloudflare::before { background: var(--cloudflare); }
.platform-card--vercel::before { background: var(--accent); }
.platform-card--github::before { background: var(--github); }
.platform-card__header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.platform-card__logo {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
}
.platform-card--cloudflare .platform-card__logo { background: var(--cloudflare-dim); color: var(--cloudflare); }
.platform-card--vercel .platform-card__logo { background: var(--vercel-dim); color: var(--vercel); }
.platform-card--github .platform-card__logo { background: var(--github-dim); color: var(--github); }
.platform-card__name {
font-size: 20px;
font-weight: 700;
}
.platform-card__method {
font-size: 12px;
color: var(--text-dim);
font-family: var(--font-mono);
}
.platform-card__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
.stat {
text-align: center;
padding: 12px;
background: var(--surface2);
border-radius: 8px;
}
.stat__value {
font-size: 24px;
font-weight: 700;
color: var(--accent);
}
.stat__label {
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 2px;
}
.platform-card__steps {
margin-bottom: 20px;
}
.platform-card__steps h4 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-dim);
margin-bottom: 12px;
}
.step {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
font-size: 13px;
}
.step__num {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent-dim);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
}
.platform-card__cli {
background: var(--surface2);
border-radius: 8px;
padding: 12px;
font-family: var(--font-mono);
font-size: 12px;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
}
.platform-card__cli code {
color: var(--accent);
}
.platform-card__details {
border-top: 1px solid var(--border);
padding-top: 16px;
margin-top: 16px;
}
.detail-row {
display: flex;
justify-content: space-between;
font-size: 13px;
padding: 6px 0;
}
.detail-row__label {
color: var(--text-dim);
}
.detail-row__value {
font-weight: 500;
text-align: right;
}
/* Comparison Table */
.table-section {
margin-bottom: 40px;
}
.table-section h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 16px;
}
.table-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.table-scroll {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
th {
background: var(--surface2);
font-weight: 600;
text-align: left;
padding: 14px 16px;
border-bottom: 2px solid var(--border-bright);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-dim);
}
td {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
tbody tr:last-child td {
border-bottom: none;
}
tbody tr:nth-child(even) {
background: var(--surface2);
}
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono);
}
.badge--green { background: var(--green-dim); color: var(--green); }
.badge--amber { background: var(--amber-dim); color: var(--amber); }
.badge--red { background: var(--red-dim); color: var(--red); }
.badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* Verdict */
.verdict {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
border-left: 4px solid var(--cloudflare);
}
.verdict h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 16px;
}
.verdict p {
color: var(--text-dim);
margin-bottom: 16px;
font-size: 15px;
}
.verdict__winner {
display: flex;
align-items: center;
gap: 12px;
background: var(--cloudflare-dim);
padding: 16px 20px;
border-radius: 10px;
margin-top: 20px;
}
.verdict__winner-icon {
font-size: 32px;
}
.verdict__winner-text h3 {
font-size: 18px;
font-weight: 700;
color: var(--cloudflare);
}
.verdict__winner-text p {
font-size: 13px;
color: var(--text-dim);
margin: 0;
}
@media (max-width: 900px) {
.platforms { grid-template-columns: 1fr; }
.recommendation { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="container">
<h1 class="animate" style="--i:0">Temporary HTML Hosting</h1>
<p class="subtitle animate" style="--i:1">Comparing the fastest ways to deploy a single self-contained HTML file</p>
<div class="hero animate" style="--i:2">
<h2>Quick Recommendation</h2>
<div class="recommendation">
<div class="rec-card rec-card--cloudflare">
<div class="rec-card__title">🏆 Cloudflare Pages</div>
<div class="rec-card__use">Best for: Absolute fastest deploy. Drag-and-drop in browser, no CLI, no git. Live URL in under 30 seconds.</div>
</div>
<div class="rec-card rec-card--vercel">
<div class="rec-card__title">⚡ Vercel CLI</div>
<div class="rec-card__use">Best for: CLI power users. One command from terminal. Great if you already have Vercel CLI installed.</div>
</div>
<div class="rec-card rec-card--github">
<div class="rec-card__title">📦 GitHub Pages</div>
<div class="rec-card__use">Best for: Permanent hosting with version control. Takes longer but integrates with your git workflow.</div>
</div>
</div>
</div>
<div class="platforms">
<div class="platform-card platform-card--cloudflare animate" style="--i:3">
<div class="platform-card__header">
<div class="platform-card__logo">CF</div>
<div>
<div class="platform-card__name">Cloudflare Pages</div>
<div class="platform-card__method">Direct Upload (drag-and-drop)</div>
</div>
</div>
<div class="platform-card__stats">
<div class="stat">
<div class="stat__value">&lt;30s</div>
<div class="stat__label">Time to URL</div>
</div>
<div class="stat">
<div class="stat__value">0</div>
<div class="stat__label">CLI Required</div>
</div>
</div>
<div class="platform-card__steps">
<h4>Steps</h4>
<div class="step"><span class="step__num">1</span> Log into Cloudflare Dashboard</div>
<div class="step"><span class="step__num">2</span> Workers & Pages → Create → Direct Upload</div>
<div class="step"><span class="step__num">3</span> Drag your HTML file/folder</div>
<div class="step"><span class="step__num">4</span> Click Deploy — done!</div>
</div>
<div class="platform-card__cli">
No CLI needed! Browser-only workflow.
<br><br>
Optional CLI: <code>wrangler pages deploy ./dist</code>
</div>
<div class="platform-card__details">
<div class="detail-row">
<span class="detail-row__label">URL Format</span>
<span class="detail-row__value">project.pages.dev</span>
</div>
<div class="detail-row">
<span class="detail-row__label">Git Required</span>
<span class="detail-row__value">No</span>
</div>
<div class="detail-row">
<span class="detail-row__label">Expiration</span>
<span class="detail-row__value">Permanent</span>
</div>
<div class="detail-row">
<span class="detail-row__label">Free Tier</span>
<span class="detail-row__value">Unlimited sites</span>
</div>
</div>
</div>
<div class="platform-card platform-card--vercel animate" style="--i:4">
<div class="platform-card__header">
<div class="platform-card__logo">▲</div>
<div>
<div class="platform-card__name">Vercel</div>
<div class="platform-card__method">CLI Deploy</div>
</div>
</div>
<div class="platform-card__stats">
<div class="stat">
<div class="stat__value">&lt;1m</div>
<div class="stat__label">Time to URL</div>
</div>
<div class="stat">
<div class="stat__value">1</div>
<div class="stat__label">CLI Commands</div>
</div>
</div>
<div class="platform-card__steps">
<h4>Steps (first time)</h4>
<div class="step"><span class="step__num">1</span> npm i -g vercel</div>
<div class="step"><span class="step__num">2</span> vercel login</div>
<div class="step"><span class="step__num">3</span> Create folder with index.html</div>
<div class="step"><span class="step__num">4</span> Run <code>vercel</code> — done!</div>
</div>
<div class="platform-card__cli">
<code>cd my-folder && vercel</code>
<br><br>
Production: <code>vercel --prod</code>
</div>
<div class="platform-card__details">
<div class="detail-row">
<span class="detail-row__label">URL Format</span>
<span class="detail-row__value">project-hash.vercel.app</span>
</div>
<div class="detail-row">
<span class="detail-row__label">Git Required</span>
<span class="detail-row__value">No</span>
</div>
<div class="detail-row">
<span class="detail-row__label">Expiration</span>
<span class="detail-row__value">Configurable (30d default)</span>
</div>
<div class="detail-row">
<span class="detail-row__label">Free Tier</span>
<span class="detail-row__value">100GB BW/mo</span>
</div>
</div>
</div>
<div class="platform-card platform-card--github animate" style="--i:5">
<div class="platform-card__header">
<div class="platform-card__logo">GH</div>
<div>
<div class="platform-card__name">GitHub Pages</div>
<div class="platform-card__method">gh CLI + Pages</div>
</div>
</div>
<div class="platform-card__stats">
<div class="stat">
<div class="stat__value">1-2m</div>
<div class="stat__label">Time to URL</div>
</div>
<div class="stat">
<div class="stat__value">2+</div>
<div class="stat__label">CLI Commands</div>
</div>
</div>
<div class="platform-card__steps">
<h4>Steps</h4>
<div class="step"><span class="step__num">1</span> Create folder with index.html</div>
<div class="step"><span class="step__num">2</span> gh repo create mypage --public --source=. --push</div>
<div class="step"><span class="step__num">3</span> Enable Pages in repo Settings</div>
<div class="step"><span class="step__num">4</span> Wait 1-5 min for build</div>
</div>
<div class="platform-card__cli">
<code>gh repo create mypage --public --source=. --push</code>
<br><br>
Then enable Pages in Settings → Pages
</div>
<div class="platform-card__details">
<div class="detail-row">
<span class="detail-row__label">URL Format</span>
<span class="detail-row__value">user.github.io/repo</span>
</div>
<div class="detail-row">
<span class="detail-row__label">Git Required</span>
<span class="detail-row__value">Yes</span>
</div>
<div class="detail-row">
<span class="detail-row__label">Expiration</span>
<span class="detail-row__value">Permanent</span>
</div>
<div class="detail-row">
<span class="detail-row__label">Free Tier</span>
<span class="detail-row__value">1GB site, 100GB BW/mo</span>
</div>
</div>
</div>
</div>
<div class="table-section animate" style="--i:6">
<h2>Feature Comparison</h2>
<div class="table-wrap">
<div class="table-scroll">
<table>
<thead>
<tr>
<th>Feature</th>
<th>Cloudflare Pages</th>
<th>Vercel</th>
<th>GitHub Pages</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Speed to Deploy</strong></td>
<td><span class="badge badge--green">Fastest</span></td>
<td><span class="badge badge--green">Fast</span></td>
<td><span class="badge badge--amber">Slower</span></td>
</tr>
<tr>
<td><strong>CLI Required</strong></td>
<td>No (optional wrangler)</td>
<td>Yes (vercel CLI)</td>
<td>Yes (gh CLI)</td>
</tr>
<tr>
<td><strong>Git Repo Required</strong></td>
<td>No</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td><strong>Drag & Drop</strong></td>
<td><span class="badge badge--green">Yes</span></td>
<td><span class="badge badge--amber">Dashboard only</span></td>
<td><span class="badge badge--red">No</span></td>
</tr>
<tr>
<td><strong>Custom Domain</strong></td>
<td>Yes (free)</td>
<td>Yes (free)</td>
<td>Yes (free)</td>
</tr>
<tr>
<td><strong>HTTPS</strong></td>
<td>Automatic</td>
<td>Automatic</td>
<td>Automatic</td>
</tr>
<tr>
<td><strong>Preview Deployments</strong></td>
<td>Yes</td>
<td>Yes (every deploy)</td>
<td>No (only production)</td>
</tr>
<tr>
<td><strong>Global CDN</strong></td>
<td>340+ locations</td>
<td>Global edge</td>
<td>Fastly CDN</td>
</tr>
<tr>
<td><strong>Best For</strong></td>
<td>Quick one-off shares</td>
<td>Developer workflow</td>
<td>Permanent projects</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="verdict animate" style="--i:7">
<h2>Verdict for Visual Explainer Pages</h2>
<p>
For sharing visual-explainer HTML pages quickly, <strong>Cloudflare Pages Direct Upload</strong> is the winner.
No CLI installation, no git repo, no build step — just drag your HTML file into the browser and get a live URL in seconds.
</p>
<p>
If you're already in a terminal and have Vercel CLI installed, <code>vercel</code> is equally fast.
GitHub Pages is best when you want permanent hosting with version history, but the extra setup time makes it less ideal for quick temporary shares.
</p>
<div class="verdict__winner">
<div class="verdict__winner-icon">🏆</div>
<div class="verdict__winner-text">
<h3>Cloudflare Pages (Direct Upload)</h3>
<p>Drag-and-drop → Live URL in &lt;30 seconds. No CLI, no git, no config.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment