chenoaventuras.com
Sitio estático de Chenoaventuras — marca de contenido de viajes en Instagram.
Sin framework ni paso de build: HTML + CSS + un JS pequeño. Se sirve tal cual
(desplegado en Vercel).
Estructura
index.html Inicio (hero + curiosidades + destacados + equipo + descuentos + últimas publicaciones + newsletter)
servicios.html Servicios + #dron (certificación A1/A3) + #descuentos
equipo.html Equipo con el que viaja
contacto.html "Soy Cheno" + cifras + formulario (demo) — unifica Sobre mí y Contacto
vercel.json Redirecciones 301 de las URLs antiguas (/destinos, /blog, /sobre-mi)
assets/
css/styles.css Toda la hoja de estilos (tokens de color y tipografía arriba)
js/main.js Menú, "¿Sabías que…?", últimas publicaciones IG, reveal, año
fonts/ Inter Black + Poppins self-host (ver su README)
img/ Imágenes PROVISIONALES (ver assets/img/README.md)
img/edges/ Divisores SVG de "papel rasgado"
img/instagram/ Miniaturas descargadas por la GitHub Action (se crea sola)
data/instagram.json Últimas 3 publicaciones (la actualiza la Action a diario)
scripts/fetch-instagram.mjs Descarga las publicaciones vía API de Instagram
.github/workflows/instagram.yml Cron diario que ejecuta el script y hace push
Menú
Inicio · Aventuras · Curiosidades · Servicios · Equipo · Contacto.
Arriba, iconos de Instagram y TikTok; en el pie, los cuatro:
Instagram, YouTube, TikTok y Facebook.
Curiosidades del hero ("¿Sabías que…?")
assets/js/main.js tiene un array CURIOSIDADES (ciudades españolas, cultura,
fauna, pueblos, demografía). Cada día se eligen 3 de forma determinista según
la fecha (día local) y la barra va alternando entre ellas. Añadir/editar frases
en ese array. Justo bajo la barra "¿Sabías que…?" del hero hay un cronómetro
([data-curios-clock]) que cuenta hasta la próxima medianoche local, cuando
entra el nuevo trío.
Últimas publicaciones de Instagram (automático)
.github/workflows/instagram.yml corre cada día: llama a la API de Instagram,
descarga las 3 últimas publicaciones y sus miniaturas, escribe
assets/data/instagram.json y hace git push si hay cambios. Vercel redespliega.
Los reels nuevos NO salen solos en la inicio. El listado completo se actualiza solo,
pero la inicio (carrusel y «Lo último») solo muestra los reels de la lista cerrada
SHOW_ON_HOME de scripts/fetch-instagram.mjs. Para poner uno, añade su código
corto (instagram.com/reel/<CÓDIGO>/) a esa lista y a assets/data/instagram.json
("home": true).
Falta configurar (en Settings → Secrets and variables → Actions del repo):
| Secret | Qué es |
|---|
IG_ACCESS_TOKEN | Long-lived access token de la API de Instagram con Instagram Login (cuenta profesional). Caduca a los ~60 días → hay que refrescarlo. |
IG_USER_ID | (opcional) ID del usuario de Instagram; por defecto me. |
Sin el secret, la Action no falla: simplemente no toca nada y la web muestra los
3 posts de ejemplo de instagram.json.
Pendiente (marcado como placeholder en el propio sitio)
- Fotos y logo reales. Todo
assets/img/ son recortes temporales de las
maquetas de Figma. Mapa en assets/img/README.md.
- Descuentos: ya con códigos reales (Holafly
CHENOAVENTURAS, GetYourGuide
CHENOAVENTURAS5, Insta360 INRSG28LBE2) y el enlace de afiliado de
DiscoverCars. Cada tarjeta es un <details> que se despliega al pulsar;
el botón "Copiar" lo maneja main.js. Editar en index.html y
servicios.html (mismo bloque en ambos).
- Formularios. Newsletter y contacto solo muestran "¡Vamos a la aventura!";
todavía no guardan el correo ni avisan. Pendiente elegir servicio/backend.
- Contenido real de aventuras, equipo, biografía y cifras.
- Refresco del token de Instagram cada ~50 días (o automatizarlo).
SEO / que salga en Google
Ya incluido en el repo:
robots.txt + sitemap.xml (todas las páginas).- Por página:
<title> con la marca delante, meta description, canonical,
Open Graph + Twitter Card (assets/img/og-portada.jpg, provisional) y favicon
(foto de Cheno recortada — assets/img/favicon-16/32/180/512.png; fuente en
assets/img/cheno-perfil.jpg).
index.html lleva datos estructurados JSON-LD (WebSite + Person con
sameAs a Instagram/YouTube/TikTok/Facebook) para que Google asocie la marca
a los perfiles y no la confunda con "chocoaventuras".
Falta hacerlo a mano (esto es lo que hace que aparezca):
- Google Search Console — https://search.google.com/search-console
- Añadir la propiedad
chenoaventuras.com (verificación por DNS TXT en Vercel,
o pegando aquí el <meta name="google-site-verification"> que dé Google).
- Sitemaps → enviar
sitemap.xml.
- Inspección de URLs → pegar
https://www.chenoaventuras.com/ → Solicitar indexación.
- Confirmar en Vercel que el dominio
chenoaventuras.com (y www) apunta al
proyecto y que uno redirige al otro (dominio principal único).
- Enlazar la web desde las biografías de Instagram, YouTube, TikTok y
Facebook: es el factor nº 1 para un dominio nuevo.
- Paciencia: un dominio nuevo suele tardar 1–4 semanas en indexarse.
- Opcional: Bing Webmaster Tools (mismo proceso, y cubre también a otros).
Diseño
Basado en la "Opción 2" del Figma. Paleta: verde oliva #77854f, papel
#efece7, verde-azulado profundo en fotos, footer #20261f.
Tipografías de marca (las de @chenoaventuras): Inter Black 900 para titulares
y el wordmark, Poppins (600 subtítulos/menú/botones, 400/500 cuerpo). Inter y
Poppins 600/500‑ital self-hosted en assets/fonts/; Poppins 400/500 rectos desde
Google Fonts.
