¿Cómo se configura STATIC_URL y STATIC_ROOT en Django?

-

 Configurar STATIC_URL y STATIC_ROOT en Django es crucial para servir archivos estáticos (como CSS, JavaScript e imágenes) en modo de producción. Aquí tienes una guía detallada sobre ambos:

1. ¿Qué es STATIC_URL?

STATIC_URL define la URL pública desde la que se accederán los archivos estáticos. Es la dirección que se utilizará en los archivos HTML para que el navegador pueda cargar estos recursos. Este valor suele terminar en una barra / para indicar una ruta de directorio.

STATIC_URL = '/static/'  # Esta es la configuración más común

2. ¿Qué es STATIC_ROOT?

STATIC_ROOT define la ruta del sistema de archivos en tu servidor donde se recopilarán todos los archivos estáticos de tu proyecto cuando prepares tu aplicación para producción. En otras palabras, es el directorio donde se almacenarán los archivos después de ejecutar el comando collectstatic.

Por ejemplo:

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

Con esta configuración, Django creará un directorio llamado staticfiles dentro de tu directorio base del proyecto (BASE_DIR). Al ejecutar collectstatic, todos los archivos estáticos de las aplicaciones se copiarán a este directorio.

3. Configuración para Desarrollo vs. Producción

En Desarrollo (DEBUG = True)

Django sirve automáticamente los archivos estáticos desde los directorios especificados en STATICFILES_DIRS (que suelen estar en cada aplicación) y desde STATIC_URL. No es necesario configurar STATIC_ROOT en desarrollo, y tampoco necesitas ejecutar collectstatic.

En Producción (DEBUG = False)

Cuando DEBUG = False, Django no sirve archivos estáticos automáticamente, por lo que:

  1. Define STATIC_ROOT: Esto le indica a Django dónde almacenar todos los archivos estáticos recopilados.
  2. Ejecuta collectstatic: Usa el comando python manage.py collectstatic para recopilar todos los archivos estáticos en el directorio de STATIC_ROOT.
  3. Configura el servidor web: Configura el servidor para que sirva los archivos desde el directorio STATIC_ROOT.

Ejemplo Completo de Configuración para Producción

# settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

Luego, al ejecutar el comando collectstatic, Django copiará todos los archivos estáticos al directorio STATIC_ROOT (staticfiles). De esta forma, el servidor web (Nginx, Apache, etc.) podrá servir los archivos estáticos desde ese directorio.

Comentarios

Publicar un comentario

Entradas populares de este blog

Ejemplo para hacer una imagen circular en CSS

-
Imagen
Crear una imagen circular en CSS es una de las tareas más simples pero efectivas para hacer que las imágenes se vean más atractivas. Este efecto es especialmente útil para avatares o fotos de perfil en sitios web. Aquí te muestro cómo hacerlo en solo unos pocos pasos. Paso 1: Configura el HTML Primero, necesitamos una imagen a la que le daremos forma circular. En este ejemplo, usaremos una estructura HTML simple: html <!DOCTYPE html > < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Imagen Circular en CSS </ title > < link rel = "stylesheet" href = "styles.css" > </ head > < body > < div class = "imagen-circular" > < img src = "avatar.jpg" alt = "Foto de Perfil" > </ div > ...
Sigue leyendo »

Ejemplo para añadir un contorno a un texto en CSS

-
Imagen
Añadir un contorno a un texto puede realzar su apariencia y mejorar su legibilidad, especialmente en fondos complejos. En este artículo, te mostraremos cómo hacerlo de manera sencilla utilizando CSS. ¿Qué es el contorno de texto? El contorno de texto se refiere a un borde que se aplica alrededor de las letras. Puede ayudar a que el texto destaque y sea más atractivo visualmente. Sin embargo, CSS no proporciona una propiedad directa para agregar un contorno a un texto, por lo que usaremos una combinación de propiedades para lograr el efecto deseado. Método 1: Usar text-shadow Una de las formas más comunes de crear un contorno es mediante la propiedad text-shadow . Esta propiedad se utiliza para añadir sombras al texto, pero también se puede manipular para simular un contorno. A continuación, te mostramos cómo hacerlo: Ejemplo de código html <!DOCTYPE html > < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name ...
Sigue leyendo »

Ejemplo para crear un tooltip con CSS

-
Imagen
Los tooltips son mensajes emergentes que aparecen cuando el usuario pasa el cursor sobre un elemento. Son útiles para proporcionar información adicional sin sobrecargar la interfaz. En este artículo, aprenderás cómo crear un tooltip simple usando solo HTML y CSS, sin necesidad de JavaScript. Paso 1: Estructura HTML Primero, crearemos la estructura HTML básica. Usaremos un span como el elemento que activará el tooltip y un div como contenedor del texto del tooltip. html <!DOCTYPE html > < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Ejemplo de Tooltip con CSS </ title > < link rel = "stylesheet" href = "styles.css" > </ head > < body > < div class = "tooltip-container" > < span class = "tooltip-trigger...
Sigue leyendo »