Tutoriales

Me defino como una persona curiosa por naturaleza. Aquí comparto lo que voy aprendiendo, contado desde mi experiencia, para que tú puedas repetirlo.

Instalación de OpenCode portable con Omniroute y OpenRouter

Guía completa para instalar OpenCode en un SSD externo de forma totalmente portable, añadir OmniRoute con Node 22 portable para gateway de modelos con fallback automático, y configurar OpenRouter como proveedor de modelos gratis (:free) con límites claros. Contada desde la experiencia: decisiones, problemas (crash Node 20, bug cmd.exe) y soluciones.

4 partes · 5/8/2026

  • opencode
  • omniroute
  • openrouter
  • portable
  • ssd
  • fallback
  • gratis
  • windows
  1. 01Instalación portable de opencode en SSD externoMontamos opencode 100% portable en J: con binario directo y lanzadores que aislan config, datos y caché sin tocar el host.
  2. 02OmniRoute portable + combo best-free-codingInstalamos OmniRoute en el SSD con Node 22 portable, configuramos la key de OpenRouter y creamos el combo best-free-coding con 3 modelos gratis y fallback automático.
  3. 03Configuración de OpenRouter en opencodeConectamos OpenRouter como proveedor de modelos :free en opencode y en OmniRoute, sin coste y con límites claros.
  4. 04Reglas de opencode para Windows y desarrolloCreamos dos archivos de reglas que guían a opencode: uno para PowerShell/Windows y otro para el entorno de desarrollo portátil en J:, con encoding UTF-8, módulos y flujo Git adaptado a solitario.

Tu web personal con Astro, GitHub Pages y Cloudflare

Guía paso a paso para construir una web personal estática, desplegarla en GitHub Pages y conectarla a un dominio propio en Cloudflare. Contada desde la experiencia: qué decidimos, qué problemas aparecieron y cómo los resolvimos.

16 partes · 7/8/2026

  • astro
  • css
  • seo
  • git
  • github actions
  • github pages
  • cloudflare
  • gsap
  • i18n
  • modo oscuro
  • view transitions
  1. 01Objetivo y decisiones de stackPor qué Astro, GitHub Pages y Cloudflare, y qué necesitas antes de empezar.
  2. 02Preparación del entornoNode.js, Git y el repositorio en GitHub listos antes de escribir una línea de Astro.
  3. 03Proyecto Astro desde ceroScaffold del proyecto, estructura de carpetas, .gitignore y una base configurable.
  4. 04Identidad visual con CSS modernoPaleta, tipografías y variables CSS: el sistema de diseño desde el primer día.
  5. 05Layout y componentesEl layout base con cabecera, navegación responsive y pie de página reutilizables.
  6. 06Datos privados fuera del repoVariables de entorno, .env, secretos y variables de GitHub Actions: contenido visible en la web, invisible en el código.
  7. 07Proyectos con la GitHub APICargar los repositorios en vivo, cachear en el navegador y manejar los estados de carga y error.
  8. 08SEO on-pageMeta tags, Open Graph, sitemap, robots.txt y JSON-LD para que la web aparezca bien en buscadores y redes.
  9. 09Despliegue con GitHub Pages y GitHub ActionsUn workflow que compila el sitio y lo publica solo, con cada push a la rama main.
  10. 10Dominio personalizado en CloudflareConectar tu dominio a GitHub Pages sin cambiar la URL, y los dos errores típicos que te vas a encontrar.
  11. 11Gestión de contenido y flujo GitCómo se actualiza una web estática sin panel de administración, con Git como único motor.
  12. 12CSS moderno y facelift visualCapas CSS, color-mix(), anidamiento, container queries, fuentes variables autohospedadas, header de cristal e iconos SVG.
  13. 13Modo oscuro con toggle y transiciones de páginaTema claro/oscuro con toggle persistente, tokens de color por tema, evitar el flash y añadir View Transitions entre páginas.
  14. 14Scroll reveal y filtro de proyectosAnimar la aparición al hacer scroll con IntersectionObserver y añadir filtros por tecnología y orden a la lista de proyectos.
  15. 15Animaciones modernas con GSAPIntegrar GSAP en Astro: entrada del hero con SplitText, parallax con ScrollTrigger, coexistir con el reveal y sobrevivir a las View Transitions.
  16. 16Sitio bilingüe con i18nEnrutado es/en con Astro, diccionario tipado, contenido localizado, hreflang y guardas de paridad para que los idiomas no se descuadren.

Bot de LaLiga con calendario de fútbol

Un bot serverless en Python que raspa el calendario de LaLiga, envía avisos por Telegram y sincroniza los horarios con Google Calendar, automatizado con GitHub Actions.

4 partes · 9/8/2026

  • python
  • scraping
  • telegram
  • google calendar
  • github actions
  • cron
  • automatización
  1. 01Bot de LaLiga: objetivo y scraping del calendarioUn bot serverless en Python que raspa el calendario de LaLiga desde El Mundo y extrae los partidos de cualquier equipo configurable.
  2. 02Bot de LaLiga: avisos por TelegramCrear un bot con @BotFather, obtener tu chat_id y enviar alertas de cambios de horario con la Bot API.
  3. 03Bot de LaLiga: sincronización con Google CalendarCuenta de servicio, calendario dedicado y la lógica de delta que crea, actualiza y avisa cuando cambia un horario.
  4. 04Bot de LaLiga: automatización con GitHub ActionsEl workflow con cron, los secretos del repositorio y la configuración local con .env para que el bot corra solo.

LeXi: un comunicador AAC offline-first

Serie completa sobre cómo construí LeXi, una PWA de comunicación aumentativa con tarjetas con sonido, teclado y TTS, sobre Cloudflare Pages, D1 y R2. Contada desde la experiencia: decisiones, problemas (binds, FK, Service Worker, huso horario) y soluciones.

8 partes · 15/8/2026

  • astro
  • svelte
  • pwa
  • d1
  • r2
  • arasaac
  • aac
  • service worker
  • indexeddb
  1. 01LeXi: objetivo y arquitectura de un comunicador AACPor qué construir un comunicador AAC como PWA offline-first sobre Cloudflare Pages, D1 y R2, y el stack que elegimos.
  2. 02LeXi: esqueleto Astro + Svelte y sistema de temasMontar el proyecto Astro a mano, añadir Svelte 5, Cloudflare Pages con wrangler.json y un selector de temas por CSS custom properties.
  3. 03LeXi: D1 y R2, los bindings de CloudflareEl esquema SQL en D1, las migraciones locales y remotas, y los endpoints de audio en R2 con subida vía proxy.
  4. 04LeXi: el seed ARASAAC, el catálogo precargadoDescargar los pictogramas de ARASAAC, generarlos en un manifest y un SQL idempotente, y detectar cambios en CI.
  5. 05LeXi: grid de tarjetas, teclado virtual y TTSEl tablero de tarjetas con sonido, el teclado español, la voz TTS y el sistema de códigos de invitación con modo demo.
  6. 06LeXi: el editor de tarjetas con voz personalizadaGrabar la voz de la familia con MediaRecorder, pulsación larga para editar, caché de audio offline y reproducción palabra a palabra.
  7. 07LeXi: sincronización offline-first y estadísticasReintento de sync al reconectar, cola de audio pendiente, endpoint de estadísticas y el bug de la FK que rompía el sync en producción.
  8. 08LeXi: PWA instalable y el dominio propioSoporte iOS, caché del service worker en un dominio personalizado, el bug del SW que no se registraba y el huso horario del bot.