Tipos de archivos en Django
Django distingue dos tipos de archivos no-Python:
- Archivos estáticos: CSS, JavaScript, fuentes e imágenes del diseño del sitio. Son parte del código del proyecto y no cambian con el uso.
- Archivos multimedia (media): archivos subidos por los usuarios (imágenes de perfil, documentos…). Se gestionan por separado con
MEDIA_URLyMEDIA_ROOT.
Configuración de archivos estáticos
# settings.py
# URL base para servir archivos estáticos
STATIC_URL = '/static/'
# Directorios adicionales donde Django busca estáticos (además de app/static/)
STATICFILES_DIRS = [
BASE_DIR / 'static', # Carpeta global de estáticos del proyecto
]
# Destino de collectstatic en producción
STATIC_ROOT = BASE_DIR / 'staticfiles'
Estructura de directorios
mi_proyecto/
static/ # Estáticos globales del proyecto
css/
estilos.css
js/
main.js
img/
logo.png
catalogo/
static/ # Estáticos de la aplicación catalogo
catalogo/
css/
catalogo.css
js/
catalogo.js
La convención de crear una subcarpeta con el nombre de la aplicación dentro de static/ evita colisiones de nombres al ejecutar collectstatic.
El tag {% static %}
En las plantillas, usa {% static %} para construir la URL correcta del archivo estático:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'css/estilos.css' %}">
<link rel="stylesheet" href="{% static 'catalogo/css/catalogo.css' %}">
<link rel="icon" href="{% static 'img/favicon.ico' %}">
</head>
<body>
<img src="{% static 'img/logo.png' %}" alt="Logo">
<script src="{% static 'js/main.js' %}"></script>
<script src="{% static 'catalogo/js/catalogo.js' %}"></script>
</body>
</html>
Nunca escribas las rutas de estáticos de forma manual (/static/css/estilos.css). El tag {% static %} genera la URL correcta independientemente de la configuración de STATIC_URL.
collectstatic
En producción, el comando collectstatic recopila todos los archivos estáticos de las aplicaciones y los copia en STATIC_ROOT:
python manage.py collectstatic
Esto copia los estáticos de:
static/de cada aplicación registrada- Los directorios definidos en
STATICFILES_DIRS
Todo a STATIC_ROOT, que luego sirve Nginx o WhiteNoise directamente.
Servir estáticos en desarrollo
Django sirve automáticamente los archivos estáticos durante el desarrollo cuando DEBUG = True mediante django.contrib.staticfiles. En producción este comportamiento se desactiva por razones de rendimiento.
WhiteNoise: estáticos en producción
WhiteNoise permite servir archivos estáticos directamente desde Django sin necesidad de Nginx, ideal para despliegues en plataformas como Heroku o Railway:
pip install whitenoise
# settings.py
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware', # Justo después de SecurityMiddleware
# ...
]
# Compresión y versioning de archivos estáticos
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
WhiteNoise sirve los archivos con cabeceras de caché correctas y puede comprimir los archivos automáticamente, mejorando el rendimiento.
Fingerprinting con ManifestStaticFilesStorage
Para producción sin WhiteNoise, ManifestStaticFilesStorage añade un hash al nombre del archivo para invalidar la caché del navegador cuando el contenido cambia:
STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage'
Con esto, main.css se convierte en main.abc123de.css, forzando al navegador a descargar la versión actualizada.
Alan Sastre
Ingeniero de Software y formador, CEO en CertiDevs
Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, Django es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.
Más tutoriales de Django
Explora más contenido relacionado con Django y continúa aprendiendo con nuestros tutoriales gratuitos.
Aprendizajes de esta lección
Configurar STATIC_URL, STATICFILES_DIRS y STATIC_ROOT en settings.py. Usar el tag {% static %} en plantillas para referenciar archivos estáticos. Ejecutar collectstatic para recopilar archivos estáticos para producción. Organizar archivos estáticos por aplicación y globalmente en el proyecto. Servir archivos estáticos en producción con WhiteNoise.