DEV Community

Francisco Júnior
Francisco Júnior

Posted on • Edited on

1

Guia Completo para Configuração e Estrutura da Pasta static no Django

A pasta static é uma parte fundamental de um projeto Django, responsável pelo armazenamento de arquivos estáticos, como folhas de estilo CSS, arquivos JavaScript e imagens. Neste guia completo, exploraremos como configurar e estruturar a pasta static no Django, incluindo exemplos práticos de como gerenciar e servir arquivos estáticos.

Configuração Básica

Para configurar a pasta static em um projeto Django, siga estas etapas:

1. Defina a Pasta static do Projeto

Crie uma pasta chamada static na raiz do seu projeto Django. Você pode criar subpastas dentro da pasta static para organizar seus arquivos estáticos de forma mais eficiente. Por exemplo:

meuprojeto/
    ├── static/
    │   ├── css/
    │   ├── js/
    │   ├── img/
Enter fullscreen mode Exit fullscreen mode

Dentro das subpastas, você pode adicionar arquivos CSS, JavaScript e imagens.

2. Configuração no settings.py

Abra o arquivo settings.py do seu projeto Django e verifique se a configuração para arquivos estáticos está correta. Certifique-se de que as seguintes configurações estejam presentes:

# settings.py

# Configuração do caminho para os arquivos estáticos
STATIC_URL = '/static/'

# Caminho para a pasta estática do projeto
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Enter fullscreen mode Exit fullscreen mode

A configuração STATIC_URL define o URL base para seus arquivos estáticos, enquanto STATICFILES_DIRS especifica o local da pasta static do projeto.

3. Ative o Middleware

No arquivo settings.py, verifique se o middleware django.contrib.staticfiles.middleware.StaticFilesMiddleware está ativado. Isso permite que o Django sirva arquivos estáticos durante o desenvolvimento.

# settings.py

MIDDLEWARE = [
    # ...
    'django.contrib.staticfiles.middleware.StaticFilesMiddleware',
    # ...
]
Enter fullscreen mode Exit fullscreen mode

Uso de Arquivos Estáticos em Modelos

Você pode usar arquivos estáticos em modelos HTML para estilização e funcionalidade em seu aplicativo. Use a tag {% load static %} para carregar os arquivos estáticos em seus modelos e, em seguida, use a função static para criar URLs para esses arquivos. Por exemplo, para carregar um arquivo CSS em um modelo:

{% load static %}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
</head>
<body>
    <!-- Conteúdo da página -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

A função {% static 'css/styles.css' %} gera o URL absoluto para o arquivo CSS.

Coletando Arquivos Estáticos

Quando você está pronto para implantar seu aplicativo em um servidor de produção, deve coletar os arquivos estáticos em uma pasta centralizada. Para fazer isso, execute o seguinte comando:

python manage.py collectstatic
Enter fullscreen mode Exit fullscreen mode

Isso coletará todos os arquivos estáticos de todas as aplicações em seu projeto e os colocará em uma pasta especificada no arquivo settings.py (geralmente STATIC_ROOT).

Servindo Arquivos Estáticos

Em um ambiente de produção, você deve configurar seu servidor web para servir os arquivos estáticos diretamente. O Django não é projetado para servir arquivos estáticos em produção. Certifique-se de configurar seu servidor web (como Nginx ou Apache) para servir os arquivos estáticos a partir da pasta especificada em STATIC_ROOT.

Conclusão

A pasta static desempenha um papel crucial na criação de aplicativos da web Django. Com a configuração adequada e a estrutura organizada, você pode gerenciar eficazmente seus arquivos estáticos, como CSS, JavaScript e imagens, para criar páginas da web atraentes e funcionais. Certifique-se de seguir as práticas recomendadas para coletar e servir arquivos estáticos em ambientes de produção.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay