Podcast · Fe cristiana

Perfectos PodcastUn podcast cristiano con devocional diario, versículos y episodios navegables

Sitio estático del podcast cristiano Perfectos Podcast: 16 episodios con versículos y preguntas frecuentes, y 365 oraciones diarias listas para compartir.

Tecnologías

  • Astro 7
  • TypeScript
  • MDX
  • CSS sin framework
  • Satori
  • resvg-js
  • @astrojs/sitemap
  • Fontsource
  • React 19 (solo en el build)
  • nginx
  • Docker
  • Railway
  • Cloudflare
  • Google Analytics 4
  • Microsoft Clarity
Portada del sitio de Perfectos Podcast, podcast cristiano, con filas de miniaturas de episodios y paleta celeste
  • 365

    oraciones diarias

  • 21

    páginas por libro de la Biblia

  • 16

    episodios

  • 44

    URLs en el sitemap

Mi rol

Diseño y desarrollo del sitio en Azirgo SAS: identidad visual, sitio estático en Astro, devocional diario con imágenes generadas en el build, SEO y despliegue.

El problema

Perfectos Podcast estrena un episodio cada domingo. El sitio tenía que ir más allá del estreno: dar un motivo para volver cada día, llevar cada episodio a texto con sus versículos y sus preguntas, y ser fácil de compartir por WhatsApp, que es por donde se reenvían las oraciones. Todo sin convertir un sitio de contenido en una aplicación que haya que mantener.

Qué construí

  • Devocional diario: 365 declaraciones con su oración y su versículo, del 29 de julio de 2026 al 28 de julio de 2027, cada una con página propia y botón para compartirla por WhatsApp.
  • Una imagen para compartir por cada día, generada en el build con el logo, la fecha, el título de la declaración y su versículo.
  • /oraciones con la oración de hoy y 21 páginas por libro de la Biblia - Salmos, Juan, Isaías y los demás - para encontrar oraciones según el pasaje.
  • 16 episodios con video, resumen por secciones navegables, los versículos citados, preguntas frecuentes y un carrusel de más episodios.
  • Páginas propias para el host, James Pratt, y la co-host, Daniela Moreira, con su semblanza, sus episodios y preguntas frecuentes.
  • Página /sobre que abre con una definición directa del programa, y /contacto con el estudio, el mapa y un formulario que abre WhatsApp con los datos ya escritos.
  • Home con la declaración del día, los temas del programa, los episodios más recientes, versículos, postulación de invitados y enlaces a YouTube, Spotify y redes.

Cómo está estructurado

Astro en modo estático: el build genera HTML plano, con el CSS dentro de cada página, y una imagen de nginx lo sirve en Railway. No hay islas de React en el cliente; aparte de la analítica, el JavaScript del sitio son unos pocos scripts en línea.

  • Rutas: inicio, /sobre, /episodios y 16 fichas, /james-pratt, /daniela-moreira, /oraciones, 21 páginas en /oraciones/libro/<libro>, 365 en /oracion-diaria/<fecha> y /contacto.
  • Episodios: colección MDX con número, título, título corto para compartir, ID de YouTube, duración, resumen, descripción para buscadores, versículos y preguntas; el orden lo decide el número.
  • Devocional: un JSON de 365 días alimenta el home, /oraciones, las páginas por libro, las páginas diarias y sus imágenes, sin duplicar un solo texto.
  • Video con el reproductor de youtube-nocookie, y un estado «próximamente» si el episodio todavía no tiene video.
  • Datos estructurados: WebSite, Organization y PodcastSeries en el home; PodcastEpisode y BreadcrumbList en cada episodio; Person en las páginas de los conductores; AboutPage en /sobre; ItemList en los listados; FAQPage donde hay preguntas visibles; ContactPage y LocalBusiness en contacto.
  • sitemap.xml con fecha de actualización, un llms.txt estático y un robots.txt que permite a los buscadores con IA; nginx añade HSTS, CSP y políticas de caché por tipo de archivo.

Identidad visual

Clara y serena: fondos blanco nieve y bruma celeste, un celeste de acento y un azul noche para el pie y los bloques oscuros. Fraunces para los titulares y Outfit para el texto.

  • El hero muestra tres filas de miniaturas de episodios que se desplazan en sentidos alternos, junto al versículo que da nombre al programa, Mateo 5:48.
  • Los versículos se presentan como citas grandes, y la sección de versículos del home es un bento que cabe en una sola vista.
  • Regla del proyecto: nada de letter-spacing, ni positivo ni negativo; las palabras van con su espaciado natural.

Por dentro del sitio

  • Perfectos Podcast: Índice de oraciones con la oración del día
    Índice de oraciones con la oración del día.
  • Perfectos Podcast: Página del host, James Pratt, con su semblanza y sus episodios
    Página del host, James Pratt, con su semblanza y sus episodios.

Decisiones técnicas

  • Sitio 100% estático servido por nginx: nada cambia según el visitante, así que no hace falta un servidor de aplicación. La única pieza viva, la oración de hoy, se fija en el build y se corrige en el navegador leyendo el mismo JSON con la fecha real del visitante.
  • Las 365 páginas diarias van con noindex y fuera del sitemap: son casi gemelas y están pensadas para compartirse, no para buscadores. Lo que se indexa es el agrupado por libro de la Biblia.
  • La imagen para compartir de cada día se genera en el build con Satori y resvg, con las mismas tipografías del sitio: al pegar el enlace en WhatsApp se ve la oración de ese día y no una portada genérica.
  • Una sola fuente por tipo de contenido: el devocional sale de un JSON y los episodios de una colección MDX en la que cada ### abre una sección, de modo que la lista «En este episodio» y sus anclas se generan solas. Un plugin propio convierte los títulos con tildes y eñes en anclas ASCII para que los enlaces no queden codificados.
  • El host y la co-host tienen cada uno un @id estable de schema.org que las demás páginas referencian, así el buscador ve dos personas identificadas y no un nombre repetido en cada episodio.

Retos

  • Componer 365 imágenes en el build con Satori, que solo lee fuentes estáticas: se usan las versiones .woff de Fraunces y Outfit, las mismas familias del sitio.
  • Respetar las convenciones editoriales del programa en todo el contenido - por ejemplo, escribir siempre «Dios», también dentro de los versículos citados - sin perder el tono cercano.
  • Cambiar de nombre con el proyecto en marcha: el sitio nació como Voces de Fe y pasó a Perfectos Podcast, con dominio, redes y logo nuevos.

Resultado

El sitio está en producción con los 16 episodios, el devocional completo del año y las páginas de los dos conductores. Es estático de punta a punta: cada episodio nuevo es un archivo MDX y un build, y el sitemap declara 44 URLs indexables con su fecha de actualización.

¿Necesitas algo parecido?

Cuéntame qué estás construyendo y te respondo con alcance, stack y una fecha realista.