Utilizando arquivos estáticos no Flask \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 13 Min 24 Seg Tempo restante da oferta: 14 13 24 [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 no Flask [ Python ](https://www.treinaweb.com.br/blog/categoria/python) [ Flask ](https://www.treinaweb.com.br/blog/categoria/flask) # Utilizando arquivos estáticos no Flask Veja neste artigo como utilizar arquivos estáticos em projetos Flask. [ Fagner Pinheiro ](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/08085435/app-flask-css.png) No último artigo dessa trilha, vimos como retornar páginas HTML em requisições Flask e, assim, melhorar a interação da nossa aplicação com seu usuário. Porém, normalmente, há o uso de arquivos estáticos (JS, CSS e IMG) para melhorar a aparência das nossas páginas e, consequentemente, a experiência do usuário. Sendo assim, veremos neste artigo como incorporar estes arquivos ao nosso projeto Flask. ## Criando diretório dos arquivos estáticos É uma boa prática adotada pela comunidade que todos os arquivos estáticos de uma aplicação Flask sejam armazenados em um diretório “static” na raiz do projeto e, dentro deste diretório, uma nova pasta contendo os tipos de arquivos estáticos (CSS, JS e IMG), como podemos ver abaixo: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/11/08085219/image-20191107144727724.png)Para este projeto, iremos usar o Bootstrap como CSS. Para isso, realizamos o download do arquivo .min.css do framework (https://getbootstrap.com/docs/4.3/getting-started/download/) e armazenamos no diretório “static/css”, como vimos na imagem acima. Ao realizar este procedimento, o Flask já estará apto a utilizar este arquivo CSS no projeto, bastando apenas importá-lo em nosso template. [ ![Ruby on Rails Intermediário](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ruby-on-rails.svg) Curso Ruby on Rails Intermediário Conhecer o curso ](https://www.treinaweb.com.br/curso/ruby-on-rails-intermediario) ## Utilizando arquivos estáticos no template Agora que já configuramos nosso projeto para armazenar arquivos estáticos, precisamos importá-lo em nosso template. Para isso, é muito simples. O primeiro passo é criar uma tag `link` no `head` do arquivo HTML e referenciar nosso arquivo `bootstrap.min.css`: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/11/08085244/image-20191107145335565.png) Agora, no `href` do `link`, indicamos onde se encontra o arquivo estático que queremos utilizar. No nosso caso, ele se encontra em `static/css/bootstrap.min.css`. Sendo assim, temos que passar, como primeiro parâmetro do método `url_for`, o diretório raiz dos arquivos estáticos. Após isso, informamos o restante do caminho até o arquivo no atributo `filename`, como vemos acima. Agora, já estamos aptos a usar o arquivo do bootstrap em nossos templates e, com isso, personalizar nossas páginas HTML. Utilizando como base o tema `Jumbotron` do bootstrap, conseguimos criar uma página com todo o poder do framework: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/11/08085324/image-20191107150013130.png) ## Concluindo A utilização de arquivos estáticos em projetos Flask é, realmente, muito simples. Apenas precisamos criar um diretório para comportar estes arquivos e importá-los em nossos templates utilizando o método `url_for` do Jinja2. Porém, sabemos que o conteúdo de uma página HTML nem sempre é estático. Muitas vezes este conteúdo é enviado pela requisição e exibido no HTML… Bom, como fazer isso? É exatamente o que veremos no próximo artigo desta série :) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #Python ](https://www.treinaweb.com.br/blog/tag/python) - [ #Flask ](https://www.treinaweb.com.br/blog/tag/flask) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) - [ #js ](https://www.treinaweb.com.br/blog/tag/js) 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/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/03/11152338/ARQUIVOS-ESTÁTICOS-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 8 anos atrás ## [ Utilizando arquivos estáticos em um projeto Django ](https://www.treinaweb.com.br/blog/utilizando-arquivos-estaticos-em-um-projeto-django) Veja neste artigo como configurar e utilizar arquivos estáticos em projetos Django. 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/2021/08/EJS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 5 anos atrás ## [ Utilizando template engine EJS com Node.js ](https://www.treinaweb.com.br/blog/utilizando-template-engine-ejs-com-node-js) Neste artigo vamos aprender a utilizar a Template Engine EJS com Node.js e também alguns recursos interessantes desta ferramenta. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/ROTAS-EXPRESS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Criando Rotas com Express.js ](https://www.treinaweb.com.br/blog/criando-rotas-com-express-js) Vamos aprender a configurar rotas com o Express.js, com exemplos utilizando as requisições GET, POST, PUT e DELETE. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/09/17132411/middlewares-aspnet-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 8 anos atrás ## [ Compreendendo os middlewares no ASP.NET Core ](https://www.treinaweb.com.br/blog/compreendendo-os-middlewares-no-asp-net-core) Veja como os middlewares funcionam em uma aplicação ASP.NET Core. Ler artigo - ![](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/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/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/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 ## 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 **14h 13min 24s** - 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