"Este canal no tiene patrocinadores. Existe gracias a ti."
Un solo archivo index.html. Sin backend, sin base de datos, sin build, sin cookies.
Tú pones tus enlaces de pago y tu público te apoya. Nada más — y nada menos.
Una página de apoyo económico para tu canal, tu blog o tu proyecto, con estética cyberpunk/nocturna y textos honestos: no vendes nada, no hay anuncios, solo pides apoyo voluntario.
Está pensada para el creador que quiere sostener su contenido sin convertirse en vendedor: sin cursos, sin merchandising forzado, sin patrocinios que condicionen lo que publicas.
| Sección | Qué hace |
|---|---|
| 🎯 Meta del trimestre | Barra de progreso con objetivo editable ($0 / $400) |
| 💵 Aportación puntual | Selector de importes ($3 / $5 / $10 / $25) + campo libre, con el botón que lleva a tu Ko-fi con el monto ya puesto |
| 💳 6 métodos de pago | Ko-fi · PayPal · Mercado Pago · Stripe · Bizum · Cripto |
| 🔁 Apoyo mensual | 3 niveles tipo membresía (Café $2 · Sostén $5 · Productor $15) |
| 📊 Transparencia | Cuadro "en qué va el dinero": equipo, software, horas |
| 🙏 Muro de agradecimiento | Nombres de quien apoya (con su permiso) |
| ⚖️ Aviso legal integrado | Aportaciones voluntarias, no reembolsables, no deducibles |
| 📱 Responsive | Móvil primero, sin frameworks |
- ❌ Backend, base de datos o servidor propio → nada que mantener ni que hackear
- ❌ Procesamiento de pagos → el cobro lo hace tu plataforma (Ko-fi, PayPal…)
- ❌ Cookies, analytics, píxeles o trackers → cero recopilación de datos
- ❌ Fuentes externas, CDNs o imágenes remotas → funciona hasta sin internet una vez cargada
- ❌ Build, bundlers o node_modules → abres el archivo y ya
git clone https://github.com/TU_USUARIO/TU_REPO.git
cd TU_REPO
# opción 1: ábrela directamente
xdg-open index.html # Linux
open index.html # macOS
start index.html # Windows
# opción 2: servidor local
python3 -m http.server 8000
# → http://localhost:8000Todo lo personalizable está marcado con [CORCHETES MAYÚSCULAS].
Busca y reemplaza:
| Placeholder | Qué poner | Dónde aparece |
|---|---|---|
[TU MARCA] |
El nombre de tu canal o proyecto | <title> de la pestaña |
[RAZÓN SOCIAL] |
Tu nombre legal o el de tu empresa | Pie de página y aviso legal |
[EMAIL DE CONTACTO] |
Un correo real | Pie de página |
| Placeholder | Qué poner |
|---|---|
[TUUSUARIO] |
Tu usuario de Ko-fi (va dentro de CFG.kofiBase) |
[TU_LINK_KOFI] |
URL completa de tu página Ko-fi |
[TU_LINK_KOFI_MEMBERSHIP] |
URL de tus membresías en Ko-fi |
[TU_LINK_PAYPAL] |
Tu paypal.me/tunombre |
[TU_LINK_MERCADOPAGO] |
Tu link de cobro de Mercado Pago (LATAM) |
[TU_LINK_STRIPE] |
Tu Payment Link de Stripe |
[TU_LINK_BIZUM] |
Instrucciones o link de Bizum (España) |
[TU_LINK_CRIPTO] |
Página o texto con tus direcciones (indica la red en [TRC20/ERC20]) |
[TU_CANAL_YOUTUBE] |
URL de tu canal (botón final) |
[+34 600 000 000] |
Tu número de Bizum, si lo usas |
💡 Un método que no uses: bórralo. Cada tarjeta es un bloque
<a class="m">…</a>; eliminarlo no rompe nada, la cuadrícula se reacomoda sola.
const CFG = {
kofiBase: "https://ko-fi.com/TUUSUARIO", // el botón usa ?amount=N automáticamente
currency: "$", // "$", "€", "MX$", "S/…"
metaObjetivo: 400, // tu meta del trimestre
metaRecaudado: 0, // ← ACTUALÍZALO A MANO cada vez que cobres
metaTexto: "cámara nueva para el canal",
transEquipo: 0, // transparencia: cuánto llevas gastado en…
transSoftware: 0, // …equipo, software y…
transHoras: 0, // …horas de trabajo
personasApoyando: 0 // cuánta gente te sostiene este trimestre
};Los botones $3 / $5 / $10 / $25 y sus descripciones ("Un café ☕", "El alquiler
del micro de esta semana"…) son HTML plano en el bloque <div class="amts">.
Cámbialos por lo que tenga sentido para ti — los textos concretos convierten
mucho mejor que los genéricos.
Abajo a la derecha hay una pastilla amarilla que dice "Personalízame". Es para ti, no para tu público. Borra esta línea:
<div class="edit">⚙ Personalízame: busca <b>[CORCHETES]</b> en el código</div>Y de paso, comprueba que no quede ningún [CORCHETE] sin rellenar:
grep -oE '\[[A-ZÁÉÍÓÚ0-9 _./+]{3,}\]' index.htmlSi no imprime nada, estás listo. ✅
No hay backend, así que tú actualizas los números en CFG cuando cobras.
Es una decisión de diseño, no una limitación:
- cero mantenimiento (no hay servidor que se caiga ni que pagar)
- cero privacidad comprometida (nadie puede consultar tus cifras reales)
- tú decides qué mostrar y cuándo
Si algún día quieres automatizarlo, Ko-fi tiene API pública: un script que
lea tu total y reescriba metaRecaudado antes de cada git push son ~20 líneas.
# 1. crea el repo en github.com (vacío, sin README)
# 2. sube tu página
git init
git add index.html README.md LICENSE
git commit -m "🐙 página de apoyo del canal"
git branch -M main
git remote add origin https://github.com/TU_USUARIO/TU_REPO.git
git push -u origin main3. En GitHub: Settings → Pages
4. Source: Deploy from a branch
5. Branch: main · carpeta / (root) → Save
6. En ~1 minuto: https://TU_USUARIO.github.io/TU_REPO/
Pon ese link en la descripción de tu canal, en la ficha de cada video y en tu firma de correo.
Arrastra la carpeta a app.netlify.com/drop y listo. Cualquier host estático sirve: es un único archivo.
Sube index.html a la raíz de tu hosting o configura el dominio personalizado
en Pages/Netlify. Al no haber rutas ni assets, funciona en cualquier subcarpeta.
- La página no envía, almacena ni procesa ningún dato de quien la visita.
- Los clics en los botones salen directamente a tu plataforma de cobro, que aplica sus propias políticas (Ko-fi, PayPal, Stripe…).
- El pie incluye el descargo que protege a ambas partes: las aportaciones son voluntarias, no reembolsables y no deducibles fiscalmente para quien las hace.
- Si aceptas donaciones de forma recurrente, consulta tu obligación fiscal local: en la mayoría de países son ingreso declarable, aunque se llamen "donaciones".
.
├── index.html ← TODO el proyecto: HTML + CSS + JS en un archivo (~19 KB)
├── README.md ← este documento
├── LICENSE ← MIT
├── .gitignore
└── docs/
└── captura.png ← (opcional) pon aquí tu captura y enlázala arriba
Para añadir tu captura al README:
# guarda la captura en docs/captura.png y descomenta esta línea al inicio:
# - Modo "modo claro" con un interruptor
- Versión en inglés (
index.en.html) con selector de idioma - Script opcional que sincronice
metaRecaudadodesde la API de Ko-fi - Generador de QR por método de pago (para imprimir y poner en tus directos)
- Plantilla de informe trimestral de transparencia
Hecho a mano para el ecosistema Nautilus Tech 🐙 — software artesanal, local y sin humo.
Licencia MIT. Úsala, modifícala y publícala con tu canal, aunque sea de otro tema, otro idioma u otra plataforma. Si te sirve para sostener tu contenido, ya cumplió su propósito.
Si este README te ahorra tiempo, ya sabes cómo funciona esto. 😉