DEV Community

Cover image for Configurar un CDN gratuito con GitHub y jsDelivr
Ciro
Ciro

Posted on

Configurar un CDN gratuito con GitHub y jsDelivr

#cdn #github #javascript #webdev

¿Necesitas servir archivos CSS o JavaScript desde un CDN pero no quieres pagar por servicios de terceros? Existe una solución simple y gratuita que aprovecha GitHub y jsDelivr.

El problema

Cuando desarrollas aplicaciones web, es común necesitar:

  • Compartir hojas de estilo CSS entre múltiples proyectos
  • Servir archivos estáticos con baja latencia global
  • Cachear recursos de forma eficiente
  • Versionar tus assets de manera confiable

Los CDN tradicionales pueden ser costosos o requerir configuración compleja. Pero hay una alternativa mejor.

La solución: GitHub + jsDelivr

jsDelivr es un CDN gratuito que puede servir archivos directamente desde repositorios de GitHub. No requiere registro, configuración ni costo alguno.

Ventajas

  • Gratis y sin límites para proyectos open source
  • Red global de servidores con baja latencia
  • Caché automático para mejorar el rendimiento
  • Control de versiones mediante tags de Git
  • Minificación automática disponible

Implementación paso a paso

Vamos a crear un CDN para servir archivos CSS, similar a este ejemplo real.

1. Crea un repositorio en GitHub 

mkdir stylesheet-cdn
cd stylesheet-cdn
git init
Enter fullscreen mode Exit fullscreen mode

2. Agrega tus archivos CSS

Crea una carpeta styles/ y añade tu archivo CSS:

mkdir styles
Enter fullscreen mode Exit fullscreen mode

Por ejemplo, styles/mis-estilos.css:

/* Tu CSS aquí */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: #333;
}

h1,
h2,
h3 {
  color: #2c3e50;
  margin-top: 1.5em;
}

code {
  background: #f4f4f4;
  padding: 2px 6px;
  border-radius: 3px;
}
Enter fullscreen mode Exit fullscreen mode

3. Sube el repositorio a GitHub 

git add .
git commit -m "Add stylesheet"
git push origin main
Enter fullscreen mode Exit fullscreen mode

4. Usa tu archivo desde el CDN

Ahora puedes incluir tu CSS en cualquier página web:

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/TuUsuario/stylesheet-cdn@main/styles/mahonnaise.vs-code-markdown-theme.css"
    />
  </head>
  <body>
    <h1>¡Hola mundo!</h1>
    <p>Este CSS se sirve desde un CDN global gratuito.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Patrón de URL

El formato de URL de jsDelivr es:

https://cdn.jsdelivr.net/gh/{usuario}/{repositorio}@{branch}/ruta/al/archivo
Enter fullscreen mode Exit fullscreen mode

Mejores prácticas

Usa versiones en producción

Para proyectos en producción, es recomendable usar tags de Git en lugar de @main:

# Crea un tag
git tag v1.0.0
git push origin v1.0.0
Enter fullscreen mode Exit fullscreen mode 
<!-- URL con versión específica -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/TuUsuario/stylesheet-cdn@v1.0.0/styles/mahonnaise.vs-code-markdown-theme.css"
/>
Enter fullscreen mode Exit fullscreen mode

Esto asegura que tu aplicación no se rompa si actualizas el archivo en el futuro.

Minificación automática

jsDelivr puede minificar tus archivos automáticamente añadiendo .min antes de la extensión:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/TuUsuario/stylesheet-cdn@v1.0.0/styles/mahonnaise.vs-code-markdown-theme.min.css"
/>
Enter fullscreen mode Exit fullscreen mode

Considera el caché

Los archivos se cachean en el CDN, por lo que los cambios pueden tardar 5-10 minutos en propagarse. Para desarrollo, usa @main. Para producción, usa tags versionados.

Casos de uso

Esta técnica es perfecta para:

  • Librerías CSS compartidas entre múltiples proyectos
  • Themes y plantillas de código abierto
  • Archivos JavaScript de utilidades comunes
  • Recursos estáticos como fuentes o iconos
  • Prototipos rápidos sin necesidad de configurar hosting

Limitaciones

  • El repositorio debe ser público
  • No es ideal para archivos muy grandes (>50MB)
  • El caché puede dificultar el desarrollo activo (usa @main para desarrollo)

Conclusión

Con GitHub y jsDelivr puedes tener un CDN global de nivel empresarial completamente gratis. Esta solución es ideal para proyectos open source, bibliotecas compartidas, y cualquier recurso estático que quieras distribuir eficientemente.

El código completo de ejemplo está disponible en github.com/Gekyzo/stylesheet-cdn.

Top comments (0)