Geradores de sites / blogs estáticos - o que são e por que usá-los? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 12 Horas 37 Min 18 Seg Tempo restante da oferta: 12 37 18 [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) Geradores de sites / blogs estáticos - o que são e por que usá-los? [ CMS's e E-commerce ](https://www.treinaweb.com.br/blog/categoria/cmss-e-e-commerce) # Geradores de sites / blogs estáticos - o que são e por que usá-los? Aprenda o que são geradores de sites estáticos e quando usá-los em seus projetos. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 9 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/28132543/img-hanashiro_1024.png) Olá, Web Developers! Muitos já devem ter ouvido falar de geradores de sites estáticos (SSG - Static Site Generators). Mas o que eles fazem e porque usar um? Bom, é sobre isso que falarei aqui hoje! [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## Sites dinâmicos Quando criamos uma página, não importa se é um site ou blog, teremos componentes repetidos, como o cabeçalho, menu, rodapé, etc. Para não ficarmos repetindo o HTML em cada arquivo, o melhor seria deixar cada um desses componentes em arquivos separados. Se estivermos usando PHP, por exemplo, basta chamar estes arquivos onde queremos utilizá-los. Neste exemplo, precisamos então de um servidor que suporte PHP. Quando um usuário acessa uma página, o código PHP é executado e ele vai montando a página e a envia para o usuário o HTML. Se quisermos criar um blog, por exemplo, podemos aproveitar o mesmo HTML e simplesmente alterar o texto que será jogado no arquivo. O texto ficará armazenado em um banco de dados. [ ![RUP - Rational Unified Process](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/rup.svg) Curso RUP - Rational Unified Process Conhecer o curso ](https://www.treinaweb.com.br/curso/rup-rational-unified-process) ## O problema dos sites dinâmicos Seguindo o exemplo anterior, temos o seguinte: - Cada vez que uma mesma página é acessada, ela é criada do zero. Para seu conteúdo ser pego, é feito um acesso novo ao banco de dados. Isso gera um certo trabalho para o servidor; - Como a página é criada a cada requisição, leva-se um pouco de tempo antes do servidor enviá-la para o usuário, já que ela ainda está sendo “montada”; - Temos que cuidar bem da segurança para nosso site e banco de dados não serem invadidos; ## Sites estáticos Uma página estática é feita puramente com HTML. Seu conteúdo não muda. Como o arquivo HTML já está pronto, assim que requisitado, o servidor já envia o arquivo para o usuário. Não há o trabalho de acessar o banco de dados e montar o arquivo. Mas e se meu site tiver muitas páginas, terei que ficar repetindo pedações de HTML? Não, é aqui que entram os geradores de sites estáticos! ## Geradores de sites estáticos Os geradores de sites estáticos nos permitem trabalhar como se estivéssemos criando páginas dinâmicas, ou seja, podemos criar pedaços de HTML que ficarão em arquivos separados. A diferença é que, ao invés de gerar uma página quando o usuário requisitar, os geradores já geram todos os arquivos HTML. Assim, quando alguém requisitar uma página, ela já estará pronta para ser entregue. Se você precisar alterar o rodapé do seu site, o gerador irá gerar novamente todas as páginas, e seu site estará com o nova rodapé. Quer criar um blog? Apenas crie um arquivo com o conteúdo, e o gerador irá gerar a página com cabeçalho, rodapé, etc, e o seu conteúdo lá dentro, do mesmo jeito que o PHP faria se tivesse que acessar um banco de dados com o seu texto. Você tem total controle do layout e, assim como ferramentas como o WordPress, há várias templates prontas disponíveis na web. Parecem ferramentas simples, mas assim que você começa a estudá-los a fundo, verá que há muitas opções avançadas. Um exemplo feito com [Hugo](https://gohugo.io/ "Hugo"): eu tenho um site onde publico jogos online e produtos. Alguns desses jogos estão disponíveis na Google Play. Então eu criei uma template para exibir esses jogos. Quando quero publicar um jogo novo, eu simplesmente crio um arquivo novo dentro da categoria “games” com a URL do jogo dentro de uma variável. A template cuida do resto. E caso eu inclua uma variável com uma URL do jogo na Google Play, um botão para o Google Play é adicionado à página. Caso eu queira publicar um novo produto, crio um novo arquivo na categoria “store” e ele já redireciona para a minha loja. Essas categorias, claro, fui eu que criei. Você tem total flexibilidade para montar seu site como você quiser. Possuo um outro site que funciona do mesmo jeito, com jogos e vídeos do YouTube, mas feito com WordPress. Cada um tem suas vantagens e desvantagens na manutenção e atualização. ## Vantagens de sites estáticos - As páginas não precisam ser “montadas”, então você tem um pequeno ganho no tempo de envio do arquivo; - Como todas as páginas já estão criadas com o seu conteúdo, não há necessidade de banco de dados; - Menos preocupação com a segurança, pois o você não terá banco de dados e só entrega HTML puro; - Hospedagem de sites estáticos costuma ser mais barata. Há lugares que são de graça. Eu pessoalmente gosto do próprio Github e Gitlab; Um exemplo é o famoso site Tableless. Ele era em WordPress e agora é totalmente estático, usando o gerador Hugo: [https://tableless.com.br/site-tableless-estatico/](https://tableless.com.br/site-tableless-estatico/ "https://tableless.com.br/site-tableless-estatico/") Como pode-se ver, ainda dá para ter sistema de comentários na página, já que os comentários estão sendo servidos pelo Disqus, e não pelo próprio Tableless. Se ninguém contasse, nem daria para saber que agora trata-se de um site estático. ## Desvantagens de sites estáticos Como vimos, não teremos uso de banco de dados, então páginas que necessitam de coisas como Login ou algum processamento no servidor não são possíveis com sites estáticos. Você provavelmente irá armazenar seu site em algum repositório. Se você tem um blog com vários autores, cada um deles irá precisar ter acesso a esse repositório. Como as alterações serão feitas mais “manualmente”, torna-se inviável criar sites para pessoas leigas dessa maneira. É muito mais simples para elas aprender a criar um Post em algo como o WordPress. Além disso, como a cada alteração você terá que gerar todas as páginas novamente, você terá que fazer um novo deploy. Portanto, a atualização do seu conteúdo irá demorar mais do que se você simplesmente tivesse inserido um novo conteúdo em um banco de dados. # Então, quando usar? Pelos pontos levantados, podemos ter uma noção de quando é bom usar ou não. Eu sugiro que você experimente estudar alguma ferramenta dessas, como [Hugo](https://gohugo.io/ "Hugo") ou [Jekyl](https://jekyllrb.com/ "Jekyl"). Assim você terá uma noção melhor de como essas ferramentas funcionam e onde seriam vantajosas para você. Digo isso porque antes de eu realmente experimentar criar algo com o [Hugo](https://gohugo.io/ "Hugo"), mesmo já sabendo na teoria o que é um gerador de sites estáticos, todos os sites que me entregavam não pareciam fazer sentido com algo que não fosse com HTML puro, só PHP ou WordPress. Hoje está mais claro para mim quando os SSG são úteis em um projeto. [ ![Laravel - Blade Templates](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/laravel.svg) Curso Laravel - Blade Templates Conhecer o curso ](https://www.treinaweb.com.br/curso/laravel-blade-templates) - [ #CMS ](https://www.treinaweb.com.br/blog/tag/cms) - [ #Desenvolvimento ](https://www.treinaweb.com.br/blog/tag/desenvolvimento) - [ #blogs ](https://www.treinaweb.com.br/blog/tag/blogs) - [ #sites ](https://www.treinaweb.com.br/blog/tag/sites) - [ #SSG ](https://www.treinaweb.com.br/blog/tag/ssg) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## 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/2020/12/qual-computador-comprar-para-programar-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 6 anos atrás ## [ Qual computador comprar para programar? ](https://www.treinaweb.com.br/blog/qual-computador-comprar-para-programar) Saiba tudo o que precisa para comprar um computador para programar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/08/sete-aspectos-que-revelam-o-futuro-prospero-de-um-desenvolvedor-web-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 9 anos atrás ## [ 7 aspectos que revelam o futuro próspero de um desenvolvedor web ](https://www.treinaweb.com.br/blog/sete-aspectos-que-revelam-o-futuro-prospero-de-um-desenvolvedor-web) São muitas as dúvidas que envolvem a escolha de uma carreira profissional e os estudantes de tecnologia acabam ficando confusos em relação ao futuro. Nesse artigo algumas informações e tendências. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/capa-tag-ancora-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Trabalhando com a tag âncora no HTML ](https://www.treinaweb.com.br/blog/trabalhando-com-a-tag-ancora-no-html) Nesse artigo veremos como a tag âncora (link) e seus atributos são utilizados no desenvolvimento de sites, e como ela pode nos ajudar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox.png-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Criando a estrutura de um Layout com CSS Grid e Flexbox ](https://www.treinaweb.com.br/blog/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox) Nesse artigo vamos aprender sobre as funcionalidades CSS Grid e FlexBox do CSS na pratica durante o desenvolvimento de layout. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07093212/PYTHON-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ Afinal, por que devo aprender Python para 2020? ](https://www.treinaweb.com.br/blog/afinal-por-que-devo-aprender-python-para-2020) Veja neste artigo os motivos para aprender Python neste ano de 2020. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/18200426/XAMARIN-MARYLENE-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ O que é Xamarin? ](https://www.treinaweb.com.br/blog/o-que-e-xamarin) Aplicações mobile sempre estão em alta. Conheça mais sobre o Xamarin, a plataforma open source para criação de aplicações mobile da Microsoft. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/08/07161700/gerenciamento-python-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 4 anos atrás ## [ Empacotando e publicando pacotes Python no PyPi ](https://www.treinaweb.com.br/blog/empacotando-e-publicando-pacotes-python-no-pypi) Neste artigo iremos aprender como funciona o processo de empacotar e distribuir nossos próprios pacotes Python no PyPi. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/26181326/CAPA-ELTON-MARÇO-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ Como melhorar o retorno das suas APIs no Laravel com API Resource do Eloquent ](https://www.treinaweb.com.br/blog/como-melhorar-o-retorno-das-suas-apis-no-laravel-com-api-resource-do-eloquent) Um dos pontos mais importantes quando estamos trabalhando APIs é o retorno dos dados. Veja como melhorar suas APIs no Laravel usando o API Resouce do Eloquent. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/emmet-toolkit-seja-um-web-developer-mais-rapido-agora-mesmo-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Emmet Toolkit - Seja um Web Developer mais rápido ](https://www.treinaweb.com.br/blog/emmet-toolkit-seja-um-web-developer-mais-rapido) Conheça o Emmet Toolkit, ferramenta presente em praticamente todos os editores de código e IDEs que acelera muito a escrita do seu HTML e CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/12/11153426/capa-dba-400x280.png) [ Bancos de Dados ](https://www.treinaweb.com.br/blog/categoria/bancos-de-dados) 9 anos atrás ## [ Como se tornar um DBA? ](https://www.treinaweb.com.br/blog/como-se-tornar-um-dba) Conheça mais um pouco sobre essa carreira e veja se você tem o perfil. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/firebase-1-400x280.png) [ Computação em nuvem ](https://www.treinaweb.com.br/blog/categoria/computacao-em-nuvem) 10 anos atrás ## [ Firebase: descubra no que esta plataforma pode te ajudar ](https://www.treinaweb.com.br/blog/firebase-descubra-no-que-esta-plataforma-pode-te-ajudar) O Firebase é uma plataforma do Google que contém um conjunto de ferramentas e infraestrutura para ajudar no desenvolvimento web e mobile. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/NEST-JS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Autenticação: Protegendo Rotas com NestJS e Passport ](https://www.treinaweb.com.br/blog/autenticacao-protegendo-rotas-com-nestjs-e-passport) Neste artigo vamos aprender a proteger rotas com o NestJS e a biblioteca passport, utilizando a estratégia de autenticação com Tokens JWT. 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 **12h 37min 18s** - 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