Utilizando arquivos estáticos em um projeto Django \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 19 Horas 54 Min 33 Seg Tempo restante da oferta: 19 54 33 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Utilizando arquivos estáticos em um projeto Django [ Python ](https://www.treinaweb.com.br/blog/categoria/python) [ Django ](https://www.treinaweb.com.br/blog/categoria/django) # Utilizando arquivos estáticos em um projeto Django Veja neste artigo como configurar e utilizar arquivos estáticos em projetos Django. [ Fagner Pinheiro ](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) 8 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/11152338/ARQUIVOS-ESTÁTICOS.png) A utilização de arquivos estáticos no Django necessita de algumas configurações para ser feita, como veremos neste artigo :) [ ![Django - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/django.svg) Curso Django - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/django-fundamentos) ## Configurando aplicação Com a aplicação aberta no PyCharm, precisamos configurar o diretório em que os arquivos estáticos (JS, CSS e IMG) serão armazenados. Para isso, vamos até o final do arquivo `settings.py` do nosso projeto até encontrar a configuração `STATIC_URL`, é ela quem define o diretório que os arquivos estáticos serão armazenados. Por padrão, o Django armazena os arquivos estáticos em um diretório chamado `static`, localizado na aplicação. Sendo assim, é lá que vamos armazenar os arquivos CSS, JS e IMG da aplicação. Para isso, o primeiro passo é criar um diretório chamado `static` na aplicação e, dentro do diretório `static`, criar uma outra pasta com o nome da aplicação. Por exemplo, se a aplicação possuir o nome “minha\_aplicacao”, precisamos criar um diretório `static/minha_aplicacao` dentro da app que estamos desenvolvendo: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/03/11113423/Screen-Shot-2019-03-11-at-10.58.45.png) Note que na imagem acima, estamos criando um diretório com o mesmo nome da aplicação “app” dentro do diretório “static” e, dentro do diretório “app”, criamos as pastas para armazenar os arquivos css, js e img. Com isso, só precisamos armazenar os arquivos estáticos do projeto em seu respectivo diretório. Como exemplo, vamos criar um arquivo css simples e armazená-lo no diretório `static/app/css` com o nome `style.css` e com o seguinte conteúdo: ```css body { background-color: lightblue; } h1 { color: navy; margin-left: 30px; } ``` [ ![Django - Templates](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/django.svg) Curso Django - Templates Conhecer o curso ](https://www.treinaweb.com.br/curso/django-templates) ## Utilizando arquivos nos templates Agora que já configuramos a localização dos arquivos estáticos e criamos o `css` de exemplo, precisamos importá-lo em nossos templates. Para isso, o processo é bem simples: 1 - Carregamos a tag `static` do Django em nosso template (linha 2); 2 - Carregamos o arquivo css utilizando a tag (linha 7). Note que precisamos determinar o caminho, a partir do diretório `static`, do arquivo css que criamos anteriormente. ```html {% load static %} Página de testes Olá, mundo ``` ## Testando aplicação Agora, ao executar a aplicação e renderizar o template com o css importado, teremos o seguinte resultado: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/03/11113445/Screen-Shot-2019-03-11-at-11.32.03.png) - [ #Python ](https://www.treinaweb.com.br/blog/tag/python) - [ #Django ](https://www.treinaweb.com.br/blog/tag/django) Autor ![Fagner Pinheiro](//secure.gravatar.com/avatar/e622f7c7d686a0b11f8d977ce9725b67?d=mm) ## Fagner Pinheiro Professor na TreinaWeb e graduado em Sistemas de Informação pelo Instituto Federal da Bahia. Apaixonado por desenvolvimento web, desktop e mobile desde os 12 anos de idade. Já utilizou todos os sistemas operacionais possíveis, mas hoje se contenta com o OSX instalado em seu desktop. Quando não está trabalhando, é IGL e Awper do time de CS:GO da Treinaweb. Até passou em uma peneira do Cruzeiro, mas preferiu estudar Python. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/04112944/DJANGO-PROJETOS-PYCHARM-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 7 anos atrás ## [ Criando o primeiro projeto Django ](https://www.treinaweb.com.br/blog/criando-o-primeiro-projeto-django) Com o ambiente de desenvolvimento devidamente configurado, veremos neste artigo como criar nosso primeiro projeto com Django. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/03/o-que-e-fastapi-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Criando o primeiro CRUD com FastAPI ](https://www.treinaweb.com.br/blog/criando-o-primeiro-crud-com-fastapi) Neste artigo nós iremos aprender um pouco mais sobre o FastAPI durante o desenvolvimento de uma API com todas as operações de CRUD. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/08085435/app-flask-css-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 7 anos atrás ## [ Utilizando arquivos estáticos no Flask ](https://www.treinaweb.com.br/blog/utilizando-arquivos-estaticos-no-flask) Veja neste artigo como utilizar arquivos estáticos em projetos Flask. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Como realizar upload no S3 com NestJS ](https://www.treinaweb.com.br/blog/como-realizar-upload-no-s3-com-nestjs) Neste artigo vamos aprender o passo a passo de como realizar o upload de arquivos para a AWS S3 utilizando uma aplicação NestJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/22111106/FLUTTER-CONFIGURANDO-FONTES-EXTERNAS-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ Configurando fontes em projetos Flutter ](https://www.treinaweb.com.br/blog/configurando-fontes-em-projetos-flutter) Veja neste artigo como configurar fontes em projetos Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/NODE-SQUELIZE-MYSQL-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Usando Sequelize ORM com Node e Express ](https://www.treinaweb.com.br/blog/usando-sequelize-orm-com-node-e-express) Vamos aprender a configurar uma aplicação com banco de dados MySQL usando Sequelize ORM com Node.js e Express. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/TEMPLATE-ENGINE-PUG-EXPRESS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Express com Template Engine PUG ](https://www.treinaweb.com.br/blog/express-com-template-engine-pug) Neste artigo vamos estruturar um projeto utilizando Express com o Template Engine PUG e entender as suas principais características. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/thymeleaf-reaproveitando-codigo-com-fragments-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Thymeleaf - Herança de Templates ](https://www.treinaweb.com.br/blog/thymeleaf-heranca-de-templates) Neste artigo veremos como implementar a herança de templates com os fragments parametrizados da template engine Thymeleaf. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/SERVIDOR-HTTP-EXPRESS-JS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Criando um servidor HTTP com Express ](https://www.treinaweb.com.br/blog/criando-um-servidor-http-com-express) O Express é um framework utilizado em conjunto com o Node.js. Ele possui características que facilitam o desenvolvimento de nossas aplicações web e APIs, como um sistema de rotas completo, tratamento de exceções, gerenciamento de requisições HTTP e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/12/TS-ZOD-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ O que é o Zod? ](https://www.treinaweb.com.br/blog/o-que-e-o-zod) Neste artigo vamos ter uma introdução sobre o Zod, uma biblioteca de declaração e validação de dados em TypeScript e criar um exemplo de como utilizá-la. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/NEST-JS-COM-HANDLEBARS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ NestJS com template engine handlebars ](https://www.treinaweb.com.br/blog/nestjs-com-template-engine-handlebars) Neste artigo vamos aprender a configurar o NestJS com o handlebars, uma template engine que permite criarmos views dinâmicas e robustas. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **19h 54min 33s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58